Bill Henry-
Brussel Sprout Connoisseur
I’m so proud of myself. After several weeks of wading though a lot of misdirection, I finally got my “favicon” to work.
A favicon is a tiny icon to the left of the address bar in your browser.
Depending on the browser, favicons may also show up in your “Bookmark Menu”, as well.
The Grumble has one as well as most commercial web sites. Each one is unique and can spiff up your web page and make it look more professional.
Most sites use their logo, although in my case I chose not to because it’s too cluttered. Instead, I chose to use a small version of my Molly avatar.
If you’re interested, these are the steps:
1. With your image editing application, create a page size of 16 pixels by 16 pixels at 72 ppi.
2. Create a palette of no more than 16 colors, preferably a Windows color palette.
3. Enlarge the window to, perhaps, 400%. Use a pencil tool with a diameter of one pixel, and play around creating your image in this 16 by 16 grid.
* Reduce this window size to 72 ppi occasionally to see how the small version will finally appear.
4. Once you’re happy with the results follow steps 3. and 4. in Step OneA., below
1. If you wish to use an existing image like your logo, download it into your favorite image editing program. Resize it to a 16 pixel by 16 pixel image.
* Many logos do not survive this step because if it has a lot of fine detail, much of it may be lost when it is reduced this much.
2. If the image seems to be okay, change the number of colors in the palette of the icon to no more than 16 – fewer than 16 is fine.
* Most logos use fewer than 16 colors, so you should be okay.
3. If your image editing software has the capability, save this icon with the name and extension “favicon.ico”. Dot ico is a Windows proprietary format, I think, so if your using Photoshop, you may have to save this tiny image as “favicon.bmp” @ 72 ppi.
4. If you have saved this as “favicon.bmp”, you need to convert this to “favicon.ico”. Simply by changing the extension will not do it. You must have to try to find another utility to do it.
* I use a Mac, so I used my copy of Graphics Converter. You can download it as a trial subscription at no cost at http://www.lemkesoft.com/download.html , but it is well worth the few dollars to get a registered version.
Note: it is essential that the icon be kept simple so that it will be clear and recognizable at such a small size.
1. Publish the favicon.ico into the root directory of your web site. The favicon cannot be in a sub-folder!
* The root directory is where browsers will automatically look for the favicon when a visitor bookmarks your site.
* The favicon must be no larger than 16 x 16 pixels with maximum of 16 colors.
* Colors should be Windows standards, but that isn't critical I don't think.
2. Direct the browser to find the favicon by placing the following line in the Index.html, somewhere between the <head> and </head> tags:
<link rel=”shortcut icon” href=”http://www.yourwebsite.com/favicon.ico" mce_href=”http://www.yourwebsite.com/favicon.ico”/>
* Place this line nearer the closing </head> tag, because more important information, such as your meta tags, should come earlier.
3. Save your web page and publish it.
* If you want to create different icons for different pages, simply call them something other than favicon.ico, but still retaining the .ico suffix
* Link to them in your pages in the same way as above, by changing the href location for the different icons.
Note: If the favicon doesn’t show up when you access it, try refreshing the page. If it still doesn’t work, then you have flubbed up a little. But, don’t worry, you can leave the code and the favicon.ico where it is until you fix it. You web site should not be affected with either a lousy icon or incorrect code in the Index.html page.
Note: if you need additional help or suggestions, try these following links:
http://www.favicon.com/
http://www.jessett.com/web_sites/graphics/favicon.shtml
http://www.favicon.cc/
http://www.html-kit.com/favicon/validator/
This favicon trick should work for most recent browsers. I have tried it in FireFox, Netscape Navigator, and Safari and it works jes’ fine.
My version of MS Internet Explorer: Mac is old, so it doesn’t support favicons.
A favicon is a tiny icon to the left of the address bar in your browser.
Depending on the browser, favicons may also show up in your “Bookmark Menu”, as well.
The Grumble has one as well as most commercial web sites. Each one is unique and can spiff up your web page and make it look more professional.
Most sites use their logo, although in my case I chose not to because it’s too cluttered. Instead, I chose to use a small version of my Molly avatar.
If you’re interested, these are the steps:
Step One. - Creating the favicon from scratch
1. With your image editing application, create a page size of 16 pixels by 16 pixels at 72 ppi.
2. Create a palette of no more than 16 colors, preferably a Windows color palette.
3. Enlarge the window to, perhaps, 400%. Use a pencil tool with a diameter of one pixel, and play around creating your image in this 16 by 16 grid.
* Reduce this window size to 72 ppi occasionally to see how the small version will finally appear.
4. Once you’re happy with the results follow steps 3. and 4. in Step OneA., below
Step OneA - Creating the favicon from an existing image
1. If you wish to use an existing image like your logo, download it into your favorite image editing program. Resize it to a 16 pixel by 16 pixel image.
* Many logos do not survive this step because if it has a lot of fine detail, much of it may be lost when it is reduced this much.
2. If the image seems to be okay, change the number of colors in the palette of the icon to no more than 16 – fewer than 16 is fine.
* Most logos use fewer than 16 colors, so you should be okay.
3. If your image editing software has the capability, save this icon with the name and extension “favicon.ico”. Dot ico is a Windows proprietary format, I think, so if your using Photoshop, you may have to save this tiny image as “favicon.bmp” @ 72 ppi.
4. If you have saved this as “favicon.bmp”, you need to convert this to “favicon.ico”. Simply by changing the extension will not do it. You must have to try to find another utility to do it.
* I use a Mac, so I used my copy of Graphics Converter. You can download it as a trial subscription at no cost at http://www.lemkesoft.com/download.html , but it is well worth the few dollars to get a registered version.
Note: it is essential that the icon be kept simple so that it will be clear and recognizable at such a small size.
Including the favicon in your web pages
1. Publish the favicon.ico into the root directory of your web site. The favicon cannot be in a sub-folder!
* The root directory is where browsers will automatically look for the favicon when a visitor bookmarks your site.
* The favicon must be no larger than 16 x 16 pixels with maximum of 16 colors.
* Colors should be Windows standards, but that isn't critical I don't think.
2. Direct the browser to find the favicon by placing the following line in the Index.html, somewhere between the <head> and </head> tags:
<link rel=”shortcut icon” href=”http://www.yourwebsite.com/favicon.ico" mce_href=”http://www.yourwebsite.com/favicon.ico”/>
* Place this line nearer the closing </head> tag, because more important information, such as your meta tags, should come earlier.
3. Save your web page and publish it.
* If you want to create different icons for different pages, simply call them something other than favicon.ico, but still retaining the .ico suffix
* Link to them in your pages in the same way as above, by changing the href location for the different icons.
Note: If the favicon doesn’t show up when you access it, try refreshing the page. If it still doesn’t work, then you have flubbed up a little. But, don’t worry, you can leave the code and the favicon.ico where it is until you fix it. You web site should not be affected with either a lousy icon or incorrect code in the Index.html page.
Note: if you need additional help or suggestions, try these following links:
http://www.favicon.com/
http://www.jessett.com/web_sites/graphics/favicon.shtml
http://www.favicon.cc/
http://www.html-kit.com/favicon/validator/
This favicon trick should work for most recent browsers. I have tried it in FireFox, Netscape Navigator, and Safari and it works jes’ fine.
My version of MS Internet Explorer: Mac is old, so it doesn’t support favicons.
