A favicon is the tiny square image that appears next to the address bar in your browser. Adding a favicon to your web site takes less than five minutes. You can do it while you wait for your tea kettle to whistle and it really tightens up your image. A favicon completes the branding of your web site, makes it easier for people to find you in their bookmarks/favorites, and shows the world that you pay attention to detail.
Favicons are only 16 x 16 pixels, so the images used for them are very simple (often logos). To make your own favicon:
- Crop your logo (or another image evocative of your business)to a perfect square, using an image-editing tool like Photoshop. OR, use a tool like favicon.cc to draw your image pixel by pixel.
- Reduce the image to 16 x 16 pixels to see how it will look.
- Save your image as a GIF or JPEG.
- Visit Dynamic Drive and upload your image.
- Click the “create icon” button.
- Download your favicon and save it somewhere you’ll be able to find it. Do NOT change the name of this file. It needs to be called “favicon.ico” in order for browsers to recognize it.
- Upload the favicon to the server where you host your web site.
- Paste the following line of code into the <head> section of the pages on your site: <link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico”>
You may have to wait a few hours before the favicon starts showing up in browsers. If you still don’t see it the next day, you may have made a small mistake somewhere along the way. Check to make sure you haven’t changed the name of the file, and that your favicon is saved into the same folder as all of the pages on your web site. If you’ve put it in a separate folder like “/images,” then the code in the <head> will need to say href=”images/favicon.ico” instead.