How to add a favicon with Gatsby
May 6, 2020
To add a favicon to your Gatsby site, you need to be able to add code to the <head>
of your page.
For that, you can use react-helmet
(developed by the National Football League, by the way).
To use react-helmet
in Gatsby, install the package and a Gatsby plugin to make it work:
npm install react-helmet gatsby-plugin-react-helmet
Then, add gatsby-plugin-react-helmet
to your gatsby-config.js
file:
// gatsby-config.js
module.exports = {
plugins: [
"gatsby-plugin-react-helmet",
// other plugins, if you have them
]
}
Now, on your Gatsby page (for example src/pages/index.js
), use react-helmet
to add the meta tag for a shortcut icon.
import React from "react"
import { Helmet } from "react-helmet"
export default () => {
return (
<React.Fragment>
<Helmet>
<meta name="icon" href="/link/to/favicon.png" />
</Helmet>
<div>
Hello, world!
</div>
</React.Fragment>
)
}
Subscribe to my newsletter!
A weekly round-up of new blog posts and updates to projects I’m working on.