gatsby: Can't change favicon

I want to change the favicon to a logo I am using for my website. I have this code in the head tag in my html.js file:

<head>
   <meta charSet="utf-8"/>
   <meta httpEquiv="X-UA-Compatible" content="IE=edge"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"/>
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"/>
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"/>
   <link href="https://fonts.googleapis.com/css?family=Libre+Franklin" rel="stylesheet"/>

   <link rel="logo" href="favicon.ico" type="image/x-icon" />
   {head.title.toComponent()}
   {head.meta.toComponent()}
   <TypographyStyle typography={typography}/>
   <GoogleFont typography={typography}/> {css}
</head>

with this line to change the favicon:

 <link rel="logo" href="favicon.ico" type="image/x-icon" />

But regardless of what path I use, I am unable to change the favicon. How can I change the favicon or where is the default beer logo favicon being set?

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 33 (21 by maintainers)

Links to this issue

I hosted portfolio which was created using CRA. how to set sEO to appear it on google search?

Most upvoted comments

This worked for me:

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

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

+21

ghost on Nov 20, 2018

Is it OK to fix like this fix in html.js ?

import favicon from './favicon.png';
<link rel="shortcut icon" type="image/png" href={favicon} />

+16

pedromartinez11 on Oct 7, 2017

This is working well for me, except for the browserconfig.xml file generated by Real Favicon Generator.

Here’s what I’ve added to html.js:


import faviconApple from './static/favicons/apple-touch-icon.png'
import favicon32 from './static/favicons/favicon-32x32.png'
import favicon16 from './static/favicons/favicon-16x16.png'
import manifest from './static/favicons/manifest.json'
import safariPinned from './static/favicons/safari-pinned-tab.svg'
import faviconICO from './static/favicons/favicon.ico'
import browserConfig from './static/favicons/browserconfig.xml'

...

<link rel="apple-touch-icon" sizes="180x180" href={faviconApple} />
<link rel="icon" type="image/png" sizes="32x32" href={favicon32} />
<link rel="icon" type="image/png" sizes="16x16" href={favicon16} />
<link rel="manifest" href={manifest} />
<link rel="mask-icon" href={safariPinned} color="#a89472" />
<link rel="shortcut icon" href={faviconICO} />
<meta name="msapplication-config" content={browserConfig} />
<meta name="theme-color" content="#ffffff" />

This all works fine if I remove the two browserConfig lines. However, if I leave them in, the following error is thrown:

There was an error requiring "src/html.js"

 { Error: Cannot find module "./static/favicons/browserconfig.xml"
    at webpackMissingModule (render-page.js:50258:87)
    at Object.module.exports (render-page.js:50258:199)
    at __webpack_require__ (render-page.js:30:30)
    at Object.<anonymous> (render-page.js:81:11)
    at __webpack_require__ (render-page.js:30:30)
    at Object.assign.i (render-page.js:50:18)
    at render-page.js:53:10
    at webpackUniversalModuleDefinition (render-page.js:3:20)
    at render-page.js:10:3
    at ContextifyScript.Script.runInContext (vm.js:59:29) code: 'MODULE_NOT_FOUND' }

The browserconfig.xml file is next to the images in the ./static/favicons folder, so I’m not sure why the images are found, but browserconfig.xml is not.

Any idea what I’m doing wrong?

ooloth on Nov 2, 2017

Yup! That’s exactly what the html.js file is for.

KyleAMathews on Oct 8, 2017

This worked for me:

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

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

THIS WORKED.

wiserdivisor on Jun 21, 2021

In case it helps, at this point I use gatsby-plugin-manifest instead of manually importing favicons. Here’s a link to the docs.

You just add a favicon.png to your project and add it to the gatsby-plugin-manifest settings in gatsby-config. The plugin then creates all the favicon copies you need and injects the markup into your HTML.

Much easier!

ooloth on Nov 20, 2018

toComponent doesn’t take arguments, you have to do <Helmet><html lang="en" /></Helmet>.

Here’s my gatsby-ssr.js as an example of not using Helmet:

import React from 'react'

exports.onRenderBody = ({ setHeadComponents }) =>
  setHeadComponents([
    <title key="title">Nick McCurdy</title>,
    <link key="icon" rel="icon" href="/favicon.png" />
  ])

nickmccurdy on Feb 20, 2018

@Vaestro I don’t believe you can add use rel="logo". It should be rel="icon" to indicate that this icon represents the site. You can see valid property values here

kristojorg on Mar 8, 2017

Try to drop all the data from your caches…

Necmttn on Feb 19, 2017