In this note we'll do the following:

  • fix the web page title to render the name of current note
  • add a favicon to our Gatsby website

> title

For rendering the correct web page title according to the current page, we'll use gatsby-plugin-react-helmet and react-helmet


lets install them as below:

npm install gatsby-plugin-react-helmet react-helmet


Then add the gatsby-plugin-react-helmet to the plugins list in gatsby-config.js

  plugins: [`gatsby-plugin-react-helmet`]

Use helmet

Next, go ahead and use the react helmet in your pages

My current requirements were dead simple, just to show title. So i didn't bother to worry much at this point setting up fancy hooks for siteMetadata just to get site title etc. May be in future.

But for now, I just added following to the Layout component

import { Helmet } from "react-helmet"

function Layout({ children, title }) {
    return (
        <Helmet title={title} />

and then passed the title wherever I'm using the Layout component.

Eg: below is the case for src/templates/blogPostTemplate.js

<Layout title={frontmatter.title}>

and in index.js I'm simply passing the hardcoded value:

<Layout title="theRDnotes">

> favicon

For this, I've installed a plugin gatsby-plugin-manifest as

npm install gatsby-plugin-manifest

and did the configuration in gatsby-config.js like below

plugins: [
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `theRDnotes`,
        short_name: `theRDnotes`,
        start_url: `/`,
        background_color: `#ffffff`,
        display: `standalone`,
        icon: `src/images/favicon.png`

You can find info about the options used in configuration at


To save time, I created favicon using an online tool Below is the URL with configs, I've used, to generate the icon.

This GitHub commit represents what we've done in this post 🤩


If you think this is helpful 🎈
Don't keep it to yourself 🙊

Share it with your lovely followers at twitter 🗽

lets connect viatwitter