Favicons are the small icons that appear in browser tabs, usually next to the title of a website.
Every website should have a favicon to help differentiate it from websites in other tabs.
~75% of websites have a tag in the <head> letting the browser know where to find the site's favicon.
Here's a basic favicon link:
<link rel="icon" href="/favicon.ico">
// 37 bytes
You don't need this code!
By default, all browsers look for a file /favicon.ico in a site's root directory.
So, you can avoid having any links in your <head> by hosting a favicon at the root of your site:
e.g. https://example.com/favicon.ico
So, if your favicon is already hosted at your site's root, and is in the .ico format — you can go ahead and delete that link from your <head>.
What about different favicon sizes?
Sometimes you'll see links to different favicon sizes in the <head>, like this:
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
// 222 bytes
These links let the browser know the location of multiple favicon sizes.
The browser then picks the size that best suits it, the device, or the context.
However, you don't need to do this to support multiple icon sizes.
A single .ico file can contain multiple icons with different dimensions.
.ico isn't really an image format. It's a container for .bmp and .png.
So you can remove all those seperate <link> tags, and replace them with a single favicon.ico in your site's root directory.
How to make a favicon containing multiple icons using gimp
You can use the free and open-source image editor Gimp.
Here's how you do it:
Create a new file with the dimensions of your largest icon size.
Create a new layer with the dimensions of the other sizes.
In each layer paste your icon and resize it to fit that layer.
Export your file and select the
.icofile extension.A dialogue box will appear, prompting you to select options for your icons. Select
Compressed (png)for a smaller file size.Click
Export
Note that IE 10 and below do not support png favicons. To support IE <= 10 make sure any icon smaller than 48x48 are not exported as .png.
Icons larger that 48x48 can still benefit from compression without effecting IE <= 10.
Further optimizations
By default, favicons are cached for a long period of time. So any optimization to the favicon itself is ineffective at saving data overall.
However, there's no downside to having an extremely lightweight favicon. So consider optimizing your favicon's size anyway.
Your favicon may not be effectively compressed — so consider using the online tool Squoosh to compress pngs before turning them into ico files.
Similar optimizations can also be achieved with apple-touch-icons and Tiles for Windows.
Latest comments (2)
Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍
That's a really useful tip, thank you. I've been using svg favicons as they scale to different resolutions. It would be lovely if browsers would look for a favicon.svg file as well, that way we could omit the link tag, but still get the benefits of sharp scaling.