Category : Html | Author : Chtiwi Malek | First posted : 10/21/2012 | Updated : 11/27/2012
Tags : favicon, icon, favicons, favorite, markup, html5, website, how to
How to setup a Favorite icon for your website

How to setup a Favorite icon for your website

What's a Favorites Icon ?

The favorite icon is a custom icon you can display to your visitors just before to your domain name in the address bar, you can show your organization logo, a mascot… when users add your website to their favorites the icon will be shown too along with the page/website name.

Using a favorite icon doesn’t have an impact on your site speed or performance because the file is too small and it will cached.

Creating a Favorite Icon

Even if some browsers like firefox accept and display a Png, Jpg or Bmp formats.. The favorite icon should be in .ICO format, 16x16 pixels and 256 colors.

So all you have to do is to create a picture (16x16 px) with any graphic software like Photoshop, paint shop pro … Draw your graphic and save to a Windows Icon Format (.ICO) under the name “favicon.ico”

You can also use an icons creation dedicated software like Axialis IconWorkShop.

Setup a Favorite Icon on your website

If the browser doesn’t find an explicit icon markup in the Head section of your page, it will look for a file named favicon.ico in your root directory, so you can just copy the favicon.ico to your root directory ( and your icon will be displayed for your entire domain (all your website pages).

if you need to place your favicon file in a directory or need different favicons for different sections you will have to add this line to each page in your site (in the head section) :
<link href="/your_dir/favicon.ico" rel="shortcut icon" type="image/x-icon" />
About the author :
Malek Chtiwi is the man behind
34 years old full stack developer.
Loves technology; but also likes design, photography and composing music.
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :