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
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 Iconsand 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.