Oh my god! favicon.ico tutorial!

[SIZE=1]many people may visit a certain website, bookmark it, and notice when they go to check it later that bam! the boring old IE favorites icon is gone and replaced with some other, custom-made icon.

just in case you pixel-artists (and others) don’t know this, here is a short (hopefully) tutorial on how to do this. i’ve had many people ask me, and it’s surprising how many of us have no clue at all how to do this! :stuck_out_tongue:

note: this tutorial will only work for IE 5+

when IE is looking determine what icon to display in your favorites list, it asks your server for a file named favicon.ico. If the file is returned, then the image in that file is used. If not (often the case), IE simply adds the default logo beside it. At the same time, your Web server takes note that a file that does not exist (favicon.ico) was requested, and records that in your server logs as a “not found” error, even though no error message is ever sent to the user’s browser.

All you have to do to customize your icon is create an icon in the proper format, name it favicon.ico, and place it on the Web server in the root directory of your site. When IE looks for favicon.ico, it will find your file, and use the icon it contains instead of the default, thus eliminating a 404 from your logs as well! :stuck_out_tongue:

Creating the Icon:

  1. IE only accepts favicons that are size 16x16, a perfect size for you pixel-artists! Create an image in the graphics program of your choice, then save it as a .bmp file.

  2. After you have created your image, you will need to convert it into .ico format using a program such as IrFanView or the extremely popular [URL=http://www.microangelo.us/]MicroAngelo.

  3. Save the file, and upload it to the root directory of your server. Now, when users bookmark your site, the new icon will be placed in their menu!


Now, I know that some of you have free web servers, but fear not! You can still create a custom favorite icon by using the following code in the < HEAD > section of your page:

<LINK REL="SHORTCUT ICON" href="/myfreehost.com/mysite/myicon.ico>

[/SIZE]

[SIZE=1]This code could also be used to create different favorite icons for each page of your site if you’re feeling so inclined!

Enjoy![/SIZE]

wow! i have always wondered that! hehe! now is this the same for the address bar too?

mdipi -

it will show up on your addess bar after you add the page to your favorites list :stuck_out_tongue:

ohh i see. Because before i have been to pages where it shows up in the address bar befor i added it to my favorites.

it doesnt werk…

Hehe there are a few things to add though:
-netscape AUTOMATICALLY adds the icon in the address bar, even if you’ve not bookmarked the page.

  • you dont any any program to create the icon file. just rename you’re 16x16 .bmp in a .ico and that should work !!!

…thats netscape, my tutorial was for IE. mdipi, why do you think its not working?

and mlk, it’s much better protocol to actually use a program to convert the file into an icon. thats like saying - lets take this .wav file and simply change the extension to .mp3 and expect it to work…

HEY THANKS!!! I NEVER COULD FIND A TUTORIAL FOR THIS BEFORE!

Nice job liam :wink:

thanks =)