Favicon & Apple Touch Icon Adobe Fireworks Template

Favicon and Apple Touch Icon Template for Adobe Fireworks

Once upon a time, web design­ers & devel­op­ers had it easy when it came to the ven­er­a­ble fav­i­con. Our tiny .ico files served a much greater pur­pose than their mea­ger 16x16 square pix­els would sug­gest. These hum­ble graph­ics allowed us to pop­u­late the sta­tus bars, tabs, and book­marks of our vis­i­tors’ browsers with our emblems. They were a test of our abil­ity to com­mu­ni­cate our brands in a strictly lim­ited num­ber of pixels.

With the advent of high-resolution dis­plays and touch devices, mostly but not entirely from Apple, the fav­i­con exploded into a vari­ety of dimen­sions, for­mats, and pur­poses. Some still ful­fill their duties in the good old desk­top browser, some appear as web app icons on mobile devices, and some are auto­mat­i­cally slurped up for other pur­poses by apps like Reeder and Trans­mit.

The lat­est ver­sion of HTML5 Boil­er­plate has cod­i­fied seven dif­fer­ent ver­sions as the cur­rent base­line require­ment for any self-respecting mod­ern site. For an in-depth look at what each of these var­i­ous files are for, and how to imple­ment them, look no fur­ther than Math­ias Bynens’ Every­thing You Always Wanted to Know About Touch Icons.

Favicon and Touch Icon Template for Adobe Fireworks

Hans Christian’s HTML5 Boil­er­plate Fav­i­con PSD Tem­plate is indis­pens­able for any­one wish­ing to eas­ily cre­ate the full array of icons at once. But for those web, UI, UX, or just-plain-design design­ers that pre­fer to do this type of work in Adobe Fire­works (as do I) rather than Pho­to­shop alone, I’ve cre­ated an alter­na­tive tem­plate. I’ve mostly fol­lowed Christian’s lead, with the excep­tion of includ­ing a 32x32 pixel fav­i­con for cer­tain browsers on high-resolution dis­plays (such as Safari and Chrome on the Mac­Book Pro), as detailed by Enrapp­ture.

John Gru­ber of Dar­ing Fire­ball brought this issue back to promi­nence with his post How to Cre­ate Retina-Caliber Fav­i­cons. In short, he rec­om­mends cre­at­ing a sin­gle .ico file with 16x16 and 32x32 resources, which affords the designer the great­est con­trol over how the fav­i­con will appear in dif­fer­ent con­texts. Chris Coyier of CSS-Tricks coun­tered that this strat­egy adds com­plex­ity and results in a larger file. His rule of thumb is that with a sim­ple, clean design, a fav­i­con con­tain­ing a sin­gle 32x32 resource ought to scale well. The impor­tant take­away is, of course: test and see.

The free Pho­to­shop plu­gin ICO (Win­dows Icon) For­mat is the cheap­est and most straight­for­ward choice for web design­ers who decide to go the single-resouce route. If you want to get fancy with your fav­i­cons, you can use soft­ware such as Kodlian’s Icon Slate or IconFactory’s Icon­Builder to cre­ate a sin­gle fav­i­con file that includes both 16x16 and 32x32 resources.

I hope at least some fel­low design­ers find this tem­plate file use­ful. Please feel free to com­ment below or con­tact me via Twit­ter if you have any sug­ges­tions or feedback.

Ver­sion 1.1
2013-01-10
Down­load Template

Ver­sion History:

  • Ver­sion 1.1, Jan­u­ary 10, 2013: This post and accom­pa­ny­ing Adobe Fire­works tem­plate file revised for clar­ity, par­tic­u­larly on the topic of sup­port­ing high res­o­lu­tion devices as recently debated on Dar­ing Fire­ball and CSS-Tricks.
  • Ver­sion 1.0, Sep­tem­ber 12, 2012: Ini­tial release.

One thought on “Favicon & Apple Touch Icon Adobe Fireworks Template

  1. Thx a lot for giv­ing this. Shortly after i started doing it myself i just found your tem­plate. Fine, so i had time left for one more cup of cof­fee ;-) Again, thanks.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>