Adding a Favicon to Your Website

My first experience with Favicons came a few years ago when they first started appearing. Just a little tiny image of something related to the content of the website. Every time a new one appeared, it would remind me of how important that site was, or it caught my eye and tempted me to visit rather than clicking through one of my other bookmarked pages. Now, as a Web Developer myself, I always add these little favicons to every site I design because they are terribly important in creating brand awareness and tempting visitors to come back.

web design

A favicon is a tiny little 16×16 pixel image that represents your website. It sits up in the address bar right in front of your website’s URL, and it appears in the bookmark list whenever someone bookmarks your site and wants to come back. They make your bookmark look much more appealing in the list, and give you a more professional look for visitors. And creating a favicon for your website takes only a few minutes, find more about this.

To begin, open up Microsoft Paint, or whatever image creation software you normally use. I recommend paint because these images are so small that you’ll have difficulty creating something really cool, so just use a basic painting program rather than bringing out all the stops. Once in Paint, drag the bottom right hand corner up to create a small 16×16 figure (look in the bottom middle of the screen, and you should see the dimensions of your image). Now, to zoom in, hold down CTRL and click Page Down.

Once you zoom in, you’ll see your workspace. It isn’t much, but it will have to do. I recommend creating your favicons with bold colors, not just black and white. Try to work in branding colors or images that relate to your website. If you’re running an advertising business, maybe a dollar sign is appropriate, whereas for a recipe site, I would try and create a small image of a pie. You can’t make it very detailed or clear, so even a rough sketch will do fine. Click CTRL and Page Up to see your image in regular view. Make sure it looks good, and then it’s time to upload it.

You need to save your image as “favicon.ico” otherwise the browser won’t know what to do with the image. Then, all you need to do is upload this image to the main directory of your website, and the browser will take care of the rest.

Some free webhosts will not allow you to create your own favicon, preferring that you use theirs or none at all. If you want to ensure that you can add a favicon to your website, consider getting paid webhosting.