How to change gatbsy favicon

Initial problem

You’d think that I would remember to change that after looking at the gatsby logo on my tab. Well actually I didn’t see any favicon on the tab during any of the development 🤔

So went to check out what went wrong and here are my findings:

• by default there should be a favicon.ico in the /public/static folder. This was not the case. More on that in the next point
• I found a couple of posts mentioning that if you have the gatsby-plugin-sharp plugin installed (I had that one by default) then you should be seeing an icon in /src/images. That was not the case, nor was this plugin set up for that.

Okay so we have a good clue, now let’s update that plugin

 {
    resolve: "gatsby-plugin-sharp",
    options: {
      icon: "./src/images/icon.png",
    },
}

Alas, no luck. This did not fix my problem. Time to dig somewhat deeper. After looking into it a little more, I found that the documentation on gatsby-plugin-sharp didn’t actually have anything about icon. That led me to believe this was outdated.

Solution

After looking a little more, I found a plugin called gatsby-plugin-manifest. Finally, an answer to my problem

How to use

first off, let’s install it:

npm install gatsby-plugin-manifest -- save

Now add the plugin and required manifest settings in gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `The Uncommon Byte`,
        short_name: `Uncommon Byte`,
        start_url: `/`,
        background_color: `#FFF`,
        theme_color: `#FBEDE0`,
        display: `standalone`,
      },
    },
  ],
}

Cool 😎 now that we have all the formalities out of the way, let’s dive into adding our favicon!

I usually use something like favicon.io to generate all my icons from one image. The fun thing with the manifest plugin is that you only need these 3 items that are generated.

• android-chrome-192x192.png
• android-chrome-512x512.png
• favicon-32x32.png ( I renamed this to favicon.png)

Now let’s add these in our manifest plugin. Inside the options object, add the following code

icon: `src/images/favicon.png`,
icons: [
  {
    src: `/favicons/android-chrome-192x192.png`,
    sizes: `192x192`,
    type: `image/png`,
  },
  {
    src: `/favicons/android-chrome-512x512.png`,
    sizes: `512x512`,
    type: `image/png`,
  },
],

Once you added this, run npm run develop again and you should be seeing your icon 🎉

Legacy

traditionally you would have to add this to your head

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />

No worries though, the plugin takes care of everything for you. In iOS 11.3 apple even added support for the web app manifest specification.

If you do not want these legacy icons to be generated you can always disable them by setting the legacy option to false in the plugin options.

TL;DR

Alright, time to wrap this up, we’ve basically learned that favicons might not be enabled by default with gatsby (probably also depends on how you initialized, with a template etc). And that the gatsby-plugin-manifest is a must have for all your manifest needs (including favicon!)