Favorite Icons


One of the little things that often is overlooked by many webmasters is to create a favorite icon or favicon for their website. A favicon is that small 16x16 pixel image that people see on the address bar of their web browser when they visit your website, and it is also used when your website is bookmarked or saved as a favorite by people. It can immediately make your website more recognizable and should be a part of every webmasters branding of their website.

To create a favicon you can do several things. If you already have a logo try making a smaller version of it and see how it looks. Remember favicons are 16x16 pixels, not a very large canvas to work with. There are not a lot of logos that work at that size. Your favicon does not have to be your logo exactly either. You can take an object from your logo or perhaps just a letter. If you are using Photoshop you can install a free plugin from Telegraphics that you can use to export your graphic as an .ico file. Inspiration Bit has a good post about creating a favicon with Photoshop.

Free FaviconIf you only have to create the occasional favicon, and don’t want to bother with a Photoshop plugin you can create an image in gif, jpg or png format and use a favicon from picture generator to create your favicon. I got tired of always having problems connecting to other favicon generator websites on the Internet so I went and made my own website at FreeFavicon.com. Once you have your image simply go to FreeFavicon.com, click browse to select your source gif, jpg or png image and click FavIcon Go! You will then be given a preview of your new favicon and a download link to download a zip archive of your new favicon, an animated favicon and a readme file.

Don’t feel creative to make your own custom favicon? FreeFavicon.com also has a gallery of favicons that you can download and use as your own for your website. There are currently five main groups of favicons: business, flags, network, objects and software. If you can’t find a favicon from the gallery, it might give you some inspiration for what your favicon should be.

The last thing you need to do is upload your new favicon to your web server. If you put it in the root of your website then most web browsers will actually look for it there without having the link code in the header of your web page. To make sure that web browsers find your favicon though you can add code similar to this to make sure they find your beautiful new favicon.
<link rel="shortcut icon" href="http://www.yourdomain.com/favicon.ico" />

Categories: web-design