Simplified way of adding a favicon to the website

11 August 2022, 22:00 BST

18 October 2022, 15:45 BST

4 min.

Simplified way of adding a favicon to the website

If you are not a first time on my website you already know, that I like simplifying things and using a minimal approach with a complex solution. Overall, if something complex can be done that same, but simple, why not try?

This time I want to cover Favicon during website design.

“A favicon is a browser icon that represents a brand or website. Most often seen next to a web page’s title in browser tabs, favicons can also be found in address bars, bookmark lists, search results pages, toolbars, browser history, and other places across the web.”
What is a favicon? @ blog.hubspot.com

I don’t want to reinvent the wheel, as there is already a perfect solution for that, well written and documented by Andrey Sitnik from Evil Martian.

He has created a great article, which was recently updated, on How to add Favicon by using only 6 files.

His article is your holly grail of the minimalistic approach to a favicon for every web developer. I am not planning to duplicate what is there but pick only a couple of bits that I will later need in my other post for Simple implementation of PWA on a website with Mobile First Design approach.

Having a rightly implemented favicon solution on your website is giving you an opportunity to extend it and use it in other useful solutions.

Six files that fit most needs

This is the leading part of the minimalistic approach for favicon implementation.

You need in reality:

One .ico file (with 48x48, 32x32 and 16x16 layout)
Four .png files with your graphic in different dimensions (144x144, 180x180, 192x192 and 512x512)
One manifest.webmanifest file

Apart from that, just a couple of lines of code pasted in a <head> and you are ready to go.

You can use various graphic software to make this file. How to use GIMP or Inkscape is widely described in referred article.

So, grab GIMP (preferably), follow the steps and prepare your .ico and .png files to be ready for the next step.

I have added reference to 48x48 following refreshed Google Search Central Documentation that states “Your favicon must be a multiple of 48px square, for example: 48x48px, 96x96px, 144x144px and so on.”

A couple of bits of advice from myself, that I learned when I prepared files for implementation of PWA into my website.

Do not go with transparency in your icons. It may look good in some instances, but this may not always be the case with the light and dark mode approach. Pick your background colour and stick with it. Typically will be white-ish or to match your website background colour.

The icons are square. Your logo not always is, but always matches it to the wider dimension.

On favicon.ico shrink it to the maximum width of 48 pixels (layer 48x48), 32 pixels (layer 32x32) and 16 pixels (layer 16x16). Make sure layers are squares.

On your .png files do not shrink your icons to the edges of the layers, go a bit further. I recommend shrinking your logo to a maximum of 88% of the width of the image layer and then centre it horizontally and vertically.

In the 512x512 layer filled with your background fill the image with 450 pixels in the biggest dimension (roughly 88%).

This will allow the icon to be more universal with some software instead of trimming it on the edges.

For the PWA approach you will need an icon that is “maskable”. In that case, the image is reduced even further to the layer to fit nicely in rounded icon layouts. I will cover this in my PWA post.

The Head

Different browsers “read” websites differently.

Some of the (outdated) guides advise you to just put your favicon.ico into the root folder of the website and you are all done.

That’s not always the best approach.

It’s not always only browsers that are using these files but also search engines, this is why we adding this as following (inside <head>):

  <link rel="icon" href="/favicon-144.png" type="image/png">
  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  
  <link rel="manifest" href="/manifest.webmanifest">

We refer here to two out of four .png files, where apple-touch-icon.png is 180x180 in dimensions.

We serving a link to our favicon.ico and a manifest.webmanifest file that will cover on next step.

Web app manifest

Despite how its called, we not creating a web app but adding favicon to our website.

" Web Application Manifest… provides information about a web application in a JSON text file, necessary for the web app to be downloaded and be presented to the user similarly to a native app" . Web app manifests @ developer.mozilla.com

Don’t be scared with word JSON. You don’t need to be an expert in that to get used to its layout.

This file will contain the following:

{
  "icons": [
    { 
      "src": "/favicon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/favicon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

As you see, we referring here to the other two out of four graphics files that we prepared.

These five files (1x .ico, 4x .png) plus one manifest, all saved in the root directory of our website, will serve multiple purposes for multiple browsers, search engines, operating systems and devices (Apple and Android).

And just like that, you got your favicon on the website sorted out.

Please, take your time and read the full Evil Martian article about How to Favicon in 2022.

Follow me on Google News