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

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

6 Likes
2

Thanks! A useful tip

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?

4

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

5

Thanks :smile:
www.williamcodywinter.com

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.

—N

1 Like
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).

8

The Apple Developer link is broken. :frowning:

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

Thanks for the tutorial.
Blessings,
—Mark

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


10

fastessaywriter wrote:
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).
www.williamcodywinter.com

Hello,

I’ve been using Sketch as a drawing tool for my website projects. But I cannot find the tutorial how to create custom pinned-tab favicons. Could you please share the Apple Developer library guide? The page suggested by the OP cannot be found. Thanks.