How to create favicon for your site easily

What is a favicon?

Favicons are small square images usually 16×16 pixels which are used by web browsers to show a graphical representation of the site being visited at the left side of the browser’s address bar. You have probably seen many favicons before, even if you don’t know what they are. If there’s any doubt, the image below will help.

If you’re interested in understanding a piece of internet history, here’s a interesting fact:
The word favicon is a portamentau made out of the words “favorite” and “icon”, and it was named as such because it was first supported by Microsoft’s Internet Explorer 5 and just in case you don’t use IE, this browser bookmarking feature is called favorites.

What’s the purpose of a favicon?

Back in the early days of the internet, tools such as Google Analytics were mere dreams in the minds of a few web-nerds, so as strange as this may sound, at that time, favicons were used as a way to estimate website traffic by counting the number of visitors who bookmarked the page. (That’s another interesting snippet in the history of the internet!)
But interesting facts aside, the main reason for having favicons nowadays is to improve user experience. Favicons are used in all modern browsers at the address bar, in the links bar, in the bookmarking area and in its browsing tabs. Besides that, a few browsers also show favicons whenever you create a shortcut link for the corresponding website in your desktop and your mobile device.
Surely the main reason to have a favicon is the obvious improvement in user experience. A website without one will show a generic browser symbol on all the points-of-interaction I mentioned above, and if you care about your user experience, you must care about favicons.

How to create a favicon?

Creating a website favicon is easy as pie. As a matter of fact, you don’t even need to be a designer to do that. Surely it helps if you are, as you can put your skills to work and create something that really stands out, but even the less tech-savvy of us can do it in about 5 minutes or less, using the right tools.
The websites in the list below allow you to create a favicon simply by uploading a pre-existent image. So if you want to create a favicon for your brand, all you need to do is to upload your logo to one of the following sites and download the favicon file. Easy peasy, lemon squeezy.
Here’s the Favicon generator list you’re looking for:

• CoolWeb.info
• Favicon CC
• Favicon Generator
• Dynamic Drive Favicon Tool
• Chami Favicon Service
• Favicon Generator ORG
• Favicon UK
• Degraeve Favicon
• Anti-Favicon
• Gen Favicon
• Favigen 
  
  

  How to use your favicon?

  Once you have your favicon carefully designed, installing it on your server shouldn’t take more than a couple of minutes in two easy steps. For that you’ll need access to your website root folder and a text editing tool to change your website HTML code.
  

  Step 1

  You’ll need to upload the “favicon.ico” file to your server. In order to do that, point your browser address bar to your FTP server; your URL should look similar to this:
  

  ftp://username@yourwebsite.com

  Press enter and the browser will prompt you for an username and password before granting access to the file server. Once you’re in, just upload the “favicon.ico” file to the root folder and you’re done.
  

  Step 2

  Now you’ll need to edit your website HTML page to help browsers find your favicon image. Keep your FTP window open, find and download the “index.html” or “header.php” file from your server and follow the steps below according to the file you get:
  
  If your website is made of plain HTML, insert the code below in the HEAD area of the “index.html” file, and don’t forget to change “yoursite.com” for your own website address.
  
  

  <link rel="shortcut icon" type="image/x-icon" href="http://yourwebsite.com/favicon.ico">

  
  If you use WordPress, insert the code below in the HEAD area of your “header.php” file.
  
  

  <link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('url') ?>/favicon.ico">

  
  With that done, upload the file back to where you got it from. You’re done!
  On a matter of fact, most modern browsers are smart enough to find your favicon file even without any piece of code, but only as long as the favicon image has 16×16 pixels, it has been named as “favicon.ico” and is saved in the root folder of your website folder.