How to make your websites “Safari pin-ready” in 5m or less

Ever close Gmail or Spotify accidentally? Wish you could keep them open? The new pinning feature is for you. It’s pretty simple to use, just drag your tab left and it will turn into a “pin” and the web-app will stay open in the background for you.

Safari.Pin.Favicon

But there is a minor issue that will require website developers to update their sites to make it SUPER useful.

If the web developer hasn’t specified a special “favicon-like” SVG file it will just use the site’s initials. This can be a problem if you have pinned, oh I don’t know, 3 sites that start with the letter J and one that starts with the letter G as I have. It would have been nice if they just let us use favicons as our pin icons, but then of course they run into the grayscale thing and Apple is all about keeping it clean. Long term it will probably be a good thing if EVERY site has an SVG icon that browsers can use to do smart things with… but short-term it’s *slightly* less cool than it would have been without it.

How to specify a Favicon for Safari Pins

Fortunately, it’s a really easy fix. If you work in website development, here’s how to specify what your pin icon looks like in Safari:

  1. Make a monochromatic SVG file. Think about it like a font or a mask, it can’t have multiple colors or tricky layers. It’s just going to look at it and say “is something there or not”. If something is there itwill be colored, if not itwon’t be. Size of SVG doesn’t matter, it’s vector, so it’s magically “as big or as small as it needs to be. Color doesn’t matter either, Safari is just using it as a mask.
    Screen Shot 2015-10-06 at 4.44.07 PM

    You only get to specify a silhouette and one color.

  2. Save it.
  3. Reference it in your header, just like you would a favicon:

<link rel=”mask-icon” href=”assets/favicon/favicon.svg” color=”#C22DFF”>

A couple of notes and debugging tips:

Safari caches these pin webicons, so if it’s not showing up, try deleting everything in this folder and restarting Safari:

~/Library/Safari/Template Icons

Also, Safari only uses the pinned icons for files served through a web server (localhost), not files (file:///).