What is a favicon?
A favicon is a small icon representing a website, typically displayed in web browser tabs.
The favicon sits to the left of the page title. It serves as a visual logo, helping visitors quickly recognize and remember the website as a distinct brand, especially when browsing many tabs at once.
Technically, the favicon originated as a file named favicon.ico stored in the root directory of a website. Browsers followed this convention to locate it directly. Modern favicons have evolved significantly in both usage and technical complexity, though.
Favicon usage
Tabs and bookmarks
The best known use of the favicon is in browser tabs. Favicons can also be found in bookmarks and, more generally, wherever a browser needs to help you identify a website at a glance: the tab switcher of Android Chrome, the navigation history of Firefox on Android, the new tab page...
These uses require rather small icons. Low-resolution icons are often sufficient, but the reality is more complex.
Home screen
Most browsers let users create a shortcut to a website on their home screen ("Add to home screen"). Tapping the shortcut opens the browser on the saved page. Although this feature is mostly associated with mobile platforms, desktop browsers support it, too.
Home screen links can even behave like native apps: a splash screen is displayed while loading and the browser navigation bar is hidden.
Search engine result pages
Search engines crawl the favicon of websites and show it next to the result in their result pages. Google, Bing and DuckDuckGo all do it. In this role the favicon becomes an important part of your branding: its design, color and recognizability can contribute to a click.
Technical aspects
A set of icons...
Sometimes the favicon is tiny, as in a browser tab. Sometimes it is displayed larger, as when it is added to a home screen. Platforms also come with their own requirements: iOS expects an icon named "Apple Touch icon", Android Chrome relies on the Web App Manifest, desktop browsers support transparent icons while Apple requires the touch icon to be opaque.
For these reasons, EasyFaviconGenerator creates about half a dozen files for a complete favicon.
... and markups
The classic favicon.ico and the Apple Touch icon can be found by convention, based on their name and location. Most icons, however, must be explicitly declared in the head section of each page. A typical declaration looks like this:
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />In addition to the icon URL, it specifies the type (image/png) and the size of the picture.
Other files
Besides icons and markups, there are manifest files. They are referenced in the HTML and declare icons along with a few metadata. Today, the only manifest file typically needed is the Web App Manifest (site.webmanifest).
Keep reading
- Why your site needs a favicon
- Which favicon files do you need? ICO, PNG, SVG and more
- A brief history of the favicon, from 1999 to today
Ready to put this into practice? Create your free favicon in a few minutes, then check your website favicon once it is online.