Be prepared for Safari 9 with pinned tab icon

One of the new features of upcoming Safari 9 on OS X El Capitan is option to pin tab to the left side of tab bar.

What’s the deal?

Unlike normal tabs, they take less place and they reload almost immediately. And if you click any link on pinned webpage it will open this link on a a new tab.

So how you differentiate pinned tabs?
Safari will automatically setup nice icon for you with first letter of your website.

 What if you want your own icon?

Create svg with transparent background and black vectors. Then add this one line to head:

<link rel="mask-icon" href="img/mask-icon.svg" color="#2c3e50">

The color=""thing is the color for highlighting your icon.

 
1
Kudos
 
1
Kudos

Now read this

Only Apple

John Gruber on Monday, 28 November 2016 Also, this problem is not new at Apple. There are certainly growing pains with regard to Apple’s enormous size today. The iPhone’s extraordinary success creates a sort of gravity that has warped... Continue →