Apple’s Safari browser that ships with macOS Mojave revives support for favicons. And thanks to iOS 12, favicons in open tabs are available on iPhone and iPad for the first time ever.
Developers typically provide a favicon to their website for branding purposes.
- Favicons are tiny website icons.
- They’ve made a comeback in desktop Safari on macOS Mojave 10.14.
- Favicons are available for the first time on iPhone and iPad on iOS 12.
- Safari uses favicons to represent websites graphically in bookmarks, tabs, etc.
- On iPhone, favicons in open tabs show up only in landscape mode.
Everyone likes favicons
Google Chrome and Mozilla Firefox have long supported favicons. Microsoft’s Internet Explorer was the first major web browser to implement favicon support as far back as 1999.
Safari for Mac used to show website icons in tabs, but support stopped with 2015’s OS X El Capitan. Safari for iOS devices has never supported favicons up until iOS 12.
With macOS Mojave and iOS 12, customers can enjoy favicons in:
- Safari for iPhone and iPod touch in landscape mode
- Safari for iPad in any orientation
- Safari for Mac
Here’s what favicons look like.
For people who have many open tabs, favicons in Safari help distinguish between them visually.
And as Daring Fireball’s John Gruber put it succinctly, some folks may actually prefer seeing these website icons even if they don’t have a ton of tabs open, simply because it makes more sense to them to identify open tabs graphically rather than by the text of the page title.
Favicons support requires Safari 12 for iPhone, iPad or iPod touch that ships as part of the iOS 12 software update. On macOS, favicons work in Mojave’s Safari 12.
How to enable favicons in Safari
Off by default, this feature must be toggled on manually, separately on each device.
iPhone and iPad
1) Open the Settings app on your iOS 12 device or newer.
2) Choose Safari from the list.
3) Slide the button labeled Show Icons in Tabs to the ON position.
You can now visually navigate open websites by the icon inside their corresponding tabs.
Something to keep in mind before you wonder why the heck you’re not seeing any favicons in portrait orientation: Safari’s tab bar on iPhone shows up in landscape mode only.
Safari on iPad with favicon support enabled
Safari on iPad, without website ions in open tabs
Follow along for the Mac instructions.
1) Open Safari on your Mac computer with macOS Mojave or newer.
2) Click the Safari menu, then select Preferences.
3) Click the tab labeled Tabs.
4) Tick the box next to “Show website icons in tabs”.
Now you can identify all your open websites with a quick glance at Safari’s tab bar.
Favicon are especially useful if you use Safari’s pinning feature that lets you affix websites so they stay put on the left side of your tab bar where you can easily get to them at any time.
Favicons on older Safari versions
Favicons require Safari 12 or newer.
Older macOS editions support favicons up to OS X Yosemite. OS X El Capitan, macOS Sierra and macOS High Sierra do not support favicons out of the box while Safari for iOS has never supported favicons in tabs before iOS 12.
To enable favicon support on an older macOS system, you can download Safari 12 for macOS High Sierra 10.13.6 or Safari 12 for macOS Sierra 10.12.6. Alternatively, grab a special developer version of Safari, called Safari Technology Preview, that supports favicons and gives you an early look at upcoming web technologies in macOS and iOS.
Lastly, specialized third-party apps may enable favicon support on older Safari versions.
One such app, Faviconographer, adorns your open tabs with website icons but it’s more of a hack than an officially sanctioned solution. As noted in our Faviconographer announcement article and tutorial, given the app’s heavy dependency on polling Safari to locate your open tabs, Faviconographer may stop working at any time.
Need help? Ask iDB!
If you like this how-to, pass it along to your support folks and leave a comment below.
Got stuck? Not sure how to do certain things on your Apple device? Let us know via [email protected] and a future tutorial might provide a solution.
Submit your own how-to suggestions via [email protected].