Get yourself noticed with a Favicon!

In this instructable i will show you the necessary steps to adding a custom icon to your website or homepage. This shows up when you create a shortcut to the webpage, in the browser address bar and in your favourites/bookmarks.

Step 1 Create the icon

Icons use the file extension .ico. A website that has a .co.uk or a .com address will automatically look in the root folder of that site (the folder in which the homepage is located) for a file called favicon.ico.

These icon files can be made in a range of sizes, the most common of which is 32x32 pixels. That isnt a lot of space to display a picture, but a logo seems to work quite well. To create an icon file, you can use a graphic suite such as photoshop (see How to make curosors using photoshop).

I used Jasc PaintShop Pro 8. This software doesnt support the .ico file format, so i scoured the internet and after a little googling i found an online service that will convert .jpg and .gif files to icon files for download. This site is Favicon generator.

Comments

[AnimatedFavicons]

To spice up your favicon, try the animated one, just be subtle, not flashy. It needs special head code. Check out the Angel of the Garden (Cathetel) for Head Section code and tips.

[Jfaranda7]

all you have to do is save it as a png then rename it as a favicon.png to favicon.ico, and u can link it to any image file it doesnt need to be favicon.ico.

[xACIDITYx]

Icons are different than .png's. Icon's are multiple pictures saved as a single ico file.

[zachninme]

<link rel="shortcut icon" href="images/favicon.ico">

That is KEY, and the standard. Some browsers won't look for /favicon automatically.

[whatsisface]

I believe that firefox does.. Stopped using IE a while ago.

[zachninme]

Firefox is the only one, I think. Seamonkey, based on the same stuff, doesn't. Neither does Opera or Epiphany. And it doesn't matter what you use, its about the people :P If that were true, web development would be easy. (WE ALL HATE YOU MICROSOFT AND YOUR NONCONFORMITIES!)

[mikesty]

Good instructable, but I've read

{{{
<link rel="icon" href="http://example.com/favicon.ico">
}}}

Should also be thrown in there.

[whatsisface]

How do you mean? Do you mean to put that in cos its on the second page.....

[bhunter736]

Mine started working. Just needed the server to reset and buffers to reload. : )

[bhunter736]

I just tried this, and it didnt work for my .com site. I think I may need to get a server refresh before I will see it, I tried refresh on my browser. Anyway, I just wanted to share that The GIMP photo software will make .ico files and also you can do the old -save as- trick to convert another file to .ico. PS - mutant - very cool logo on your site!

[mutant]

paint can make .ico files too. Just save as 256 color bitmap and rename it to .ico

[mutant]

also for more professional icons (ones that have transparent backgrounds) you can use irfanview.

[mutant]

You can also take an animated gif image and rename it to a .ico and you get an animated favicon. It sounds bogus, but it works... check it out at my site. www.mutantsrus.com

[whatsisface]

nice, i wasnt aware of that