Wednesday, November 11, 2015

How to Add a Safari Pinned Tab Icon for Your Site?

Making Pinned Tab Icons
Pinned Tab for Safari

Pinned Tab is a new feature of Safari for Mac OSX El Capitan. For those sites which support Pinned Tab, after one pins the site, a small icon will be shown up at Pinned Tab, otherwise, the first letter will be chosen in lieu of an icon. Therefore, making a Pinned Tab icon outstands your site from others.

Pinned Tab Icon for Safari is Now Pin Tab Supported

We have update our site by adding a Safari Pinned Tab Icon. It is easy.

(1) Made a monochromatic .gif file. For my site's icon, I merely use a black 100x100 pixel gif icon.

(2) Change the .gif icon into .svg file and save it. I do the conversion here:

And then I save it as img.svg in my web-site server.

(3) Add the following link into the "header" of the site:

<header><link rel=”mask-icon” href=”img.svg” color=”Black”></header>

Remarks: (1) "img.svg" is the file name of my image. You might change the link's .svg name in line with your own image; (2) In my case, the colour of the icon is default as "Black", you might however decide your icon's colour yourself.

(4) Restart Safari and finished.

Written by: Erik Siivel (
Modder | Producer | Blogger | Youtuber