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




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.





siivel.com 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:
http://image.online-convert.com/convert-to-svg

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 (@siivel.com)

Modder | Producer | Blogger | Youtuber 

Email: siiveldotcom@gmail.com