15 replies to this topic

[Jacorre]

Have you ever seen the little icons appearing in the address bar at the top of your browser? Maybe you've seen it in your Favorites? Would you like to learn how to create one?



STEP ONE

First thing you'll need is the plugin to save an image in .ico format. Save the plugin in the following folder:

C:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\Adobe Photoshop Only\File Formats

STEP TWO

Next thing to do is design yourself an icon. The icon's size must be 16x16 pixels. Since we're working with such a small image, I like to zoom in to 1000% so I can see what I'm working with. I used the Pencil tool at 1px in size and created an icon that resembles my logo.



STEP THREE

Now save your icon by naming it favicon and make sure the format is set to .ico as seen below:



STEP FOUR

The final step is to add the following in the head section of all your pages:

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

Make sure the href defines the correct address to where you saved the image. So if you saved it in an images folder it would be:

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

[MK_LAGI]

Nice, but this isn't much Photoshop is it... Maybe you could show how to create different images....

[Jacorre]

Yeah I wasn't sure if I should post it here or not. It could be moved to Miscellaneous tutorials if someone wants to do that. I just thought since I was in Photoshop designing and saving the image it should be posted here. If I have time I may do more icon examples. Thanks!

[Indigo]

Great, thanks a lot!
This tut should be added to tutorial search, in case I forget where to find it:P
Anyway, great tutorial.

[Jacorre]

Thanks, glad you liked it!

[Scythar]

A while back i did the same, but somehow...
On my mac, using Safari i do see the favicon, but on my pc with IE i dont?
Dunno why though...
This was the trialsite: users.pandora.be/stranger

[Osmosae]

Internet Explorer doesnt make use of favicons if im not mistaken.

[Jacorre]

Correct. I do have them show up in my favorites in IE though.

[Matthew.]

they try and catch the ball but never do im afraid when it comes to IE lol.

Thanks for the plugin mate!

[TMZHosting LLC]

Awesome tutorial! I remember there was a generator somewere on the web for this. You make your image upload it and then save it as a .ico.

[Jem]

You don't necessarily need the plugin. If you create an image and save it with 256 colours as a .gif and then rename it to .ico, that'll work too

[Faken]

Internet Explorer doesnt make use of favicons if im not mistaken.

Of course it does.

Dan

[Dirk Black]

great tut, thx alot, and also to jem for the whole plugin bypass, the whole thing took me maybe 3 minutes

[Jacorre]

I never tried renaming it. I just assumed it wouldn't work. Thanks for the info! But if you'd like to use your icons on your desktop as well then it's always good to have the ico format!

[TMZHosting LLC]

I never knew that renaming it will work. I guess im going to have to try it.

[joberror]

java script:emoticon('', 'smid_5')

it is not until you make an icon before your logo can appear on the URL bar of any browser, you can simply create a PNG image of 16 by 16 and use it but just make sure the TYPE attribute in the LINK tag is specified as the file format of the image.

Example if you have the image as logo.png then

your LINK tag will be as follows

<link rel="icon" type="image/png" href="logo.png" />...................


[email protected]

Edited by joberror, 04 June 2006 - 11:51 PM.