Making your website a first class Safari citizen

Anyone can build a website thanks to great resources like Squarespace. And, if the website is responsive and written with any decent framework, it’ll behave nicely on macOS and iOS. Safari will use the Title and Favicon tag to create a nice bookmark, it’ll pickup on the specified RSS feed and, if the site has any article content, it’ll show the Reader View option.

But, with a few extra additions to your site’s , it can become a first class iOS and macOS citizen.

iOS WebClip

Way before native iOS apps, Apple allowed you to add web apps, or regular websites to the Homescreen of iOS. Via a specific meta tag you can add a custom icon to your site. The easiest way is one simple 512px image, but you can add specific sizes for every screen size if you want to. Sadly, vector images are not supported.

And, if your site has a very long title you can add a shorter custom title for WebClips. The maximum amount of characters shown on the iOS Homescreen without being shortened with ellipsis is around 11 characters.

Pinned Tab

Newly added in El Capitan, you can pin a site in Safari to the left of the Tab bar, making it easily accessible all the time. These pinned sites get a custom icon that’s highlight when active and is specified with a specific tag.

There’s a few rules:

  • The icon has to be an svg with a single layer and a <0,0,16,16> viewport.
  • The icon should be #000 black filled with no other styles.
  • The icon is always displayed in one color specified in the tag.

There’s also this great article by Iconfactory describing their flow.

Touch Bar

By default the MacBook Pro’s Touch Bar displays the default favicon for Bookmarked websites. But, as a free bonus, every site that has the pinned tab icon defined, gets a nice icon in the Touch Bar consisted of their icon in white surrounded by the specified color.

Testing and developing the icon is a bit difficult since Safari caches this icons rather strongly. You can however clear the cache by quitting Safari and executing these two Terminal commands:

rm -rf ~/Library/Safari/Template Icons
rm -rf ~/Library/Safari/Touch Icons Cache