Ben Borgers

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: [
    // 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 (
        <meta name="icon" href="/link/to/favicon.png" />

        Hello, world!

Subscribe to my newsletter!

A weekly round-up of new blog posts and updates to projects I’m working on.