How to create Favicon

What is Favicon?

A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16, 32×32 or 64×64 pixel square icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab. – wikipedia

File that need to download

  1. ICO Format(Extension) Element Plugin for Photoshop: Download Here
    Place downloaded file into your photoshop plugins folder: \rootFolderPhotoshop\Plug-Ins\Extensions\

How to create Favicon?

First of all, find an image as your favicon. Use Adobe Photoshop, resize (ctrl+alt+i) the image to 32px X 32px or 16px X 16px(Select Bicubic Sharper from the dropdown), click OK.Then save(crtl+shift+s) the image in .ico format (This format will only be available in Photoshop after you download and install the plugin)

Now we have done the Create part.

How to add Favicon

This is the most easy part, place the favicon image that we made just now into your images folder(it doesn’t matter where you want to put into, but make sure the image path is correct)

Now we need to edit the html file where you want to place the favicon. Place below code before the </head> tag:

<head>
<link rel="shortcut icon" type="image/ico"  href="http://yourdomain/your-favion-url.ico" />
</head>

Replace this http://yourdomain/your-favion-url.ico with your favicon path and you are done!

” For WordPress user that do not have basic HTML knowledge and do not have a clue what I posted about above. You guys can download ready to go favicon plugin for wordpress here: MaxBlogPress Favicon