Adding a Pinned Tab icon for Safari

With the release of Mac OS X 10.11, Safari finally got pinned tabs. While all other browsers use a site’s favicon for the pinned tab, Apple deemed that “not esthetically pleasing enough” and created a new type of icon for it, which they call a “mask-icon”. By default, they’ll use the first letter of your domain if you don’t have such an image. You need a black SVG image, a hover color and some time to do a tiny bit of coding.

Should you do this? Yes. Of course. Anywhere where you can control the branding of your site, where you can make it easier for people to recognize you, you should. Just compare our nice logo to the bland “Y” in the image below:

The required SVG image

Per the guidelines, the image needs to be a square SVG image, with a transparent (or simply: no) background, and all vectors 100% black. I had to try a few times before I got it working due to having some leftover (empty) vectors in there that weren’t set to black. You also need to determine which color you want to use on hover and for the active state of the pinned tab.

The mask-icon line of code needed

The line for the mask-icon is simple:

[code lang=”html”]<link rel=’mask-icon’ href=’dutch.svg’ color=’orange’>[/code]

Just add it in your site’s head section. The color can be a text value, but also a hex or RGB value. In our case we use a hex value.

Busting the mask-icon cache

If you’re running into trouble and it seems as though Safari isn’t picking up your new code, you just might be right. Hitting the Empty Caches menu item in the Develop menu won’t fix it. Instead, delete the contents of the following folder:

~/Library/Safari/Template Icons

And re-start Safari. That should fix it.

Don’t use the old syntax

When this feature was first introduced in the beta versions of Safari in OS X 10.11, the syntax was slightly different, using two template tags instead of one:

[code lang=”html”]<link rel="icon" sizes="any" mask href="mask-icon.svg">
<meta name="theme-color" content="#FFDD00">[/code]

This syntax caused trouble for sites as it was valid favicon syntax, so other browsers would try to use this SVG as a favicon, which is why Apple changed it in later versions. Be sure not to use this old syntax and replace it with the right one above.

How to do this in WordPress

WordPress 4.3 introduced (I think you could say “finally”), functionality to easily set a favicon for your site. As I like my head section clean, I wanted to add my mask-icon line to that line of code. This bit of code does just that:

[code lang=”php”]
/**
* Adds a pinned tabs icon
*
* @param $meta_tags
*
* @return array
*/
function yst_site_icons( $meta_tags ) {
// Mask icon for Safari pinned tabs
$meta_tags[] = "<link rel=’mask-icon’ color=’#a4286a’ href=’" . get_template_directory_uri() . "/images/yoast-logo-icon-black.svg’>";

return $meta_tags;
}
add_filter( ‘site_icon_meta_tags’, ‘yst_site_icons’ );
[/code]

Good luck on implementing this on your site!