The recent release of Safari 9.0 brought a great new feature: pinned tabs. These tabs are locked to the lefthand side of your tab bar and stay in place, even when you open a new window or relaunch the browser.
The default behavior is to display the first letter of the site’s name on a color from the site’s theme. If you work on a site with a strong branding element, you’ll want to customize the icon on the pinned tab. Anthony Piraino and I have been working on one for the Iconfactory and would like to share some of the things we learned.
Markup
You begin by adding some simple markup for the pin graphic. It’s literally one line of code in the <head> of your HTML:
<link rel="mask-icon" href="/favicon.svg" color="#990000">
The href points to an SVG file and the color is used to draw the vector shape contained in the file (the background color for the tab changes depending on whether the browser window is active and if it’s selected.)
The documentation states that the graphic should be a vector shape filled with black. In our first test, we used a fill color that wasn’t black: the image is used as a mask, so the opacity of a filled shape is the only thing that matters. Any opacity in the shape’s fill color will be used, but we don’t recommend using it (and you’ll see why in just a second.)
We used both Illustrator and Sketch to create SVG files during our tests. In fact, we began this exercise by just exporting our standard logo into SVG; it’s shown to the left.
Seems simple enough, right?
Rendering
And it is, until you upload the file on your site and see your beautiful artwork rendered down into a 16×16 bitmap (or 32×32 on a Retina display.) Our first attempt is shown to the right.
Yuck.
Of course, at such a small size, a hand-tuned bitmap graphic would be a better choice. The ubiquitous favicon.ico has been around since Internet Explorer 5 was introduced in 1999. The ICO file format also supports transparency (it was also used for desktop icons on Windows.) So why not stick with something tried and true?
Our first thought was that the Safari engineers were being lazy: the default implementation renders a vector glyph on top of solid color. Doing the same with SVG could probably reuse a lot of their internal code. But this doesn’t really sound like a path that the Apple we know and love would take…
It’s our guess that the company has other plans for these files. They currently only appear in pinned tabs, but as more sites support this new style of “favicon”, it’s likely that they’ll make their way into lists for browser history or frequently visited sites.
The proliferation of bitmap file formats within the browser may be another motivation. Sometimes the favicon.ico file is used, at other times apple-touch-icon.png appears. With a vector file, there’s a lot more flexibility.
It’s fun to speculate, but for now we have to play the hand we’ve been dealt. How can we improve our vector “favicon”?
Simplify
Our first observation was the amount of detail in our icon was causing most of the rendering issues. As a test, I quickly created a pin icon for a site that has simple but effective branding. It’s also well within the capabilities of a developer who likes to pretend he’s a designer :-)
The result is dfstar.svg; it’s shown to the right. (This little experiment also shows that if you say “DF star” quickly it sounds like “Death Star”. Hmmm…)
We followed suit and moved our factory outside the circle that contained it. Instead of relying on negative space, we took advantage of positive space. The door, which used a thin divider between shapes, was also removed.
Our hunch about the need to simplify branding elements was correct; the result of our second test is shown to the right. We were a lot happier with our factory now.
Earlier, we recommended against using transparency in your vector shapes. The reason for this is that you end up with “muddy” shapes. You only get to choose one color, and without any contrast, the semi-transparent shapes don’t stand out against the primary elements. The heart to the right is drawn on top of a circle with 25% opacity and gets lost in the background color. You also have to remember that this icon appears deselected (where there’s even less contrast.)
Another thing we learned: the size of the canvas you’re working on doesn’t matter. The dfstar.svg graphic was done on a 1000×1000 canvas while our logo was done at 256×256.
We’re used to working with icons, so powers of two are wired into our brains. As you’ll see next, this can be helpful if you’re trying to achieve pixel precision with your vectors.
Align
After complaining commenting about our initial findings on Twitter, our friend John Siracusa offered up his unique approach. He aligned every vector in a grid that emulated a @2x bitmap (in his 382×512 file, each “pixel” is 32×32 in a 12×16 grid.) For his Hypercritical logo, this works quite well. The only downside is that the sharp edges get a little blurry in the @1x image.
Very few branding elements will be lucky enough to get away with this precise alignment. For example, we didn’t want to get rid of the round edges and windows in our logo. But John’s approach did show us the importance of a pixel grid, so our explorations moved in that direction.
The animation to the left shows the progression of changes Anthony made to align the roof and windows of our factory on a 256×256 grid. While we ended up with a shape that’s different than our official logo, it renders a lot more clearly in the space provided.
As you do this with your own work, keep in mind our prediction about these SVG files appearing prominently in other parts of the browser user interface. A graphic that’s heavily optimized for 16×16 pixels could look really bad when Apple decides to use it at 100×100. We’ll be fine if our final graphic (shown to the right) shows up in a browser’s favorite or history lists.
Finally, don’t get obsessed with perfection as you align vectors. There’s still a fraction of a pixel misalignment on the factory door that causes some blurring at 1x resolution. But as much as this bugs us, the graphic is the best it can be. Any attempt to make it “perfect” could easily be undone by a Safari engineer tweaking a number in a software update.
Testing
Of course you’ll want to preview your work as you tune your vectors. Safari caches the SVG files, so it takes a bit of effort to clear the old data and see your changes. Here’s a sequence we found to be reliable:
- Unpin the tab for your site
- Quit Safari
- Remove the Template Icons folder in your Home > Library > Safari folder
- Relaunch Safari
- Refresh a page that references your “mask-icon” to update the cached file
- Pin the tab for your site
(The folder being named Template Icons instead of Tab Icons is another good hint that these graphics are destined for other uses within the browser.)
The cache maintained by Safari is indexed by domain. That means you can’t compare different SVG versions by using two sites at localhost:8001 and localhost:8002. Similarly, we needed to deploy the same SVG file on our design.iconfactory.com and blog.iconfactory.com subdomains as well as our primary iconfactory.com domain.
It’s also worth noting that subdomains open in the same pinned tab. For example, if you pin this site (blog.iconfactory.com), both iconfactory.com and design.iconfactory.com will open in the same tab. A link to different domain, like iconfactoryapps.com, opens outside the pinned tab.
Consistency
We also took this opportunity to make sure our Iconfactory mark was used consistently throughout the browser’s user interface. This meant updating two important files: favicon.ico and apple-touch-icon.png.
Once you’ve pixel-aligned the vectors, it’s simple to render them out into a file with the correct format. In spite of the ICO file extension, all modern browsers now support PNG and GIF file formats for the favicon (Wikipedia has a good overview on how this file is used in different browsers.) Since we wanted support for older browsers on Windows and the ability to have both a @1x (16×16) and @2x (32×32) bitmaps in a single file, we went with the ICO format on our site.
As its name implies, the apple-touch-icon.png was originally introduced on Safari for iOS. Apple’s documentation shows how you can specify different sizes in your markup for different display resolutions. On iOS, the file’s size can range from 60×60 pixels for the original @1x iPhone screen to a @3x 180×180 graphic used on the iPhone 6S Plus.
But don’t let that name fool you, this file also gets used in places that aren’t “Apple” or “touch”. For example, Safari on OS X uses this file in the frequently visited sites list. A 48×48 points version is displayed when you click in the address bar to enter a search or a URL. Rounded corners are also added to the image, but they’re not a squircle. Don’t use your own transparency in these images!
Chrome running on Android can also use the file. The required sizes quickly get out of hand when you try to support every possible display size and resolution on that mobile platform.
For this reason, we suggest picking a reasonably sized image and let the browser scale it down to the size that’s appropriate. We chose a 180×180 pixel image for our icon.
Here’s a before and after shot of our files:
The two icons on the left show the favicon.ico bitmaps at 200%. The apple-touch-icon.png is shown to the right at 100%.
Conclusion
So there you have it. Even in this brave new world of vector favicons, knowing how to push pixels is still important for making your brand stand out.
It may seem a little crazy to go to these lengths, but it’s our business to make products look the best they can. We hope the experiences shared above help you with your own work. And if you need a little help, don’t hesitate to get in contact.
