Icon Support: Difference between revisions

From UUWiki
Jump to navigation Jump to search
(Updated Firefox bookmark icon)
m (Capitolized an "i")
Line 36: Line 36:
:'''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.  
:'''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.
:'''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===
===Icon Editors===

Revision as of 13:52, 20 April 2005

Main Page > Websters

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).

Available Icons

http://www.uua.org/favicon.ico

Other Sources for Icon Information

http://www.thesitewizard.com/archive/favicon.shtml