Web Design and Development
Favicons – also known as favorites icons or website icons – are widely underused. These icons are associated with a url and are often displayed in the browser’s url bar, in the list or bookmarks, or even next to the page name in a browser’s tabbed interface. Additionally, when a url shortcut is placed on the desktop of Window’s operating systems, the favicon is also used to designate the site.
If a particular site does not have a favorites icon, an image resembling a blank white page is often displayed. Additionally, if you analyze your log/error files, you will notice lots of failed requests – 404 File Not Found errors – for a favicon.ico file. So, how do you create a favorites icon?
Well, the first thing you’ll need to do is select an image that you’d like to use. Open your image editor and scale or crop it to 16×16 pixels or 32×32 pixels. (Other square dimensions may work, but those listed here are standard.) Now, for maximum compatibility, save the file as in the .ico format. If this is not possible, you may alternatively save your image as a .gif or .png file using 256 colors setting.
You will also need to add some code within the <head> tags of your pages. See the example below:
<link rel="shortcut icon" href="http://www.url.com/favicon.ico" type="image/x-icon" />
If you have opted to save your file as a .gif or .png, be sure to edit the code above to include the right file ending, as well as your website’s url.
When done, simply upload your favorites icon and your revised files.
Clearly, favorites icons are not essential to your website’s operation. In fact, few visitors will even notice its existence. However, we do recommend their use. One large benefit for using them is that creating one can save your site some bandwidth. For example, if you have a custom 404 File Not Found error page, that file will be sent by your web server everytime there is a request for a nonexistent favicon.ico file. And if you have a lot of traffic to your site, this excess expenditure of bandwidth can get costly. But above all, we recommend creating favorites icons because it adds to the professionalism of a website.Tags: favicon