Gatsby: Can't add favicon?

Created on 22 Nov 2017 · 8Comments · Source: gatsbyjs/gatsby

I'm not sure if I missed it, but the docs don't seem to show you how to add a favicon. I followed the "getting started" guide.

Source

yirichie

Most helpful comment

For posterity and since it wasn't immediately obvious to me, basically one way to do it with Helmet:

import favicon from '../images/favicon.png';

<Helmet
  title="..."
  meta={[
      { name: 'description', content: '...' },
      { name: 'keywords', content: '....' },
  ]}
  link={[
      { rel: 'shortcut icon', type: 'image/png', href: `${favicon}` }
  ]}
/>

skube on 14 Jul 2018

👍44 🎉12 🚀3 👎1

All 8 comments

@yirichie I don't the docs mention it specifically, but here's where the concept is laid out. If I recall correctly, a favicon is just a special icon (or series of icons) that browsers look for in the root of the domain.

If you put your favicon in the static folder, it'll get loaded into the root of your site. Alternatively, you could import the favicon asset into your site and get all the benefits of staying within the module system (per the link, above). Either way, you'll have to declare the link with react-helmet—just like other <head> metadata.

benforshey on 22 Nov 2017

Hey, I just noticed that you mentioned changing the favicon the (in issue title), and I've been talking about adding a favicon. Do you have a favicon that's showing up, but you want a different one to show up? Because favicons are cached for a long time.

benforshey on 22 Nov 2017

Hey Ben sorry I did mean adding, I'll edit the title and post. And ah thanks, I'll go through what you linked above!

yirichie on 22 Nov 2017

For posterity and since it wasn't immediately obvious to me, basically one way to do it with Helmet:

import favicon from '../images/favicon.png';

<Helmet
  title="..."
  meta={[
      { name: 'description', content: '...' },
      { name: 'keywords', content: '....' },
  ]}
  link={[
      { rel: 'shortcut icon', type: 'image/png', href: `${favicon}` }
  ]}
/>

skube on 14 Jul 2018

👍44 🎉12 🚀3 👎1

I tried @skube 's method, but somehow not working. so I modified the icon option of gatsby-plugin-react-helmet in gatsby-config.js , now it's working :D

gespiton on 8 Sep 2018

👍3

@gespiton icon option in gatsby-config, please do tell ? :)

holmberd on 23 Apr 2019

Hey guys! I had some confusion from where my app was sourcing it's favicon earlier today and stumbled across this thread. I found a solution and thought to share it here just in case anyone else got lost.

In my case, icon and favicon generation was being handled by gatsby-plugin-manifest.
You can check out the documentation here.

In gatsby-config.js, gatsby-plugin-manifest was being configured like so:

{
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: SITE_NAME,
        short_name: PWA_SHORT_NAME,
        start_url: '/',
        background_color: PWA_BACKGROUND_COLOR,
        theme_color: PWA_THEME_COLOR,
        display: 'standalone',
        icon: 'src/images/logo.png',
      },
},

The key option here, being the icon key in options:
icon: 'src/images/logo.png'

Important note in the doc:

For best results, if you’re providing an icon for generation it should be…

…at least as big as the largest icon being generated (512x512 by default).
…square (if it’s not, transparent bars will add to make it square).
…of one of the follow formats: JPEG, PNG, WebP, TIFF, GIF or SVG.

Hope this helps someone!