A brief history of the favicon, from 1999 to today
Favicons might seem like a tiny detail, but their history mirrors many of the big shifts of web technology and design.
Internet Explorer (1999)
Favicons first appeared in 1999 with Internet Explorer 5. Microsoft wanted websites to stand out in the list of bookmarks, so it added support for 16x16 icons in the ICO format. That is how the name "favorites icon", later shortened to "favicon", came about. At first, favicons were only displayed for bookmarked pages. By the early 2000s, Firefox, Opera and Safari were showing them in the address bar and tabs.
The iPhone and the Apple Touch icon (2007)
The first iPhone introduced the Apple Touch icon, letting websites look like apps on the home screen. The icon started at 57x57 pixels, then grew with each new generation of Retina displays up to today's 180x180.
Android (2010)
Android followed Apple and supported home screen icons from 2010. Over time it standardized around 192x192 and 512x512 icons declared in the Web App Manifest, and introduced adaptive icons that fit round or squircle masks.
Windows Metro and browserconfig.xml (2012)
With Windows 8, Microsoft launched the tile-based Metro UI and the browserconfig.xml file to control tile icons and colors. When Internet Explorer was replaced by Edge, this feature faded out.
The Touch Bar and the pinned tab icon (2016)
The MacBook Pro Touch Bar and Safari's pinned tabs came with a monochrome "mask icon". Apple began phasing out the Touch Bar in 2021 and discontinued the last Touch Bar MacBook Pro in 2023; since Safari 12, Safari uses the regular favicon for pinned tabs, so the mask icon lost most of its reason to exist.
The rise of SVG (2017)
SVG favicons are resolution independent, lightweight and support transparency and dark mode. Firefox and Opera adopted them first, Chrome and Edge followed in 2020, and Safari joined in 2025 with version 26. Today the SVG favicon is the main favicon format, backed up by PNG and ICO files for the platforms that lack support.
Keep reading
- What is a favicon?
- Why your site needs a favicon
- Which favicon files do you need? ICO, PNG, SVG and more
Ready to put this into practice? Create your free favicon in a few minutes, then check your website favicon once it is online.