Adding Favicon.ico to Contentful or Gatsby website

Question

I am trying to add a new favicon logo to a Gatsby site on Contentful. Do I put it in Contentful or in the code on Gatsby? Also with that being said, is there a way to make the Favicon animated as well?

Answer 1

I should add, there are not index.html files available unless I make one

The index.html is created when you build the site (gatsby build) and it's placed under /public folder. You should avoid creating or placing autogenerated files because they will be overridden according to the source code placed under /src folder. Take a look at Gatsby's folder structure for more details:

• /public: Automatically generated. The output of the build process will be exposed inside this folder. Should be added to the .gitignore file if not added already.

• /src: This directory will contain all of the code related to what you will see on the frontend of your site (what you see in the browser), like your site header, or a page template. “src” is a convention for “source code”.

Regarding the favicon, you can choose whatever option works better for you.

• Using gatsby-plugin-manifest (preferred way): just add the following configuration in your gatsby-config.js:

   {
     resolve: `gatsby-plugin-manifest`,
     options: {
       name: `GatsbyJS`,
       short_name: `GatsbyJS`,
       start_url: `/`,
       background_color: `#f7f0eb`,
       theme_color: `#a2466c`,
       display: `standalone`,
       icon: `src/images/icon.png`, 
     },
   },
  

  The icon attribute stands for the favicon. The path is relative to the root of the site and it must be valid, otherwise, the compilation will fail.

• Using Contentful: if you choose that option, you must be aware that the favicon asset must be statically analyzed. This means that you need to fetch Contentful data in order to create the favicon node. This way will force you to use the Helmet component to customize the <header> tag:

    <Helmet>
      <meta name="icon" href=`${data.edges.nodes.contentfulAssetNode.localFile}` />
    </Helmet>
  

In this case, the href will be the path of the Contentful GraphQL generated favicon. It should be local, hence the downloadLocal option should be set to true. Without further implementation details, it's impossible to know what your GraphQL structure should look like.

• Using a built-in solution: this is likely the previous one but using a local path like:

    <Helmet>
      <meta name="icon" href=`/favicon.ico` />
    </Helmet>
  

  You can use the static folder (in the previous case will be /static/favicon.ico) to create a valid public path or import the asset directly like:

  import favicon from 'path/to/favicon.ico'
  ...
  
    <Helmet>
      <meta name="icon" href={favicon} />
    </Helmet>