Translate

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