The favicon is a small icon that is displayed on the browser’s tab bar, next to the page title.
What is a favicon?
A favicon, or favourite icon, is a small image that is displayed in the address bar of a web browser, to the left of the page title.
It can serve to make the website more recognisable, which can help make the site more user-friendly.
How do I install a favicon?
Favicons are inserted via a link element in the <head> area of the HTML document. The following requirements are stipulated:
- That it is an icon (rel=icon),
- The location of the icon (href=favicon.png),
- The size of the icon (size=”16×16″)
- And the content type (type=”image/png”).
A favicon can look like this in the source code:
The rel=”manifest” (see the fourth line above) is an entry that Chrome uses on Android. The entry for rel=”mask-icon”, on the final line, is designed for Apple’s Safari browser; it determines which icon should be displayed for pinned tabs.
What image formats and sizes can I use for a favicon?
In the above example, we have three entries for different favicons with different sizes, and there are many more sizes that can be used.
Stack Overflow provides a detailed answer to the question of which sizes and file formats should be used: Favicon Standard – 2018 – svg, ico, png and dimensions?
What happens if I don’t have a favicon?
If the browser in question cannot find a favicon, Chrome will display an empty document icon, whilst Firefox and Safari, on the other hand, will simply not display a favourite icon.
The Favorite icon is a good way to make your logo visible in web browsers. It is therefore recommended that you make your own logo available as a favicon.
There are a number of free Favicon providers on the web, such as the Real Favicon Generator, which allows you to create all of the relevant sizes with relatively little effort.