A brief history of favicon

Favicons might seem like a tiny detail, but their history is actually pretty interesting, and it mirrors a lot of the big shifts we've seen in web tech and design. They started as little bookmarks icons, but today, they’re scaled up to look good on any device. From their humble beginnings in Internet Explorer to their modern versions as high-res, adaptive icons, favicons have come a long way.

Favicon’s Beginnings with Internet Explorer (1999)

Favicons first appeared in 1999 with Internet Explorer 5. Microsoft wanted to help websites stand out in bookmark lists, so they added support for tiny 16x16 pixel icons in the .ico format. That’s how they got the name “favorites icon,” later shortened to “favicon.” If you bookmarked a site, it would show up with its own little icon next to the site name—handy for visually picking out your favorite sites.

At first, favicons only appeared when you bookmarked a site, so it was more of a reward for regular visitors. But as other browsers caught on, they realized favicons could also work as quick visual IDs, not just for bookmarks but for every website. By the early 2000s, browsers like Firefox, Opera, and Safari supported favicons directly in the address bar, making them visible anytime someone visited the site. This shift made favicons a basic part of website identity.

With favicons now showing up in bookmarks, address bars, and even browser tabs, they quickly became essential for website branding. Users grew to expect them everywhere online.

The iPhone and the Apple Touch Icon (2007)

When Apple released the first iPhone in 2007, they introduced the Apple Touch Icon, making websites feel more like apps. When users saved a webpage on their home screen, this icon showed up like an app icon. This moved favicons out of the browser and onto mobile home screens, giving them a whole new level of visibility.

Initially, the Apple Touch Icon was 57x57 pixels, matching the iPhone’s home screen. But as Apple rolled out devices with higher-res displays, they upped the recommended icon sizes to keep things looking crisp. Now, 180x180 pixels is the standard for Apple devices. This introduced the idea of responsive icons and hinted at the mobile-first world we were heading toward. Suddenly, favicons were becoming must-haves on home screens.

Android’s Adaptation (2010)

With the rise of smartphones, Android took Apple's lead and started supporting home screen icons in 2010. Android’s take on these icons wasn’t as strict as Apple’s—developers could set various resolutions and formats, leading to a lot of variation early on. But as screen resolutions improved, Android also started recommending high-res icons to keep things sharp across devices.

Android eventually standardized around 192x192 and 512x512 icons, and introduced "adaptive icons" that automatically fit different shapes, like round or square. This helped give Android’s home screen a cleaner look, with icons adapting to different devices while still showing unique branding.

Windows Metro UI and browserconfig.xml (2012)

In 2012, Microsoft rolled out Windows 8 with the Metro UI, a tile-based interface that let users pin sites directly to their Start screen. To give sites control over how they looked on Start tiles, Microsoft introduced the browserconfig.xml file. This let developers specify icons and customize tile colors, backgrounds, and even logo positioning.

With options for multiple icon sizes and layouts, browserconfig.xml helped make websites look consistent in Metro’s tile-based layout. Windows 10 continued to support it, but since Microsoft dropped Internet Explorer for Edge, this feature faded out. Edge doesn’t use browserconfig.xml, so now favicons on Windows mostly follow standard web practices.

The MacBook Touch Bar and the Pinned Tab Icon (2016)

When Apple introduced the MacBook Pro with a Touch Bar in 2016, they added support for favicons there too. Safari also got an update with a specific type of favicon called the Pinned Tab Icon, which was monochrome and designed to stand out on both the Touch Bar and Safari’s pinned tabs.

Pinned Tab Icons took a different approach to favicon design. Apple asked developers to make these icons single-color so they’d fit better with different themes. But in 2021, Apple started phasing out the Touch Bar from MacBooks, so the Pinned Tab Icon’s future is unclear.

The Rise of the SVG Favicon (2017)

In 2017, the SVG (Scalable Vector Graphics) favicon changed the game. Unlike older formats like .ico or .png, SVGs are resolution-independent, meaning they scale smoothly to any size without losing quality. This was huge for modern screens with high pixel densities, making SVG ideal for everything from smartphones to big desktop monitors.

SVG favicons can be scaled dynamically, support transparency, and are lightweight. This format lets developers use just one icon that can adapt to different display requirements. Firefox and Opera were the first to support SVG favicons, and Chrome and Edge followed, making SVGs a solid new standard. However, not all platforms support SVG favicons, so many sites still offer .png or .ico as backups.

Today, the SVG favicon is a flexible, scalable solution for modern web design. It’s a big step forward, allowing one icon to work everywhere without needing different files for each size.

Conclusion

From a tiny image in bookmarks to a versatile icon used across devices, favicons have evolved alongside the web itself. They've adapted to new tech and become a core part of website identity. As we continue to develop for a multi-platform world, favicons will keep playing an important role in how users recognize and engage with websites.

As the favicon gained more importance and functions, it also became more complex. This is why it's recommended to create the favicon with a dedicated tool rather than crafting it manually.