The favicon.ico image file is used to customise the URL display and bookmarks reference for a web site.
In many of the modern browsers the icon will appear both to the left of the URL text in the address bar, alongside the site title in the tab and likewise to the left of the title in the bookmark list.
By using the icon a website will stand out amongst a list of others.
The icon file is of either 16×16 or 32×32 pixels, with its own format, renaming an existing file to have the .ico extension will not work. The .ico file format is much like a JPG is different to a .GIF or .PNG.
Creating the favicon.ico File
There are a number of programs which may be used to create the favicon.ico file.
- The Gimp
Open a new file of size 16×16 or 32×32 and save it as type .ico. Continue to edit the file as normal. - Visual Studio
Open a new file of type icon. After editing the image save it with the name favicon.ico in the relevant directory before uploading it to the web site.
Converters are also available on-line
Including the favicon.ico file
Add the following code into the <head> of the HTML web page. <link rel=”SHORTCUT ICON” href=”http://www.yourwebsite.com/favicon.ico”>
Some exceptions to the above include:
- DotNetNuke
Simply include the file in the portal root - Joomla
The favicon.ico file is added to the /images directory. To specify a different location change the value for the Favourites Site Icon. This parameter is to be found at the bottom of the Sites tab under Site/Global Configuration. - WordPress
Modify the header.php file associated with your WordPress theme, adding the code detailed above. - Drupal The icon is added by modifying the web site template. Add the link code detailed above into the <head> of the template and set the reference to the location of the icon.
- Zen Cart
Add the icon file to the root of the website.
