|
|
|
|
How to create and install a transparent favicon.ico?
By Scott Seong
It has been nearly 6 years since I last built a transparent favicon (short for Favorites Icon), and I had to do it all over again. For those who may not know what favicon is, it is a small icon that shows up on the location bar of your favorite web browser. Favicon is also displayed beside your website name when a user bookmarks your website (i.e. Favorites), and on the title bar of a web browser tab for those browsers that support tabs such as IE 7.0 and Firefox 2.x.
We're going to use a PC Magazine freeware, IconEdit32, to create a favicon.
IconEdit32
Description: IconEdit32 is a 32-bit update to the PC Magazine utility IconEdit, by Michael J. Mefford. It's a complete rewrite, with no old code retained. Whereas IconEdit was limited to single-image, 32- by 32-pixel, 16-color icons, icons created using IconEdit32 can include all valid combinations of size and color depths-up to nine images. IconEdit32 runs under Microsoft Windows 95, Windows 98, Windows NT 4.0, Windows 2000 and Windows XP.
Version: 1.0.0.0 (537 KB)
Last Update: March 21, 2000
Author: Neil J. Rubenking (PC Magazine)
Website: www.pcmag.com/article2/0,4149,10210,00.asp
Download:  Download Now
How to create a transparent favicon file?
1. Create a 16x16 pixels image with your favorite graphics editor. You may restrict your image to 16 Windows colors to make it easier to edit. If you already have a logo, you may use Windows Paint Brush to reduce the size to 16x16, or create a new icon directly on the IconEdit32. Save the file in PNG file, or save as ICO file if you're using IconEdit32.
2. If you saved the file in PNG file format, convert it to ICO file with a conversion software. If you have the Adobe Photoshop, you may save it directly as a ICO file. You may use png2ico or IrfanView to convert a PNG file to a ICO file format.
Note*: IrfanView is a freeware image viewer that supports the Windows icon (.ico) image format. You may use it to shrink one of your existing image to a 16 x 16 pixels in size, decrease the color depth to 16 and save it as an icon (".ico") file. Shinking an image file (GIF, JPG, BMP or PNG) to 16x16 size, and renaming it to a ".ico" file extension will NOT make it an icon file.
3. Use the IconEdit32 to make the background color transparent. Select the Blue Backslash line, and click on the cells where you want to display transparent background.
How to install favicon on a web page?
1. Upload the favicon.ico file on the website, preferably in the document root directory. You may call it any filename to show a favicon on a location bar, but it has to be named favicon.ico to show up correctly on the bookmarked favorites.
2. On a webpage where you want to add favicon, place the following LINK tag inside the HEAD tag. This is generally included in a header file of your webpage, which is included in every page of your website.
<link rel="Shortcut Icon" href="/favicon.ico">
3. That's it. You now have your webpage with favicon. If favicon does not show on your browser location bar, try clearing the cache (Tools -> Internet Options -> Under General Tab (Browsing History) Click Delete Button -> Delete Temporary Internet Files). |
User Comments:
|
|
|
|
|
Current Users : 62 (Member 0)
