Safari 9 Not Showing SVG Pinned Tab Icon

svg safari osx-elcapitan
Nick picture Nick · Sep 30, 2015 · Viewed 7.1k times · Source

I created a new pinned-tab icon for Safari 9 on El Capitan as documented by Apple here but I can't seem to get Safari to actually show it when I pin my tab.

Here's the line in my header:

<link rel="mask-icon" href="https://towatchlist.com/img/twl.svg" color="red">

Safari does show the image just fine when I follow the link to the SVG file, but the pinned tab icon still shows the auto-generated letter image even after reloads and pin/unpin etc.

I tried opening up GitHub's SVG (which is working) and copying the general markup there but that didn't fix things either. I also poked through the Safari console briefly but didn't see it even attempting to land the SVG file.

Any suggestions on how to even debug this or ideas on what is going wrong?

Answer

Shaun Inman picture Shaun Inman · Sep 30, 2015

Looks like Safari is aggressively caching (even the absence of) these icons. Found the answer over on Super User:

Delete the contents of the following folder:

~/Library/Safari/Template Icons

And then restart Safari.

Related questions

SVG Linear gradient doesn't work in Safari

I've got an SVG object that contains a linear gradient embedded directly in a document. It works fine in Chrome and Firefox, but in Safari nothing is rendered. If I create the SVG as a file and embed it using …

Read More
SVG viewbox height issue on ios Safari

I have noticed a strange thing on ios when using svg. The svgs seem to work fine in all other browsers, but on Safari ipad/iphone the viewbox has some weird space at the top and bottom of the svg. …

Read More
SVG changes color when rotated in Safari 10

I've just run into a very weird problem that only shows up in Safari 10. I have playing cards, svg images, that are sometimes rotated using transform:rotate(xdeg). The card I'm using has a red block pattern. When it's not …

Read More