Quick Tip: Add Favicons Quickly and Easily to Your HTML
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.
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.
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).
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 support is continually evolving, so this is a great tool to ensure you are serving up the best favicons and resources you can.
