Create a favicon for your website

Posted on June 25, 2007 
Filed Under Website Tips

Favicons are those cool little website icons associated with a particular website. This custom icon appears next to the website’s URL in the address bar of a web browser.

Common examples include: Google, Microsoft, Yahoo

Favicons

How to add a favicon to your site

You will need a Windows Icon file (.ico) that is uploaded to the main directory of your website.

By default, name your custom ico file ‘favicon.ico’

How to create a favicon

You will need to download the FREE ICO plugin which is compatible with Adobe Photoshop, Adobe Elements or Paint Shop Pro for Windows or Mac. This small plugin gives you the ability to Open and Save Windows icon file with your favorate graphics program.

After you have installed the free ICO plugin, create an image 16×16 pixels in size. I prefer to start working with a 64×64 images size, then resize image to 16×16.

Sample Favicon Size

Save your new file in the .ico format: ‘favicon.ico’

Uploading the icon

Upload the ‘favicon.ico’ to the directory where your home page sites. In most cases there is where you ‘index.php’ or ‘index.html’ file sits.

That’s it! Visit your site and view your new and cool little icon.

Some web browsers will look for a direct link to the icon, use the following code on all your pages in the <HEAD> section.

<link rel=”Shortcut Icon” href=”/favicon.ico” mce_href=”/favicon.ico”>

Great favicon utilities:

 

 

 

 

Comments

Comments are closed.