How many favicons should you have in your site?

How many favicon (including app icon) sizes and formats do you need? What are the tools to generate them? Let's explore.

Take note that there are files and meta tags that you might need together with the favicons:

We will go through these as well.

This is the 7th post of the series - building personal static site with 11ty. Here is the GitHub Repo jec-11ty-starter if you prefer to read the code first.

How many favicons do we need?

Short answer - it depends (because that's how people answer, always 😂).

Slightly longer answer - it depends on:

Longer answer - read this blog post by Philippe Bernard. It talks about whether we should support all favicon formats or using the "less is more" approach.

How many favicons does this website have?

Glad you asked. This website has:

Where can we spot the favicons?

The most common place we can see favicon is on a browser tab, a tiny one.

However, favicons can also show up in multiple places, some with much bigger size. Here are some examples:

Places you can spot favicons.
Places you can spot favicons.

Should we care about all of them? Probably not. I mean, how often do people add a blog to home screen? (especially an unknown blog like mine 😆)

However, there's no harm supporting that. Nevertheless, I am exploring out of curiosity.

Favicon design template size

The design template should be square in shape, or with at least 512x512px in size. I suggest to use 1024px or above because who knows in the future that the favicon size will grow again!

How do I know how many and what favicons I need?

There are online tools! 😃 Here are a few tools I used to generate favicons and other useful files and meta tags.

realfavicongenerator.net

Highly recommended: realfavicongenerator.net. It is a good free tool to generate favicons to support different platforms.

You can also pass a link to analyse your current website favicon condition and see recommendations on how to fix it.

Upload your favicon (or just click on "Demo with random image"), and it will show you a preview on how your favicons will look like on different platforms. There are quite a few options you can play around as well.

It is an all in one tool - helps you to generate all necessary png, ico and svg file, plus the manifest and browserconfig.xml (for Microsoft Tile) files.

Try it!

If you want to know the usage of each icon, check out their FAQ for detailed explanation.

faviconit.com

A simple one - faviconit.com. If you don't like to read (while the previous one offers more explanation, it might be confusing for some users), you may use this tool. This website requires you to upload a photo, then it will generate an ico and png file accordingly, along with the browserconfig.xml.

However, it doesn't generate a manifest file for you. (You may not need it either)

splash-screens

If you want to provide a native like experience for your "installed" website, you may want to generate a splash screen when the user launches your website from the home screen. iOS requires special meta tags and links to handle that, you can use this tool - splash-screens to generate that.

*I did not use this for this site.

The 2020 Guide to FavIcons for Nearly Everyone and Every Browser

I read this article - The 2020 Guide to FavIcons for Nearly Everyone and Every Browser as well because the title is eye-catching. It talks about a brief history of favicon, a list of current favicon sizes and deprecated favicon sizes. It also provide templates (in GitHub) for you to start design (Photoshop and Sketch).

My favicon setup

Combining all the knowledge from the links above, here are all the new files I created:-

# file structure

- assets
  - img
    - favicons
      - favicon-120.png
      - favicon-144.png
      - favicon-150.png
      - favicon-152.png
      - favicon-180.png
      - favicon-192.png
      - favicon-310.png
      - favicon-512.png
      - favicon.svg
- src
  - favicon.ico
  - _includes
    - base-favicon.partial.njk
  - root
    - browserconfig.njk
    - web-manifest.njk

.

Notice that I create a file called base-favicon.partial.njk. It is because there are too many favicons to define. I prefer to put them in a separate file, then including them in the base.layout.njk.

Here is the code:

<!-- src/_includes/base.layout.njk -->

<html>
  <head>
    ...
    {% include 'base-favicon.partial.njk' %}
  </head>
  ...
</html>
<!-- src/_includes/base-favicon.partial.njk -->

<!-- generics: classic -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" href="/favicon.ico"
  sizes="16x16 32x32 48x48 64x64">

{% set icons = [128, 196] %}
<!-- generics: modern -->
{% for icon in icons %}
  <link rel="icon" sizes="{{icon}}x{{icon}}"
    href="{{ env.base.favicons }}favicon-{{icon}}.png">
{% endfor %}

<!-- iOS -->
<link rel="mask-icon" color="{{ env.themeColor }}"
  href="{{ env.base.favicons }}favicon.svg">

{% set icons = [120, 152, 180] %}
{% for icon in icons %}
  <link rel="apple-touch-icon" sizes="{{icon}}x{{icon}}"
    href="{{ env.base.favicons }}favicon-{{icon}}.png">
{% endfor %}

<!-- Windows 8 IE 10 -->
<meta name="msapplication-TileColor"
  content="{{ env.themeColor }}" />
<meta name="msapplication-TileImage"
  content="{{ env.base.favicons }}favicon-144.png" />

<!-- Windows 8.1 + IE11 and above -->
<meta name="msapplication-config" content="browserconfig.xml" />

<!-- Web App manifest -->
<link rel="manifest" href="/web.manifest">
<meta name="theme-color" content="{{ env.themeColor }}">

.

Notice that there are some new env.* variables in the previous code. Let's add them in our existing global data file src/_data/env.js.

// src/_data/env.js

baseUrl = ...; // added previously

modules.export = {
  siteName: 'your_website_name', 
  themeColor: '#fffff', // replace with any color
  dir: {
    ...
    favicons: `/assets/img/favicons/`,
  },
  base: {
    ...
    favicons: `${baseUrl}${dir.favicons}`,
  },
}

.

Next let's work on the browserconfig which Windows requires:-

<!-- src/root/browserconfig.njk -->

---
layout: false
permalink: browserconfig.xml
ignore: true
---
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square150x150logo src="{{env.base.favicons}}favicon-150.png"/>
      <square310x310logo src="{{env.base.favicons}}favicon-310.png"/>
      <TileColor>{{ env.themeColor }}</TileColor>
    </tile>
  </msapplication>
</browserconfig>

.

Last one. The web app manifest is a JSON file that tells the browser about your Progressive Web App and how it should behave when installed on the user's desktop or mobile device.

// src/root/web-manifest.njk

---
layout: false
permalink: web.manifest
ignore: true
---
{
    "name": "{{ env.siteName }}",
    "short_name": "{{ env.siteName }}",
    "start_url": "/",
    "icons": [
        {
            "src": "{{ env.base.favicons }}favicon-192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "{{ env.base.favicons }}favicon-512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "{{ env.themeColor }}",
    "background_color": "{{ env.themeColor }}",
    "display": "standalone"
}

Bonus: How do I test?

You might want to test how the favicons show up in each platforms. There is no easy way to do it, you may need to test manually or create your own automation test (may not help if you want to test the photo quality).

There are some tools could help you to test on some of it.

To test on older browsers, like Internet Explorer, you can sign up for BrowserStack or Saucelabs. These two testing tools support multiple Desktop OSes, mobile OSes and browser versions. It makes testing easier (don't need to have a physical device ourselves).

However, the free trial period is short, and you will need to subscribe to continue using it.

On the other hand, you can use Chrome DevTools to test if your web manifest is configured correctly.

Chrome DevTools > Application Panel > Manifest
Chrome DevTools > Application Panel > Manifest

Bonus: Maskable icon

If your website is a Progressive Web App (PWA) - Maskable icons are a new icon format that gives you more control and let PWA use adaptive icons. If you supply a maskable icon, your icon can fill up the entire shape and look great on all Android devices.

You may read this article for more details. This maskabel.app is a tool to help you create one.

Normal transparent icons vs Maskable icons
Normal transparent icons vs Maskable icons

Alrighty, what's next?

Yay! We have generated and set up favicons, themes, and web manifest to support almost all of the platforms.

I wish we could have shorter, easier or a one size fit all favicon solution 😆. Keeping track on how each platform require a slightly different image size and meta tag is not fun at all.

In the coming posts, I plan to write about more on how I built my website with 11ty:

Let me know if the above topics interest you.

.

Here's the GitHub repo for the code above: jec-11ty-starter. I'll update the repo whenever I write a new post.

That's all. Happy coding!

Have something to say? Leave me comments on Twitter 👇🏼

Follow my writing:

Hand-crafted with love by Jecelyn Yeen © Licenses | RSS Feed