Favicon & Apple Touch Icon Adobe Fireworks Template

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.

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 and Transmit.

The latest version of HTML5 Boilerplate 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.

Favicon and Touch Icon Template for Adobe Fireworks

Hans Christian’s HTML5 Boilerplate Favicon PSD Template 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.

John Gruber of Daring Fireball brought this issue back to prominence with his post How to Create Retina-Caliber Favicons. 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 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.

The free Photoshop plugin ICO (Windows Icon) Format 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 or IconFactory’s IconBuilder to create a single favicon file that includes both 16×16 and 32×32 resources.

I hope at least some fellow designers find this template file useful. Please feel free to comment below or contact me via Twitter if you have any suggestions or feedback.

Version 1.1
Download Template

Version History:

  • 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.
  • Version 1.0, September 12, 2012: Initial release.
4 Stars Movies

Design is how it works: Gary Hustwit’s Objectified

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 to obsess about you, your body, needs and habits, and how their product might become a part of your life. Director Gary Hustwit’s previous documentary feature Helvetica was a celebration of typographers and graphic designers, and inspired laypeople to recognize the long history and great labor that went into the typefaces they use every day on their computer screens. Similarly, Objectified profiles the often unknown industrial designers behind the stuff we buy.

Jonathan Ives in Objectified
Jonathan Ives’ inner sanctum. After conducting this interview, Apple had the filmmakers shot.

Apple’s resident guru Jonathan Ive is perhaps the most famous design auteur featured. Ive is probably the second most famous person at Apple, justly acclaimed for his singular design aesthetic that first caught the public imagination with the bondi Blue iMac and then the stark, white, deceptively “simple” iPod. Ive’s boss Steve Jobs famously said that design is “not just what it looks like and feels like. Design is how it works,” a principle born out in Ive’s work. Knowing inside and out the particulars of different materials and manufacturing is just part of designing a product’s externals. Ive brandishes precision-tooled parts from a disassembled MacBook Pro to illustrate that Apple spends an enormous amount of time and resources not just designing their products, but also the custom machines and processes necessary to mass produce them.

Naoto Fukasawa in Objectified
Naoto Fukasawa rethinks the CD player.

Objectified spends some considerable time on the topic of sustainability, a responsibility that regrettably only recently entered the industrial designer’s job description. Valerie Casey of IDEO relates the incredible anecdote of the difficult process of developing a new toothbrush. When the product is finally ready and in stores, she embarks on a much-needed vacation to Fiji. If you didn’t already guess where this story was going, she finds a discarded IDEO toothbrush washed up on a beach halfway around the world. In less than a week, her product had become pollution.

Objectified necessarily makes a brief detour into interaction design (this brief digression would be worthy of a film unto itself, but in the meantime, the curious can refer to Steven Johnson‘s 1997 book Interface Culture: How New Technology Transforms the Way We Create and Communicate). When we interact with most analog products, their form follows their function. As a thought experiment, would an alien from outer space (or a Tarzan raised in the wild) be able to infer an object’s function simply by looking at it? That is likely the case with a spoon or chair, but not so much with an iPhone. For many products of the digital age, the outward form factor gives no clues as to the function. Thus, interaction design was born with the Xerox PARC graphical user interface. Many of our daily tasks are now abstracted onto a two-dimensional screen. The Apple iPhone and iPad have popularized the touchscreen, which likely signals the beginning of another sea change when peripherals like keyboards and mice will be revealed to have been a temporary evolutionary bump, now marked for extinction.

Awww yeah, designers know what time it is.

The last images we see are of the devices used to make the movie itself: a computer, hard drive, and camera. Tellingly, the Objectified Blu-ray edition has no menu structure at all. You put it in, it plays, and the supplementary features follow immediately after the closing credits. It’s a completely guided, linear experience that speaks to the film’s elevation of the creator over the consumer.

Official movie site:

Must read: A Hurricane of Consumer Values by Alissa Walker

4 Stars Movies

Purity, Ubiquity & Legibility: Gary Hustwit’s Helvetica

Helvetica (the documentary film) is not about Helvetica (the typeface), per se. Rather, it’s about the arts of graphic design and typography, their practitioners, and how they affect our daily lives.

Each luminary talking head has a different explanation of Helvetica’s appeal and longevity: neutrality, legibility, perfection (unlike more ornate typefaces, it is arguably comprised of the purest state of letterforms and can’t be improved), cleansing renewal (transitioning the tacky design of the 1950s to the bold and to-the-point 60s), problem-solving, soothingness, and just plain beauty. Its detractors see its ubiquity as self-perpetuating, due to designers’ momentum, habit, and bad taste. The enthusiasm of the enthusiasts is infectious, but the movie doesn’t mock them or hold them up as objects of curiosity culled from a nerdy subculture (as does, arguably, The King of Kong).

Thankfully for its subject matter of graphic design, director Gary Hustwit presents a highly polished work full of excellent typography, motion graphics, and editing. This blogger bemoans the tendency of many documentaries (like Spellbound and Wordplay) to use their non-fiction badge as a press pass to excuse grain, sloppy framing, and poor sound.

We’d be lost without Helvetica… literally

I am a mostly self-educated web designer, not properly trailed in the art and/or craft of graphic design. But I know enough to applaud the film for touching upon two of the biggest aspects of typography that every layperson should internalize:

  • Know your terms: Typefaces are designs. Fonts are particular implementations of those designs. There are multiple fonts based on the typeface Helvetica.
  • Arial is a poor Helvetica knock-off commissioned by Microsoft to side-step the expensive licensing fees. It is an abomination, a blight upon this planet earth, and should be summarily deleted from humanity’s hard drives. (q.v. The Scourge of Arial)

Finally, I must note a major disappointment: I rented Helvetica from Netflix, and the disc arrived emblazoned with a “Red Envelope Entertainment” label. Bizarrely, there were no signs of the extensive bonus features promised on the movie’s official website. Has Netflix begun releasing “not-so-special” editions of DVDs omitting the bonus features available on retail editions? I, long relying on Netflix to help keep my DVD shelves from groaning into a black hole of overconsumption, stamp my feet in frustration.

%d bloggers like this: