Skip to content

How to Add a Favicon to a Gatsby Site

Gatsby/

A favicon can be added to your Gatsby site by using gatsby-plugin-manifest plugin. This will take care of generating the favicon in different sizes required by devices other than a desktop computer. Other devices display the favicon in much larger sizes than a desktop computer, therefore it is important to add large favicons to avoid them appearing blurry.

Adding the Icon

  1. Run the following command from your project’s root folder:

    npm install gatsby-plugin-manifest

  2. Add a favicon of your choice under src/assets/images folder. It doesn’t need to be that folder specifically, it’s up to you where you decide to keep your project’s assets.

  3. Configure the plugin in gatsby-config.js file.

    module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        icon: 'src/assets/images/icon.png',
      },
    },
  ],
};

This should result in multiple link tags being added to your website’s head.

<link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=53aa06cf17e4239d0dba6ffd09854e02" />
<link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=53aa06cf17e4239d0dba6ffd09854e02" />
<link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=53aa06cf17e4239d0dba6ffd09854e02" />
<link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=53aa06cf17e4239d0dba6ffd09854e02" />
<link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=53aa06cf17e4239d0dba6ffd09854e02" />
<link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=53aa06cf17e4239d0dba6ffd09854e02" />
<link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=53aa06cf17e4239d0dba6ffd09854e02" />
<link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=53aa06cf17e4239d0dba6ffd09854e02" />

Important Notes

There are a few things to keep in mind when using this plugin:

  • The supported image formats for the icon are JPEG, PNG, WebP, TIFF, GIF and SVG
  • The width and height of the image should be the same, otherwise the plugin will add borders to turn it into a square
  • The image should be at least 512x512 pixels big. By default your icon is being generated in various sizes starting from 512x512px and going down to 48x48px. This can be adjusted with extra configuration (link to documentation). For this reason I choose to use an SVG image so that the image quality is perfect no matter the size.

References