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 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.
STEP TWO
Now save your icon by naming it favicon and make sure the format is set to .ico as seen below:
STEP THREE
The final step is to add the following in the head section of all your pages:
1 | <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:
1 | <link rel="shortcut icon" type="image/ico" href="images/favicon.ico" /> |
Share This:
