Emoji Favicon in Gatsby

There are two reasons why I want to use an emoji as a favicon. First, I don't have the skills to make an icon that looks good. Second, I love emojis. I use them on daily basis so why not use them as favicons. I am sure there are others like me.

Getting the emoji

To get the emoji, I go to Emojipedia and find the one I like. You can also see how an emoji looks different across platforms. For me, ✌️iOS 12.2 version looks perfect. Octopuses are my favorite animals now. So I am changing my favicon to an octopus!.

Next, I download the emoji image and put it in my project folder, e.g. src/images/favicon.png.

Setting up favicon

Since I am using Gatsby to run my site, it is very easy to set up favicon. I just need to install a plugin called gatsby-plugin-manifest and configure like below in gatsby-config.js file.

npm install --save gatsby-plugin-manifest

// gatsby-config.js
module.exports = {
  siteMetadata: {
    title: 'Spencer Aung'
  },
  plugins: [
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: 'spencer-aung-blog',
        short_name: 'spencer',
        start_url: '/',
        background_color: '#ffffff',
        theme_color: '#ffffff',
        display: 'minimal-ui',
        icon: 'src/images/favicon.png' // This path is relative to the root of the site.
      }
    }
    /* other plugins */
  ]
}

Build the project again

And.... we are done! This is how I setup the favicon for my blog. ✌️🐙