The New Favicon ➝

Craig Hockenberry, writing on Iconfactory’s weblog:

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.

This is something I’ve tried to implement on Initial Charge in the past, but I hit a brick wall when trying to build the final vector image. I’m not too adept at working with graphics and what I have now is a PNG file that, obviously, doesn’t display in Safari’s pinned tabs.

I had found a few ways to convert my image files to SVG, but none of them resulted in actual vector images — just an SVG file with my bitmap image embedded in it. This time around, though, I might have found a solution. I came across this thread on StackOverflow where a few users have suggested using Potrace. When I get a chance sometime next week, I’ll give it a try.

Previous:
Next: