Easily add favicon to your website

Joash Pereira
Jun 12, 2016 · 2 min read

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)

Screen Shot 2016-06-27 at 10.17.14 PM
Screen Shot 2016-06-27 at 10.17.14 PM

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.

Joash’s Blog

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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