Icon Support: Difference between revisions
JohnCooley (talk | contribs) m (Capitolized an "i") |
JohnCooley (talk | contribs) (Added Chami icon creator) |
||
| (One intermediate revision by the same user not shown) | |||
| Line 46: | Line 46: | ||
You need a 16x16 pixel png for the favicon (though .ico files can | You need a 16x16 pixel png for the favicon (though .ico files can | ||
contain multiple sizes which are used for icon zoming and such). | contain multiple sizes which are used for icon zoming and such). | ||
Online converter: | |||
http://www.chami.com/html-kit/services/favicon/ | |||
===Available Icons=== | ===Available Icons=== | ||
| Line 53: | Line 56: | ||
===Other Sources for Icon Information === | ===Other Sources for Icon Information === | ||
http://www.thesitewizard.com/archive/favicon.shtml | http://www.thesitewizard.com/archive/favicon.shtml | ||
===Other Considerations=== | |||
If you would like to use the "favicon.ico" to track people adding a webpage on your site to their Internet Explorer favorites then you sould be able to accomplish this by making sure that you specify an icon file other than "favicon.ico" in you header. For example if you create "chalice.ico" then in your html header put the following: | |||
<pre><nowiki> | |||
<head> | |||
... | |||
<link rel="SHORTCUT ICON" href="http://www.uua.org/chalice.ico" | |||
type="image/x-icon" /> | |||
</head> | |||
</nowiki></pre> | |||
This way requests for "chalice.ico" would indicate using a browser like Safari or Firefox and requests for "favicon.ico" would mean someone using Internet Explorer had added a page to their favorites. | |||
Alternatively if you are doing analysis of your web logs you could simply count hits to favion.ico where user agent is Internet Explorer as being added to favorites and hits by other browser agent to favicon.ico would not indicate you had been bookmarked. | |||
Latest revision as of 14:23, 21 April 2005
Supporting Icons for Various Browsers
Favicon.ico
Simply place a file called "favicon.ico" in the root directory of the web server.
Example: http://www.uua.org/favicon.ico
Shortcut Icon
A bit more detail on this... And it works on most browsers (Opera and Mozilla), not just Netscape.
The below line will work fine and bring the UUA chalice graphic into your page... Then if UUA ever wants to track visitors they could actually get counts for us too (but that is a future). More important, the <link> should be in the <head> section, I would recommend adding the type="image/x-icon" attribute to the link.
<head> ... <link rel="SHORTCUT ICON" href="http://www.uua.org/favicon.ico" type="image/x-icon" /> </head>
In consideration of the UUA's bandwidth, I would recommend downloading the favicon.ico image from the URL above and copying it to the top directory of your website. You can then change the line above to:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Browser Support
- Internet Explorer:The favicon.ico file is ignored until a user adds the page to their favorites. Once the user does this IE will request http://<host>/favicon.ico from the server. It will then cache this icon and display it when the user looks at the favorites drop down menu. When the user hits the page that has been added to the favorites it will then display the icon in the toolbar, but for that page only. Since the First Universalist Church of Minneapolis site uses frames it will stay their if you have added the main page to favorites, but it for example you opened one of the pages in a new window it would not display. Since the browser caches the ico you know that all requests to "favicon.ico" indicate that the user has just added a page to their favorites. As far as I know IE does not support the header meta tag for icon files at all.
- Mozilla/Firefox/Safari:When you hit a page on a site it will display the icon designated in the header meta tag, or if this does not exist it will display the favicon.ico at the root of the server. This means different pages and virtual directories can have different icons. The browsers will display the icon in the address bar, on the tab if using multiple tabs, and if you add a "button" to the toolbar for the site. Mozilla and Netscape (the version I have tested anyway) do not change the icon for the bookmark. Firefox does support different icons for bookmarks. However, Firefox will not load the new icon until after the bookmark is used. Until that time Firefox will continue to display the default Icon.
Icon Editors
You can create your own favorites icons (or icons of any type ;) from png's with png2ico:
http://www.winterdrache.de/freeware/png2ico/
You need a 16x16 pixel png for the favicon (though .ico files can contain multiple sizes which are used for icon zoming and such).
Online converter: http://www.chami.com/html-kit/services/favicon/
Available Icons
http://www.uua.org/favicon.ico
Other Sources for Icon Information
http://www.thesitewizard.com/archive/favicon.shtml
Other Considerations
If you would like to use the "favicon.ico" to track people adding a webpage on your site to their Internet Explorer favorites then you sould be able to accomplish this by making sure that you specify an icon file other than "favicon.ico" in you header. For example if you create "chalice.ico" then in your html header put the following:
<head> ... <link rel="SHORTCUT ICON" href="http://www.uua.org/chalice.ico" type="image/x-icon" /> </head>
This way requests for "chalice.ico" would indicate using a browser like Safari or Firefox and requests for "favicon.ico" would mean someone using Internet Explorer had added a page to their favorites.
Alternatively if you are doing analysis of your web logs you could simply count hits to favion.ico where user agent is Internet Explorer as being added to favorites and hits by other browser agent to favicon.ico would not indicate you had been bookmarked.