What are favicons?
Favicons are the small icons that you see in the browser next to the website title. Take a look at the picture - surely the icon was enough for you to recognize the website, right?
The name Favicon is an abbreviation for "Favorite Icon" and was originally designed to be displayed in your favorites or bookmark lists. Microsoft displayed such an icon for the first time in Internet Explorer 5 in 1999.1
Uses and benefits
Although the name Favicon suggests that it is only intended for favorites, it is actually displayed for all websites in the browser - regardless of whether they are marked as favorites or not.
The main purpose of a favicon is to increase the recognizability of a website. Imagine if you only had text without icons in your browser tabs - navigating would be much more tedious! With the favicon, the user can quickly find the desired page and immediately recognize which website it is. This also reinforces the branding of your website.
JavaScript can also be used to dynamically change the favicon, for example to indicate new messages.
Favicons on different platforms
Initially intended for PCs, further requirements for favicons have emerged over time in order to support integration for mobile devices and progressive web apps (PWAs). For a PWA, for example, the correspondingly defined favicon is used as an app icon. Depending on the platform, there are different requirements in terms of format and resolution. Separate favicons can also be defined for the browser theme - light or dark mode.
Practical tips for implementation
It is best to look at the conditions of your target platform and create the favicon accordingly. You can find a good overview on Wikipedia2. There are also websites such as the RealFaviconGenerator3which does the research work for you and generates suitable HTML snippets and clear instructions for embedding. You can also use this tool to test existing favicons and ensure that they comply with best practices - depending on which target platforms you want to support.
Conclusion
Even if it is only a small detail, the favicon makes navigation much easier and contributes to the recognition of a website. It is therefore all the more important that the favicon is created carefully and is representative of your website.
