Some websites like nytimes.com, twitter.com, cnn.com already have an icon when pinned to the top. According to “What's new in Safari 9” this code should be added in order to provide a custom icon:
<link rel="icon" sizes="any" mask href="website_icon.svg">
<meta name="theme-color" content="red">That's what I did on our website (obdev.at) but Safari seems to ignore it. Anything I'm missing here? Or is there no support for third-party websites yet?
The markup changed in Developer Seed 3 and Public Beta 1 to simplify and have better backwards compatibility. Use the following markup instead:
<link rel="mask-icon" href="website_icon.svg" color="red">Hi,
I have created an icon, but it won't show up.
I have addded this.
<link rel="mask-icon" sizes="any" href="/wp-content/themes/mindig-child/images/pinTabSafari.svg" color="#FFCC04">
Thanks for your time.
Greetings,
Robin
You have to watch you svg format:
- Only one pfad
- Viewbox must set to 16 x 16 -> viewBox="0 0 16 16"
Working example:
Pin: http://gradwerk.de
-> the svg:
http://gradwerk.de/upload/img/gradwerk_logo.svg
If you testing the images, you have to delete -> Library -> Safari -> Templates Icon Folder and restart Safari
Then Pin your Page, and wait an moment.
You find also an CacheSettings.plist file in the folder, Apple made some icons for the starting phase: f.e. spiegel.de (with the wrong red color)
Try purging the pinned-tab icon cache: https://www.perpetual-beta.org/weblog/managing-safari-9s-pinned-tab-cache.html
