{"id":3843,"date":"2012-09-13T08:53:13","date_gmt":"2012-09-13T12:53:13","guid":{"rendered":"https:\/\/chadossman.com\/blog\/?p=3843"},"modified":"2022-10-24T19:54:26","modified_gmt":"2022-10-24T23:54:26","slug":"favicon-apple-touch-icon-adobe-fireworks-template","status":"publish","type":"post","link":"https:\/\/chadossman.com\/blog\/favicon-apple-touch-icon-adobe-fireworks-template\/","title":{"rendered":"Favicon & Apple Touch Icon Adobe Fireworks Template"},"content":{"rendered":"\n

Once upon a time, web designers & developers had it easy when it came to the venerable favicon. Our tiny .ico files served a much greater purpose than their meager 16×16 square pixels would suggest. These humble graphics allowed us to populate the status bars, tabs, and bookmarks of our visitors’ browsers with our emblems. They were a test of our ability to communicate our brands in a strictly limited number of pixels.<\/p>\n\n\n\n

With the advent of high-resolution displays and touch devices, mostly but not entirely from Apple, the favicon exploded into a variety of dimensions, formats, and purposes. Some still fulfill their duties in the good old desktop browser, some appear as web app icons on mobile devices, and some are automatically slurped up for other purposes by apps like Reeder<\/a> and Transmit<\/a>.<\/p>\n\n\n\n

The latest version of HTML5 Boilerplate<\/a> has codified seven different versions as the current baseline requirement for any self-respecting modern site. For an in-depth look at what each of these various files are for, and how to implement them, look no further than Mathias Bynens’ Everything You Always Wanted to Know About Touch Icons<\/a>.<\/p>\n\n\n\n

\"Favicon<\/figure>\n\n\n\n

Hans Christian’s HTML5 Boilerplate Favicon PSD Template<\/a> is indispensable for anyone wishing to easily create the full array of icons at once. But for those web, UI, UX, or just-plain-design designers that prefer to do this type of work in Adobe Fireworks (as do I) rather than Photoshop alone, I’ve created an alternative template. I’ve mostly followed Christian’s lead, with the exception of including a 32×32 pixel favicon for certain browsers on high-resolution displays (such as Safari and Chrome on the MacBook Pro), as detailed by Enrappture<\/a>.<\/p>\n\n\n\n

John Gruber of Daring Fireball brought this issue back to prominence with his post How to Create Retina-Caliber Favicons<\/a>. In short, he recommends creating a single .ico file with 16×16 and 32×32 resources, which affords the designer the greatest control over how the favicon will appear in different contexts. Chris Coyier of CSS-Tricks countered that<\/a> this strategy adds complexity and results in a larger file. His rule of thumb is that with a simple, clean design, a favicon containing a single 32×32 resource ought to scale well. The important takeaway is, of course: test and see.<\/p>\n\n\n\n

The free Photoshop plugin ICO (Windows Icon) Format<\/a> is the cheapest and most straightforward choice for web designers who decide to go the single-resouce route. If you want to get fancy with your favicons, you can use software such as Kodlian’s Icon Slate<\/a> or IconFactory’s IconBuilder<\/a> to create a single favicon file that includes both 16×16 and 32×32 resources.<\/p>\n\n\n\n

I hope at least some fellow designers find this template file useful. Please feel free to comment below if you have any suggestions or feedback.<\/p>\n\n\n\n

Version 1.1<\/strong>
2013-01-10
Download Template<\/a><\/p>\n\n\n\n

Version History:<\/h2>\n\n\n\n
  • Version 1.1, January 10, 2013: This post and accompanying Adobe Fireworks template file revised for clarity, particularly on the topic of supporting high resolution devices as recently debated on Daring Fireball and CSS-Tricks.<\/li>
  • Version 1.0, September 12, 2012: Initial release.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"

    Once upon a time, web designers & developers had it easy when it came to the venerable favicon. Our tiny .ico files served a much greater purpose than their meager 16×16 square pixels would suggest. These humble graphics allowed us to populate the status bars, tabs, and bookmarks of our visitors’ browsers with our emblems. […]<\/p>\n","protected":false},"author":1,"featured_media":3906,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5],"tags":[1607,1606,1689,1605,1608,1610,1609],"class_list":["post-3843","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-adobe-fireworks","tag-apple-touch-icon","tag-design","tag-favicon","tag-html5","tag-retina","tag-web-design"],"jetpack_featured_media_url":"https:\/\/chadossman.com\/blog\/wp-content\/uploads\/2012\/09\/favicon-touch-icons-feature-600.jpg","jetpack_shortlink":"https:\/\/wp.me\/pa9lhB-ZZ","jetpack-related-posts":[{"id":592,"url":"https:\/\/chadossman.com\/blog\/the-dork-report-for-feburary-3-2007\/","url_meta":{"origin":3843,"position":0},"title":"The Dork Report for Feburary 3, 2007","author":"Chad Ossman","date":"February 3, 2007","format":false,"excerpt":"Kids-in-Mind is my new favorite site, boldly making no distinction between parents (looking for information about the latest piece of crap their kids are begging to see) and right-wing cultural warriors (looking for something else upon which to blame society). According to my non-scientific survey of the site contents, Scary\u2026","rel":"","context":"In "The Dork Report"","block_context":{"text":"The Dork Report","link":"https:\/\/chadossman.com\/blog\/category\/dork-report\/"},"img":{"alt_text":"The Dork Report","src":"https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2012\/08\/dork-report.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2012\/08\/dork-report.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2012\/08\/dork-report.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2012\/08\/dork-report.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2012\/08\/dork-report.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":446,"url":"https:\/\/chadossman.com\/blog\/the-dork-report-for-october-1-2006-special-adobe-bashing-edition\/","url_meta":{"origin":3843,"position":1},"title":"In which I complain at length about Adobe Illustrator & Updater","author":"Chad Ossman","date":"October 1, 2006","format":false,"excerpt":"IconFactory vents their Top 5 Adobe Illustrator pet peeves. A flood of \"I know, right?\"s from fellow travelers quickly followed, but on the plus side, so did a hopefully productive dialog with Adobe. I couldn't agree more with the selection weirdness. Frustrated by Illustrator, I frequently find myself using Macromedia\u2026","rel":"","context":"In "Tech"","block_context":{"text":"Tech","link":"https:\/\/chadossman.com\/blog\/category\/main-menu\/tech\/"},"img":{"alt_text":"Adobe Updater","src":"https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2006\/10\/adobe-updater.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2006\/10\/adobe-updater.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2006\/10\/adobe-updater.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2006\/10\/adobe-updater.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2006\/10\/adobe-updater.jpg?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":2004,"url":"https:\/\/chadossman.com\/blog\/objectified\/","url_meta":{"origin":3843,"position":2},"title":"Design is how it works: Gary Hustwit’s Objectified","author":"Chad Ossman","date":"May 1, 2010","format":false,"excerpt":"Objectified finds its thesis in a quotation from one of history's prime industrialists, Henry Ford: \"Every object, whether intentional or not, speaks to whoever put it there.\" In other words, everything we select, purchase, and interact with, was first designed and manufactured by a skilled artisan. That person's job is\u2026","rel":"","context":"In "4 Stars"","block_context":{"text":"4 Stars","link":"https:\/\/chadossman.com\/blog\/category\/ratings\/4-stars\/"},"img":{"alt_text":"Objectified","src":"https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2010\/05\/objectified-1.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2010\/05\/objectified-1.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2010\/05\/objectified-1.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2010\/05\/objectified-1.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2010\/05\/objectified-1.jpg?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":591,"url":"https:\/\/chadossman.com\/blog\/the-dork-report-for-january-27-2007\/","url_meta":{"origin":3843,"position":3},"title":"The Dork Report for January 27, 2007","author":"Chad Ossman","date":"January 27, 2007","format":false,"excerpt":"Horning in on our spottily-updated territory, Mean Teacher gets her Dork on and pens a proper concert review (but not before paying the price). That said, no, you're never too old. Although it's probably best The Peppers don't rock out with their socks out anymore... do they? Peter Gabriel's gone\u2026","rel":"","context":"In "The Dork Report"","block_context":{"text":"The Dork Report","link":"https:\/\/chadossman.com\/blog\/category\/dork-report\/"},"img":{"alt_text":"The Dork Report","src":"https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2012\/08\/dork-report.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2012\/08\/dork-report.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2012\/08\/dork-report.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2012\/08\/dork-report.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2012\/08\/dork-report.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":8490,"url":"https:\/\/chadossman.com\/blog\/the-new-apple-music-classical-app-solves-the-wrong-problem-is-apple-music-disco-next\/","url_meta":{"origin":3843,"position":4},"title":"The new Apple Music Classical app solves the wrong problem. Is Apple Music Disco next?","author":"Chad Ossman","date":"March 29, 2023","format":false,"excerpt":"Apple Music has long frustrated classical music fans. In response, why did Apple opt to create an entirely separate app?","rel":"","context":"In "Music"","block_context":{"text":"Music","link":"https:\/\/chadossman.com\/blog\/category\/main-menu\/music\/"},"img":{"alt_text":"Apple Music Classical","src":"https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2023\/03\/apple-music-classical.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2023\/03\/apple-music-classical.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2023\/03\/apple-music-classical.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2023\/03\/apple-music-classical.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2023\/03\/apple-music-classical.jpg?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":228,"url":"https:\/\/chadossman.com\/blog\/the-dork-report-for-may-31-2006\/","url_meta":{"origin":3843,"position":5},"title":"The Dork Report for May 31, 2006","author":"Chad Ossman","date":"May 31, 2006","format":false,"excerpt":"Wow, both sides of the isle are getting the axe. Adobe will nix Macromedia Freehand in favor of Illustrator and Adobe GoLive in favor of Dreamweaver. My belove-to-hate Macromedia Fireworks, however, lives for now. Also of note is this article about merging the two massive sites, even though it uses\u2026","rel":"","context":"In "The Dork Report"","block_context":{"text":"The Dork Report","link":"https:\/\/chadossman.com\/blog\/category\/dork-report\/"},"img":{"alt_text":"The Dork Report","src":"https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2012\/08\/dork-report.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2012\/08\/dork-report.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2012\/08\/dork-report.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2012\/08\/dork-report.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/chadossman.com\/blog\/wp-content\/uploads\/2012\/08\/dork-report.png?resize=1050%2C600&ssl=1 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/chadossman.com\/blog\/wp-json\/wp\/v2\/posts\/3843","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chadossman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chadossman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chadossman.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chadossman.com\/blog\/wp-json\/wp\/v2\/comments?post=3843"}],"version-history":[{"count":3,"href":"https:\/\/chadossman.com\/blog\/wp-json\/wp\/v2\/posts\/3843\/revisions"}],"predecessor-version":[{"id":7285,"href":"https:\/\/chadossman.com\/blog\/wp-json\/wp\/v2\/posts\/3843\/revisions\/7285"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chadossman.com\/blog\/wp-json\/wp\/v2\/media\/3906"}],"wp:attachment":[{"href":"https:\/\/chadossman.com\/blog\/wp-json\/wp\/v2\/media?parent=3843"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chadossman.com\/blog\/wp-json\/wp\/v2\/categories?post=3843"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chadossman.com\/blog\/wp-json\/wp\/v2\/tags?post=3843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}