Add Responsive Favicon's

Support mobile devices and tablets with a proper favicon

Tue, 01 Jan 2019

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

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” Screen Shot 2019-01-02 at 11.47.09 AM
  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!
Loading...
Edward Beazer

Edward Beazer - I just like to build shit. Sometimes I get stuck for hours, even days while trying to figure out how to solve an issue or implement a new feature. Hope my tips and tutorials can save you some time.