Create A Favorite Icon

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?

Favorite icon step 1

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.

Favorite icon step 2

STEP THREE

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

Favorite icon step 3

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" />

« More Photoshop tutorials