RW Tip: Adding a favicon for Safari’s new pinned tabs

(Elliot Jackson) #1

Hey folks,

Safari 9.0, coming in the El Capitan release, will introduce pinned tabs which will support a custom pinned-tab favicon. Example:

You can find the full docs for creating them here. If you want to add one to your RW project you can do so very easily as RW supports SVGs. Here’s how:

  1. Create your favicon. As the docs say, it should be a full-black on transparent SVG. I’d recommend Sketch as a vector drawing tool, you can get a free trial for it here.

  2. Drag it into the resources area in RW.

  3. Go to the site-wide code area in your project settings and within the “Head:” section paste the following:

<link rel="mask-icon" href="%resource(website_icon.svg)%" color="#000000">

website_icon.svg should be changed to whatever you named your SVG. See the docs for info about changing it’s colour.

And that’s it :smile:

Have a good evening/day.

(Peter Danckwerts) #2

Thanks! A useful tip

(William Cody Winter) #3

It doesn’t seem to work for me, not sure what I’ve done wrong.
But here is the code I used:

<link rel="mask-icon" href="%resource(sitePin.svg)%" color="#1CA9FD">

I put the code into Code -> Head and the file is in resources with the right file name.
Any ideas please?

(Nik Fletcher) #4

A live site link would be the easiest way to look into this…

(William Cody Winter) #5

Thanks :smile:

(Nik Fletcher) #6

Just visited the site, and it appears just fine in Safari with a blue highlight. Might be worth resetting Safari (Clear Caches etc) and give it another try.


(William Cody Winter) #7

Well, what it seemed to be using was a generic blue icon with a W in the middle (maybe taking first letter of my domain name).
But I figured out what was wrong, not only does the SVG image have to use black pixels but the image also has to be square (i.e. 1:1).

(Mark Spaulding) #8

The Apple Developer link is broken. :frowning:

Can;t seem to get it to work on my site.

Thanks for the tutorial.

(Anne Bourdon) #9

it works but I obtain a black rectangle with very small points (the stars). I think you have the good technique but the svg image is not good for a pinned tab