Create A Favicon
Tutorial Category: Photoshop
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?
First thing to do is design yourself an icon. The icon’s size must be 16×16 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.
Now save your icon by naming it favicon and make sure the format is set to .ico as seen below:
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" />