Jun 12, 2016
Easily add favicon to your website
Favicons give an identity to your website, helping to separate your site from the rest. The icons are increasingly more crucial as desktop clients and mobile devices let users pin useful sites for quick access. It’s important to get the favicons right so that regardless of where your site is pinned, your users will always get the best-looking icon. Here I shall explain how to easily add a favicon to your website.
Sometimes you may have to manage 30+ resources for this task depending on how much support you want to provide. For a number of devices and in various sizes. However, thankfully there’s the Real Favicon Generator web service. This website helps you through a step by step process to quickly and easily generate all the favicons for various devices.
Steps to create
Real Favicon Generator makes the whole process seamless. You start by adding your favicon and uploading it to the generator. When the page loads, you’ll see different screens for the different device targets.
In addition, there are various options
1) Being able to supply a dedicated picture to target the device
2) Adding margins around the icon
3) Applying background colors (Detailed article here How to add theme color for a website)
Usage of favicons
1) The generator creates all of your <link> and <meta> tag elements based on the settings you provided earlier.
2) Download and just extract them somewhere and copy these icons to your site. Preferably paste them in the site’s root location or you can store them inside of a nested directory like /images/favicons.
3) Finally copy over your files and add your HTML to your site’s <head>, you’re good to go.
Besides generating favicons, the Real Favicon Generator service also lets you check if your website is serving all the required favicons you need, giving you a breakdown of what you could be missing.
