bobby_dreamer

Recently Created

See 157 more →

Adding a favicon to gatsby site

Mar 20, 20202 min read

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

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

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

# 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

    npm install --save gatsby-plugin-manifest

  2. Stop the development server, if its running.

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

        {
    resolve: `gatsby-plugin-manifest`,
    options: {
        name: `BobbyDreamer - Works of Sushanth Bobby Lloyds`,
        short_name: `bobby|dreamer`,
        description: `Sushanth Bobby Lloyds. Programming. Games. Music. Videos. Resume. Experiments.`,
        start_url: `/`,
        background_color: `#fff`,
        theme_color: `#6B46C1`,
        display: `standalone`,
        icons: [
        {
            src: `/favicon-32x32`,
            sizes: `32x32`,
            type: `image/png`,
        },
        {
            src: `/android-chrome-192x192.png`,
            sizes: `192x192`,
            type: `image/png`,
        },
        {
            src: `/android-chrome-512x512.png`,
            sizes: `512x512`,
            type: `image/png`,
        },
        ],
    }, 
    },

  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.

  1. You see the favion by now.

# Related articles

Graph View

Backlinks