DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to add a favicon to your website
Rob OLeary
Rob OLeary

Posted on • Originally published at roboleary.net

How to add a favicon to your website

A favicon is short for β€œfavorite icon”. It is the small icon that represents your website. The most common place you see it is on browser tabs alongside the page title.

Often the favicon is just a scaled down version of a website's logo. It should look good at very small sizes - as small as 16 by 16 pixels - this may lead you to create a different design for your favicon.

For example, take IBM. They use their distinctive stylised text logo in their website header, but they use a bee icon as their favicon.

IBM logo and favicon

What is required to add a favicon?

Over time, the requirements for favicons got out of hand. Favicons started to be used on home screens and on splash screens for progressive web apps. Different browsers and mobile platforms wanted different image resolutions and formats for different contexts. If you wanted to satisfy all of these scenarios, you would end up creating approxmiately 20 image files and have to reference these in metadata in different places. Some people wrote generators that would spit out the image files and related metadata based on an initial image you provided.

Thankfully, it has gotten saner and you can forgo a generator. You can now make a SVG favicon, so you can benefit from its scalable nature and cut out a large portion of the image files required. Andrey Sitnik researched this topic recently in his article - How to Favicon in 2021: Six files that fit most needs. His findings were that 6 files will cover most of the bases. Read through his article to get the full run-down, I will summarise the big points here and discuss some important design considerations when you create a favicon.

What files do I need to create?

It's probably easiest to create your favicon as a SVG in your favourite vector graphics editor (Adobe Illustrator, Inkscape..etc). You can then export it as a PNG when it is finished.

The files you need to create are:

  1. A SVG in a 1:1 aspect-ratio. We will discuss this more in the next section.
  2. A 32 by 32 pixel ICO. This is for legacy browsers. You can open the SVG in GIMP and export it to favicon.ico using the setting: 32 bpp, 8-bit alpha, no palette.
  3. A 180 by 180 pixel PNG. This is for Apple devices
  4. A 192 by 192 pixel PNG. This is for the home screen for Android devices.
  5. A 512 by 512 pixel PNG. This is for the splash screen for Android devices.
  6. A web app manifest file. This is typically used for creating Progressive Web Apps (PWAs), but it is used in other contexts such as the "add to home screen" context in browsers . The file is called manifest.json or manifest.webmanifest, and is typically placed in the root directory of your website.

What this set-up chooses to exclude is support for the following specifications:

Creating the SVG - don't disregard dark mode

We want to create a square SVG, such that the aspect ratio is 1:1. You can omit the width and height attributes on the SVG, you can use viewBox to define the dimensions.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
   <!-- stuff -->
</svg>
Enter fullscreen mode Exit fullscreen mode

We want to ensure our favicon looks good on near-white and near-black colours, and looks reasonable on any background.

Why? Can't we just use a media query to use a different version of the favicon or change the colours when the theme is light or dark?

Yes, but you can't rely on this 100%. The prefers-color-scheme CSS media feature can be used to detect if the user has requested a light or dark color theme in the browser and will cover most scenarios. Scenarios that I found that this does not cover are:

  • In Chromium-based browsers incognito windows use dark colours by default, they ignore the operating system's theme.
  • In the history dropdown in browsers, the favicons used are probably cached and are not affected by the user’s theme. You can see in the screenshot below that the BBC and GitHub favicons are hard to identify.
    Browser history favicons

  • On the traffic page on Github, favicons for referring sites are displayed inline alongside the web address. Even GitHub's favicon falls foul here if you have dark mode set in the GitHub settings, you can see this below! Or can you? πŸ˜‘

github traffic page in dark mode

To look good on any background, you can do the following:

  • Have an opaque background for your favicon. Amazon does this, they alway have a white background color.
    amazon favicon themes compared

  • Choose a colour palette that has enough contrast with light and dark backgrounds. Microsoft do this well.

MS favicon themes compared

If you don't want to follow the design approaches above, you can cover most scenarios by embedding a style block inside your SVG with the prefers-color-scheme media query. This will adapt the favicon to the user's chosen theme. Depending on the style of your favicon, you may want to change the colours used, or you could use a filter to adjust the existing colours.

  • You can switch colors or use the invert CSS filter. You can see an example of this here.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <style>
    @media (prefers-color-scheme: dark) {
      path {
        fill: white;
      }
    }
  </style>

  <!-- stuff -->
</svg>
Enter fullscreen mode Exit fullscreen mode
  • If you have a colourful favicon but it needs to be brighter for dark themes, you could use a brightness CSS filter.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <style>
    @media (prefers-color-scheme: dark) {
      :root {
        filter: brightness(2);
      }
    }
  </style>

  <!-- stuff -->
</svg>
Enter fullscreen mode Exit fullscreen mode

You can also consider adding a shadow to increase contrast of your favicon with the background. This is obviously less effective for dark themes.

Where should I put the files?

The convention was to put your favicon files in the root directory of your website. You may want to place them in a sub-directory, for example in /img/favicon/, just to make things cleaner. I would still put favicon.ico in the root directory, because some web services and older browsers still look here for this file. The rest is covered by what you specify in your meta-data.

Below is an example of how you can organise the files in your website, placing the majority of the image files in a sub-directory:

.
β”œβ”€β”€ favicon.ico       // must be named this way and located at root
β”œβ”€β”€ manifest.json     // the convention is to have this in the root dir    
β”œβ”€β”€ img/             // you can choose where to put the rest of the images  
β”‚   └── favicon/
β”‚           └── favicon.svg   
β”‚           └── favicon-180.png   
β”‚           └── favicon-192.png
β”‚           └── favicon-512.png  
Enter fullscreen mode Exit fullscreen mode

Meta-data

You need to add the following to the head of your website:

<head>
  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/img/favicon/favicon.svg" type="image/svg+xml" sizes="any">
  <link rel="apple-touch-icon" href="/img/favicon/favicon-180.png">
  <link rel="manifest" href="/manifest.json"> 
</head>
Enter fullscreen mode Exit fullscreen mode

It is also a good idea to add <meta name="theme-color" content="<color>" for consistency. This suggests the color to be used by browsers and apps to style elements of the UI background. For example, browsers might use the color for the page’s title bar. You can specify a media query for the themes also.

<meta name="theme-color" media="(prefers-color-scheme: light)"
content="antiquewhite">
<meta name="theme-color" media="(prefers-color-scheme: dark)"
content="silver">
Enter fullscreen mode Exit fullscreen mode

This is what you put in your web app manifest:

{
  "name": "My blog",
  "icons": [
    { "src": "/img/favicon/favicon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/img/favicon/favicon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Optimization

Browsers download favicons in the background, so a bigger image file does not affect website performance, but it is still good practice to optimize the files and respect people's data quotas!

For the SVG, you can optimize the markup and strip out the editor data by using the tools: SVGOMG (web GUI) or SVGO (command-line).

You can use tinypng (web GUI) or any raster image app for optimizing the PNGs. Typically, the most impactful thing you can do is to reduce the color palette to the minimum required. You should verify the output to ensure it doesn't degrade the appearance.

Conclusion

Adding a favicon to your website in 2021 is less painful than before, but it is still not a trivial task. You need to consider how your favicon will look in dark and light themes. You need to create 6 files and add the appropriate meta-data to your webpage. It is a bit of work! Hopefully, this article lightened the load for you!


You can subscribe to my RSS feed to get my latest posts.

Top comments (7)

Collapse
billraymond profile image
Bill Raymond • Edited on

For a tiny icon that is rarely seen, this is a pretty epic article. Guess I’ll have to go and redo my current site. I’m building a new site and recording it. Are you okay if I share this article?

Collapse
robole profile image
Rob OLeary Author

Thanks Bill. You see it more often than you realise! Sure, feel free to share the article. Good luck with the rebuild! πŸ™‚

Collapse
billraymond profile image
Bill Raymond

Thanks! Fortunately, it is nothing complex. I hope :-)

Collapse
anushibin007 profile image
Anu Shibin Joseph Raj

"don't disregard dark mode" - Funny how the DEV logo has a black background and is almost illegible in dark mode πŸ˜‚

Collapse
robole profile image
Rob OLeary Author • Edited on

It's hard to get right, I wouldn't pick on anyone. Generally, I would stay away from using text in a favicon, the size is too small for it to be easy to distinguish. I guess that's why IBM decided not to use their brand name in their favicon. You can get away with using a single big letter like Amazon do.

Collapse
thomasbnt profile image
Thomas Bnt

Nice post!

Collapse
robole profile image
Rob OLeary Author • Edited on

favourite

DEV runs on 100% open source code known as Forem.

Β 
Contribute to the codebase or host your own.
Β 
Check these out! πŸ‘‡