Zero byte favicon markup
Keep the favicons without any of the markup
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
.1
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:
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.
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 png
s before turning them into ico
files.
Similar optimizations can also be achieved with apple-touch-icons
and Tiles
for Windows.