Patrick Bougie — web developer / entrepreneur from Montréal, Canada. Founder of WorkSked — a web app to manage employee work schedules and time off.

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.

Feel free to contact me if you require development services or have any questions / comments.