Adding a favicon to Gatsby

All PostsPosts filtered by: gatsby

Adding a favicon to Gatsby

Updated: March 28, 2019 by Tony Alves

We're going to add our favicon to our Gatsby site. Grab some coffee ☕ and let's get into this!

Steps we'll take

  • Create our favicon images and assets
    You'll need a nice image quality of the logo you want to use
  • Copy the favicon assets to static
  • Add our dependencies to our site
  • Create the code for our Layout

Create favicon

There is a handy site at https://realfavicongenerator.net/. Go to the Favicon Generator and upload your Favicon image. The image should be high resolution and be in png format if transparency exists/wanted. Once Uploaded, go through all the optional settings and make sure your backgrounds and theme colors are set. This might take more than one try, but that's ok. You can move on and refine later if it's not perfect.

When at the end, you will generate your favicon assets and there will be a download button to download the package to your local machine. Also copy the example <head> section for later reference to help with your code. Here is what this site's example code ended up being.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#3c6a84">
<meta name="theme-color" content="#3c6a84">

Copy the assets to static

Gatsby will copy any static assets you need directly from a directory at ./static into the root folder of your site. This directory will be at the same level of src in your Gatsby project.

Copy all the assets to static, once you extract them from the zipped up file you downloaded.

android-chrome-192x192.png
android-chrome-512x512.png
apple-touch-icon.png
browserconfig.xml
favicon.ico
favicon-16x16.png
favicon-32x32.png
mstile-150x150.png
safari-pinned-tab.svg
site.webmanifest

Add dependencies

We will be using react-helmet to allow us to add the code. In our case, we will add the dependencies to our site package. If you already have these packages installed, you can skip this step.

yarn add gatsby-plugin-react-helmet react-helmet

The plugin needs to be added to gatsby-config.js, so we add the following highlighted line if it is not already being used.

module.exports = {
  plugins: [
    ...
    `gatsby-plugin-react-helmet`,
    ...
  ]
}

Create the code

Now we are ready to prepare a way to get all the example code into the <head> section of each page of our site. Some sites will be different than others, so we are going to take the easiest example of adding the code. We'll assume there is a Layout component in our site templates or directly in all our pages. The code will be put into the Layout component in our src/components/Layout.js file.

src/components/Layout.js

import React from 'react';
import { Helmet } from 'react-helmet';
import { Header } from './header';
import { Main } from './main';
import { Footer } from './footer';
export function Layout({ children }) {
  return [
      <Helmet>
        <html lang="en" />
        <link
          rel="apple-touch-icon"
          sizes="152x152"
          href="/apple-touch-icon.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="32x32"
          href="/favicon-32x32.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="16x16"
          href="/favicon-16x16.png"
        />
        <link rel="manifest" href="/site.webmanifest" />
        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
        <meta name="msapplication-TileColor" content="#3c6a84" />
        <meta name="theme-color" content="#3c6a84"></meta>
      </Helmet>
    <Header />,
    <Main>{children}</Main>,
    <Footer />,
  ];
}

Done!

Ready to test out our additions. Just run the gatsby develop command locally and inspect your pages and see your new favicon image in the browser.

You can also go back to https://realfavicongenerator.net/ and test your site's setup once you deploy your changes.

Hope this helped you out!

© Tony Alves