Add favicons to webpages

Written: 29 Dec 2021 | Last updated: 31 Dec 2021

Favicons are the icons shown next to a website on a search engine and on the tab of a page. They are small images displaying the website's logo (or a simplified version of the logo).

There are two ways to add favicons to a webpage.

Using a .ico file

ico files are image files made originally for Microsoft Windows computer icons. They can contain several images of varying sizes. Read more about the ICO file format on Wikipedia (external image).

1. Make a .ico file called favicon.ico containing all the different sizes of your favicon,
2. Place the .ico file in your website's home directory.

That's all! Web browsers should check the home directory for a favicon.ico file when looking for the favicon.

Linking to the favicon in the code

This way of adding a favicon allows for more customisation, you can have different favicons for different pages (including having no favicon for some lightweight pages) and there is a wider range of supported image types (e.g. you could use a gif for an animated favicon).

To do this place the favicon image anywhere in the website's filesystem.

In the head section of each page add:

<link rel="icon" href="path/to/favicon.png" sizes="16x16" type="image/png">

The png can also be replaced with the image type (such as x-icon for a ico file or gif. Arguably you don't even need the type attribute as most web browsers will check the rel value and try to guess the type value.^[1]

If the image contains several sizes just seperate the sizes with spaces.

For example:

sizes="16x16 32x32 48x48"

For a scalable image (e.g. a SVG) put sizes="any".

The favicon should still render if you exclude a sizes attribute.

References

(All external links)

1. If you omit the type attribute, the browser will look at the rel attribute to guess the correct type w3schools Accessed 30 December 2021