HTML & CSS
Article
By Simon Codrington

Quick Tip: Add Favicons Quickly and Easily to Your HTML

By Simon Codrington

Favicons add that extra bit of polish to your website, helping to separate your site from the rest. These icons are increasingly more crucial as desktop clients, operating systems, and mobile devices let users pin useful sites for quick access. It’s important to get these favicons right so that regardless of where your site is pinned, your users will always get the best looking icon.

Favicons generally aren’t easy to manage. Because of the fragmentation of both mobile and desktop operating systems and browsers, catering to every device to ensure the best icon is used becomes a slow and tedious process. Sometimes you may have to manage 30+ resources for this task depending on how much support you want to provide.

However, thankfully there’s the Real Favicon Generator web service. This website takes you through a step by step process to quickly and easily generate all the favicons and web resources you’ll need.

Real Favicon Generator site

The Generation Process

Real Favicon Generator makes the whole process painless. You start by selecting your favicon and uploading it to the generator. When the page loads, you’ll see different screens for the different device targets.

Several of these sections offer similar options, such as being able to supply a dedicated picture to target the device, adding margins around the icon and applying background colors. Below are the main screens you can adjust, one for iOS, one for Android and one for others (Windows / Safari) respectively.

Favicon for iOS Screen

Favicon for Android Screen

Favicon for Other Screen

The visual interface makes tweaking your favicons easy, you can see exactly how your icon will appear when you pin your site to your device.

Besides actual favicons themselves, this generator will also handle the creation of a manifest file for mobile Chrome, along with other settings for pinnable tabs in Safari. These values are eventually turned into <meta> tags in the final output.

Using Your Favicons

When you’re ready to proceed, press the “generate” button. Once the page loads, it will give you the raw HTML you need to add to your site. Here’s an example of the output:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#cc0033">
<meta name="apple-mobile-web-app-title" content="Web Bird Digital">
<meta name="application-name" content="Web Bird Digital">
<meta name="msapplication-TileColor" content="#cc0033">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#cc0033">

The generator creates all of your <link> and <meta> tag elements based on the settings you provided earlier.

Now you just need to press the Favicon Package button to get your files. Once downloaded, just extract them somewhere and copy these icons to your site. As part of the generation process you can specify the directory if you will not be storing them on the site’s root location (for example storing them inside of a nested directory like /images/favicons).

Our Favicons Generated

Once you copy over your files and add your HTML to your site’s <head>, you’re good to go. When you pin your site on your device, your website will serve the best looking favicon to your users.

If you end up finding this service useful and find that it saves you time, you might consider donating a few dollars to them as a thank you (they even take Bitcoins!).

Extra Functions and Options

Besides generating favicons, the Real Favicon Generator service lets you check if your website is serving all the required favicons you need, giving you a breakdown of what you could be missing.

Favicon Checker

Favicon Error Results

Favicon support is continually evolving, so this is a great tool to ensure you are serving up the best favicons and resources you can.

More:
  • Thank’s

  • M S i N Lund

    Nice, ill try it.

    This mess of a meeelion different files and sizes is getting ridiculous.

    I thought we had our site covered, but just discovered that Android 6 now needs yet another slightly different version.

    And of course it cant just use any of other, but instead breaks silently and just puts a letter for the icon.

    I wish they could just all download the same single svg, and then do whatever they need to it.

    • simon codrington

      When you only needed a few of the sizes it was entirely manageable. However now that you need 30+ files to cover all your bases it’s great to defer this to a web service. They seem to be all over trends / new features like the safari pin icon so it gives me peace of mind.

      Be great if they could all use a vector to get the sizes they need.

    • pbernard

      That’s right, browsers and platforms require way too much icons. However, a single SVG, one-size-fits-all icon is not the ultimate solution. Each platform comes with its own design guidelines and it’s actually a good thing to be able to design icons a platform at a time.

      The real issue right now is the amount of generated icons. In particular, you don’t need all the Touch icons, from the basic 57×57 to the latest 180×180. Next version of RealFaviconGenerator is going to create much less icons, yet keeping the compatibility with all browsers.

  • Lars Gyrup Brink Nielsen

    My tool of choice :-) Always up-to-date with latest features, easy to use, what’s not to like?

    • simon codrington

      Agreed, it’s a pretty awesome awesome service. Saves me heaps of time getting up and running

    • pbernard

      Thank you!!

      What not to like? The size of the generated code. From the beginning I have been moderately satisfied by it. All these similar lines look somehow wrong. I’ve made a bunch of testing these last few months and by default the next version of RFG will generate much less icons and code, while keeping the compatibility.

  • Nice tool! Fixed several issues that were present earlier in my site’s favicon/s.

    • pbernard

      Thanks :) I’m glad the service was helpful!

  • tkapler

    Please – never ever use background color for windows 10 icon – many users do have a background image and use only transparent tiles on their start screen

  • Aleksej Dix

    i am sorry to say, but the manifest.json is out of date. and it needs to be updated to version 2
    just inspected this on chrome mobile debuger

Recommended
Sponsors
Get the latest in Front-end, once a week, for free.