Learn Everything About Favicon (Favorite Icon)

A favicon.ico or favicon which is the short form of “Favorites icon” can be interpreted as a shortcut icon website icon, icon of the URL, or icon for the bookmark.

A favicon.ico or Favicon which is the short form of “Favorites icon” can be interpreted as a shortcut icon website icon, icon of the URL, or icon for the bookmark. It is general a square icon of the size 16×16 or 32x 32 pixels. Microsoft was the first to introduce the favicon in internet 4. In the original Microsoft standard , a file called Favorites icon was placed in the root directory. If you wish to see the origin, legacy or technicalities of this subject we do advice you to see Wikipedia for more info.


What does a Favicon do?

It sits somewhere in the website quietly. A modern browser shows the favorite icon next to the website URL which you type in the address bar field.

How does a favicon help?

Often a majority of designers consider Favorites icon as a part of the template design process instead of ignoring the favicon as an unimportant part. If integrated successfully into the website it can simply enhance the visibility of the website in a multi-tabbed browsing environment and user could easily distinguish the tab representing various sites in use at that point of time.

Do I need a favicon?

If your website uses a specific color theme, a logo or an industry specific content  then why not use a favicon. Maybe it will add to the professional outlook of your website. Well also many of the content writer ignore basic color theme of the websites and also a whole bunch of keywords are dumped on the user saying that I don’t care for images as the search engines can’t read images. But it is you and I, also a lot of human who actually want to see neatly presented content with images, icons ,clip art and of course a favicon. Also you can search our free icons page for PSD icon styles. PSD icons will help you to create favorite icons for your web pages.

How do I install a favicon?

Usually a Favorites icon is coupled with webpages, it can be installed in a website by various means. Even though if a favicon is not integrated by the template designer or your website designer if you can access the server, the Favorites icon icon can be put on the server into the same directory as the webpages. There might be some help page depending on which software system or CMS.

If interesting a favicon to your website (html site or CMS like WordPress) please use like this;

    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />

Open your index.html file or header.php and add before body tag.

In the next article we will teach you how to use favicon on mobile devices and how to create favicon online.


  1. Thanks you so much for share with us. Excited to see mobile favicon design.


  2. Jenna

    Thanks you my friend great article for beginners like me. Favicon’s are important section for web design projects.

Comments are closed.