Making a Favicon.ico
Thursday, July 12th, 2007Categories: General Web
RSS Comment Feed
Trackback
What is a Favicon.ico?
A Favicon.ico is an icon file used to replace the default website icon in the browser. Favicon is short for Favorites Icon. In Firefox, the default icon is a blank page, as seen in the following picture:
A customized Favicon.ico will appear in the browser’s window beside the address, in addition to in the Bookmarks or Favorites section. A custom Favicon.ico isn’t required, but does add little bit of a personalized touch to your website and helps users sort through and find your website among others in their Bookmarks. A custom Favicon.ico is seen here:
Details about the Favicon.ico
A Favicon, when displayed in the browser, has a tiny size of 16 pixels by 16 pixels. This means you don’t have a lot of room to work with and you have to carefully consider what you can fit in there and still keep legible.
Transparency is supported and this is especially important to make use of because your Favicon won’t always appear on a white background.
Making a Favicon.ico
There are different Favicon.ico makers and creators out there, unfortunately, some can impose restrictions like the number of uses, transparency, the size, etc. Note, you can use just about any Icon creator or Icon maker, but chances are there will also be restrictions.
There is a solution out there for making free Favicon.ico’s. Not only is it free, but it is browser based! That means no more Googling random sites and having to download untrusted executables. The fact that it’s browser based also means it’s compatible across all platforms.
This wonderful FavIcon.ico maker is available at HTMLKit.
When you get to the site, you can upload an image (32 pixels by 32 pixels or 16 pixels by 16 pixels). It can be a .PNG file with transparencies.
Once you hit Generate Favicon.ico, HTMLKit lets you download a Zip File containing:
- Your upload on a white background
- An animated .GIF of your upload
- The Transparent version of your upload
Given those options, you can pick whichever is suitable for your website.
Implementing a Favicon.ico
Implementing the Favicon is quite easy. Anywhere in your head tag (between <head> and </head>) simply place the code:
<link rel=”shortcut icon” href=”favicon.ico”>
If you changed the name of your Favicon or the location of the file, you would change the reference there was well.
See how easy that was?
Affordable & reliable dnn hosting service since 2004.
Related Posts
- Devil’s Advocate - Why You SHOULD’NT Validate Your Website
- Examples of Web Usability
- Ad Revenue Driven Websites - Step 1 - Brainstorming
