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!
