Add Responsive Favicon's

Favicons are the icons that you see in a web browsers address bar. Most of the time, the favicon is a slimed downed version of the company’s logo.

favicon example

Creating Favicons

I use a free service called Favicon Generator to make all of my favicons.

1. Pick picture that you would like to use as your favicon. Favicon Generator supports JPG’s, PNG’s and SVG’s. The ideal image should be at least 260x260 and maintain a 1:1 aspect ratio. I’ve had good luck with images that fail to meet those requirements.
2. Go to Favicon Generator
3. Click “Select your Favicon picture”
4. If your picture did not meet a 1:1 aspect ratio follow this stop, else you can skip. A window will pop up showing a preview of what it will look like after resizing. If you like it, click “Continue with Picture”.
5. You are now shown a preview of your favicons. If you would like to edit the way they look on some devices you can do it here. Once you’re done, scroll to the bottom of the page and click “Generate your Favicons and HTML Code”.
6. Once the icons are generated, you can download them from the link provided.

Code for Create React App

1. Copy the contents of the folder you downloaded from the previous step to your public folder.

2. Add the following lines of code to your public/index.html file.

   <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="#da532c">
   <meta name="theme-color" content="#ffffff">

3. Test it out!

Code for GatsbyJS

1. Copy the contents of the folder you downloaded from the previous step to your static folder. If it doesn’t exist, you can create it at the root of your project directory.
2. Skip the next three steps if you already have a html.js file in your src folder. Copy the default-html.js file from .cache/default-html.js to src/.
3. Rename the default-html.js to html.js.
4. If you want to read up on what html.js, else continue on - GatsbyJS Html.js

5. Add this code to the head section

   <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="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
   <link rel="manifest" href="/site.webmanifest" />
   <meta name="msapplication-TileColor" content="#da532c" />
   <meta name="theme-color" content="#ffffff" />

6. Test it out!