Creating Favicons for Pinned Tabs in Safari 9

Like most other crazy people, I installed MacOS X El Capitan on launch day. One of the first things I did was pop open Safari to take it for a spin. I’m a big fan of Firefox but I love testing out browsers and their Dev Tools. One new feature that I was excited to see finally make it to Safari was pinned tabs. Pinned tabs allow you to keep tabs open indefinitely, pinning them to the tab bar. This has long been a feature of both Chrome and Firefox. After using Safari 9 for a bit, and pinning a few tabs, I noticed that instead of seeing the favicon I was accustomed to, I saw a letter / color combination to represent the site. Obviously, that wouldn’t do. So, after a bit of research, I found the solution in the Mac Developer Library for Safari 9.

Directly from the Mac Developers Documentation:

Icons for Pinned Tabs

Pinned sites allow your users to keep their favorite websites open, running, and easily accessible.

You can set the pinned tab icon for your site by providing a vector image. Use an SVG image with a transparent background and 100% black for all vectors. Add the following markup to all your pinnable webpages, replacing “website_icon” with your own file’s name:

<link rel="mask-icon" href="website_icon.svg" color="red">

In the example, the color attribute sets the display color of the image. That attribute can specify a single color with a hexadecimal value (#990000), an RGB value (rgb(153, 0, 0)), or a recognized color-keyword, such as: red, lime, or navy.

Note: Adjust your artwork as needed for the best presentation in the color you’ve specified. The pinned tab icon will not accept additional colors. You can improve the visibility of your icon by avoiding a light color, such as white, bright yellow, or light gray.

In the image below, you can see the before and after of the pinned tab. The before is simply a red “I” while the after is the logo in red.

Safari Pinned Tabs Favicon SVG


Safari 9.0 - Mac Developer Library

⇠ Next Article Previous Article ⇢

About The Author

G. Brad Hopkins's avatar
  • G. Brad Hopkins
  • About Me: I bought my first computer - an Apple Performa 6320 - when I was in college and have been building websites ever since. These days I spend most of my time writing code and helping to bring interesting projects to life.
  • @gbradhopkins