Joash’s Blog
Published in

Joash’s Blog

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.

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)

Screen Shot 2016-06-27 at 10.17.14 PM

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.



I’m a Designer/Developer. Welcome to my humble blog. I love designing, coding and blogging and taking great photos.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store