Skip to content
bobby_dreamer
GithubLinkedIn

Adding a favicon to gatsby site

— gatsbyjs — 1 min read

# Making a logo

To setup logo, you need right know of tools. You will have those tools, if you are professional designer, but if you are not, you will be looking for online applications, where you can design online itself. One such application, i have found is vectorpaint. This is my logo, i have designed it completely in vectorpaint

BD Logo1

Next thing to do is convert it to favicon, for that i used favicon.io. Once you drag and drop the image, it will show you a small preview

favicon0

Click download, you will be getting a zip file with multiple files like below,

favicon1

# Setting up gatsby to display a favicon

  1. Web app manifest is required to add favicon. Install gatsby-plugin-manifest, its not added by default in starter-blogs. Once installed verify it in package.json

    1npm install --save gatsby-plugin-manifest

  2. Stop the development server, if its running.

  3. Update plugins:[] in gatsby-config.js to add the below, 

    1{
    2    resolve: `gatsby-plugin-manifest`,
    3    options: {
    4        name: `BobbyDreamer - Works of Sushanth Bobby Lloyds`,
    5        short_name: `bobby|dreamer`,
    6        description: `Sushanth Bobby Lloyds. Programming. Games. Music. Videos. Resume. Experiments.`,
    7        start_url: `/`,
    8        background_color: `#fff`,
    9        theme_color: `#6B46C1`,
    10        display: `standalone`,
    11        icons: [
    12        {
    13            src: `/favicon-32x32`,
    14            sizes: `32x32`,
    15            type: `image/png`,
    16        },
    17        {
    18            src: `/android-chrome-192x192.png`,
    19            sizes: `192x192`,
    20            type: `image/png`,
    21        },
    22        {
    23            src: `/android-chrome-512x512.png`,
    24            sizes: `512x512`,
    25            type: `image/png`,
    26        },
    27        ],
    28    }, 
    29    },

  4. Restart the development server by gatsby develop

  5. Open the browser http://localhost:8000/ and open inspect console and check for errors. For me i had wrong size mentioned in sizes: and updating and restarting it disappeared.

favicon2

  1. You see the favion by now.

favicon3

# Related articles