What is a favicon
A favicon is a small icon representing a website, typically displayed in web browser tabs.
In the image above, the favicon appears to the left of the webpage title. It serves as a visual logo, helping visitors quickly recognize and remember the website as a distinct brand, especially when browsing multiple tabs.
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. However, modern favicons have evolved significantly in both usage and technical complexity.
Favicon Usage
Favicons appear in several places.
Tabs and Bookmarks
As mentioned, the most common and well-known use of the favicon is in web browser tabs.
Favicons can also be found in bookmarks.
More generally, browsers use favicons wherever quick website identification is helpful. For example, Android Chrome can display multiple tabs simultaneously with page thumbnails to let users quickly choose among them, displaying favicons for easy recognition.
In addition, Firefox on Android uses favicons in the navigation history to help users quickly spot the entry they are looking for.
Depending on the browser and platform, favicons appear in various places, and browser developers may find new uses, further expanding their presence.
These uses require rather small icons. Although low-resolution icons are often sufficient, the reality is more complex.
Home Screen
Most browsers allow users to create home screen shortcuts to websites, sometimes called "Add to home screen." Clicking this shortcut opens the browser and takes the user directly to the saved page.
Though this feature is often associated with mobile platforms, desktop browsers also support it.
Home screen links can even resemble native apps by showing a splash screen and removing the browser’s navigation bar.
Search Engine Results Pages
Search engines crawl website favicons and display them on search engine results pages (SERPs). For example, in Google:
Bing and DuckDuckGo use a similar approach.
In this role, the favicon becomes an important part of a website’s branding. Its design, color, and recognizability can contribute to a click in a SERP.
These are just some of the use cases for favicons. You can cover them all by using RealFaviconGenerator to generate your favicon. You may also wonder why it’s important to address them.
Technical Aspects of a Favicon
When favicons were first created, they consisted of a single favicon.ico file located in a website’s root folder. This single file could have sufficed, but the modern "favicon" is actually composed of multiple icons for several reasons.
A Set of Icons...
Sometimes, the favicon appears small, as in browser tabs. But it can also appear larger, such as when added to a home screen shortcut. Using the same icon in different sizes is practical.
Favicons are also influenced by platform-specific requirements. iOS expects an icon named "Apple Touch Icon," while Android Chrome relies on the Web App Manifest. Of the files RealFaviconGenerator creates when generating a favicon, about a third are vendor-specific, while the rest follow standardized practices.
Beyond icon size, some platforms come with design guidelines. Desktop browsers support transparent icons that reveal the color of the underlying tab, whereas Apple requires the Touch icon to be opaque. Windows 8’s Metro style promoted icons as white silhouettes to match its design.
For these reasons, RealFaviconGenerator generates about six icons.
... and Markups
The classic favicon.ico and the Apple Touch Icon can both be found by convention, based on their names and locations in the root folder. Most icons, however, need to be explicitly declared depending on the situation.
These declarations are HTML markups placed in the head section of each webpage.
A typical favicon markup looks like this:
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
In addition to the icon URL, it specifies its type (image/png in this example) and size (96x96).
Other Files
Most of what we call a "favicon" consists of markups and icons. However, there are also manifest files, which are referenced in HTML markup and then declare the icons, along with a few metadata. Today, the only manifest file typically needed is the Web App Manifest.
You can learn more about the actual files and markups of favicons, or you can simply create your favicon right.
Conclusion
In summary, favicons serve a variety of purposes, appearing in browser tabs, bookmarks, home screens, and search engine results pages. Each of these placements enhances the user’s ability to recognize and navigate to your site.
To meet the demands of different devices and platforms, a modern favicon is composed of multiple icons in various sizes, along with markup that helps browsers display the right icon in the right context. RealFaviconGenerator makes it easy to create a complete favicon set, ensuring that your site’s icon appears wherever it’s needed.