Pinned Tabs in Safari 9

Safari 9.0 shipped last week with the release of El Capitan. This version is largely a feature release – last year Safari got it’s root canal, now it’s time for a cleaning.

By far, the most talked about component of Safari 9 was the content blocking extensions it brought to iOS. Although this is big news, there are plenty of other features tucked away in the release notes. In no particular order, Safari added:

• a Force Touch Trackpad Events API
• Airplay of HTML5 media to your Apple TV
• a SFSafariViewController to replace the troubled UIWebView
• CSS Scroll Snapping
• CSS Backdrop filters ¹
• a redesign of the Web Inspector
  • including Responsive Design Mode
• ECMAScript 6 enhancements
• support for the use of system fonts in CSS
• support for a handful of CSS4 selectors
• “pinned tab” support

Of these, pinned tabs is the most user-facing feature, and it adds some additional markup. This is something Firefox and Chrome have had for awhile now, and it comes to Safari with a few idiosyncrasies you will want to familiarize yourself with.

The Gist

Pinned tabs in Safari work similarly to Chrome or Firefox. Open up a tab in Safari, pin it to your tab bar, and it will remain active in the background. This is most useful for sites that you routinely visit, and would rather keep open and running on the left side of your tab bar. There is currently no shortcut for this functionality, but you can command-click your tab and choose “Pin Tab” or accomplish this via Window → Pin Tab.

Once a tab is pinned, you cannot close it. Go ahead, give it a try. Nope, ⌘W just takes you to the first un-pinned tab. Ixnay on File → Close Window as well, that might close the window, but open up another window and you’ll see you didn’t get very far. Well what about ⌘Q? Surely if I quit the damn application all these pinned things are gone. Negative, now this is just getting annoying.

The only way to close a tab, once pinned, is to un-pin it. You can accomplish this via command-click, or venture back to Window → Unpin Tab.

The Implementation

On Chrome and Firefox, the pinned tabs use the websites favicon as its placeholder image in their respective tab bars. But this is Apple, and similar to the Web Clip icon, they want you to add another link tag to your page header.

Without the additional markup, your site’s icon will appear as a square with the first letter of your domain capitialized. Safari does choose a color from your site as the background for this square, but it is still worth changing. ²

The format for the markup looks like the following:

<link rel="mask-icon" href="website_icon.svg" color="red">

The image in question must be a 100% black vector image with a transparent background. Safari is pretty strict on this, try and use a color other than black, and you’ll be stuck with the default image. You can change the color of the non-transparent part of your SVG using the color attribute. It will take a hex value, RGB value, or a recognized color-keyword, such as black.

If you’re on a Mac and you need a good application for creating SVG images, take a look at Sketch 3. Don’t let the price fool you, it’s very fair for the application you’re getting. And there is a trial on their website.

Safari does keep a cache of all the mask-icon images it comes across in ~/Library/Safari/Template Icons. If you notice that your icon isn’t updating while you’re testing it, you might want to delete the contents of that folder and restart Safari.

That’s it! Drop that SVG in your root directory, add that tag to your page, and stare in awe at the amount of WebKit-specific tags in your header.