Pinned tab icons in Safari for El Capitan

With the release of Apple’s OS X 10.11 El Capitan, Safari has introduced a new feature called Pinned Tabs. Browser tabs can be pinned to the left side of the tab bar, reduced in size, and displaying either an auto-generated icon (using the first letter of the domain and a color from the webpage) or a custom icon.

The custom icon is comprised of a square SVG image made of 100% black vectors with a transparent background and a color attribute. Simply add the following line of HTML to the <head> section of your webpage:

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

Copy the image into your project and update the filename and color attribute in the above code. The color attribute can be a hexadecimal value (#0000FF), an RGB value (rgb(0, 0, 255)) or a recognized keyword — such as red, green or blue.

The icon is cached by Safari and refreshing it when making changes can be difficult. Here are two methods that update the icon:

  • Unpin the tab and clear all history.
  • Unpin the tab, delete the folder ~/Library/Safari/Template Icons and restart Safari.

Other browsers have implemented pinned tabs but their implementations use the standard favicon image. Apple decided to introduce another image to control the aesthetic.