The Breakroom

Favicons. Finally.

June 7, 2018

By Craig Hockenberry

If you’re one of those people that got excited by Safari screenshots in macOS Mojave sporting favicons in tabs, we’ve got some good news: you can have them right now in the Safari Technology Preview. And you don’t even have to pronounce it fav-ah-con.

But there’s more to the new feature than you might think. Take a look at what appears on the Iconfactory home page in the latest Chrome and the Safari releases:

Why are the icons different? The answer lies in this one line of page markup:

<link rel="mask-icon" href="/favicon.svg" color="#990000">

We keep a favicon.ico file in the root of the website filesystem for compatibility with browsers that don’t support vector icons. But Safari knows that SVG will look better on a high resolution display, so it checks for a favicon.svg first.

Since favicons are an important branding element for a website, you’ll want to learn more about how this new format works. All the details are in our extensive tutorial. Enjoy!