Favicon::: Anarchy or evolution?

kgun · #1 (**permalink**) 02-20-2009, 12:57 PM

1. Background

Finally, I made an animated favicon on my site.

2. Problems

It is an animated rotating globe, but

only FF shows it animated.
Internet explorer 6.0 don't show it at all.
Opera show a static icon
Only opera shows it on sub pages (with code only on the home page)

3. What Wikipedia writes about favicons.

Favicon - Wikipedia, the free encyclopedia
"Introduction and standardization

The original means of defining a favicon, introduced in Internet Explorer 5, was by placing a file called favicon.ico in the root directory of a web server.[2] This would then automatically be used in Internet Explorer's favorites (bookmarks) display. Later, however, a more flexible system was created using HTML to indicate the location of an icon for any given page.
This is achieved by adding a link element to the <head> section of the document as detailed below. In this way any appropriately sized (16×16 pixels or larger) image can be used and, although many still use the ICO format, other browsers (though notably not Microsoft's Internet Explorer) now also support the PNG and animated GIF image formats".

4. HTML markup

HTML Code:

<link rel="icon" type="image/gif" href="styling/remote_a.gif">

As far as I have understood, that is the standard set by W3C.

5. Isn't there better standard / solution that

Show the animated icon?
Carries through to sub pages without need for separate code on each page?

Eg: A CSS style sheet or a JS solution?

**wige** · #2 (**permalink**) 02-20-2009, 01:17 PM

Well, you could always configure the browser to feed off Google's massive favicon database.

Use this URL: http://www.google.com/s2/favicons?domain=somdomain.tld

This will retrieve the favicon for basically every domain in Google's database. Want to set up your site so it automatically precedes links with the favicon for the domain? Try the following:

Code:

<a href="http://www.webproworld.com"><img src="http://www.google.com/s2/favicons?domain=www.webproworld.com" /> Web Pro World</a>

Example:

Web Pro World

However, animated GIF files are going to be difficult. Don't forget, GIF is a closed format, and many browser makers don't want to pay to license a technology for use in a free product. Rendering GIF files on page is often done by calling a library in the rendering engine or the underlying operating system. However, this may not be possible for icons displayed in the browser's own GUI.

The same thing goes for enabling alteration of the browser's GUI elements through Javascript or CSS. The favicon is not generally thought of as a design or style element, it is usually considered an associated media file. Having it defined in CSS is probably not appropriate. A more appropriate method may be the use of a header tag (not a head tag, a server response header) which can be defined site-wide or just for specific directories.

kgun · #3 (**permalink**) 02-20-2009, 01:34 PM

That is a third party solutions. I have had very bad experiences with third party solutions.

Dubbya · #4 (**permalink**) 02-20-2009, 02:57 PM

Kgun, not all browsers support animated favicons.

You'll need to specify the animated and non-animated images and let the browser decide which to display.

It's simple enough to do using two lines of code:

HTML Code:

<link rel="shortcut icon" href="/favicon.ico">
<link rel="shortcut icon" href="/favicon.gif" type="image.gif">

In IE, you will need to save the page to your list of favorites for the favicon to display.

In a dynamically generated page, you could use a browser detect script to write the correct tag as the page is being written to the browser.

It does not matter whether or not the page is in the root of the web or a subfolder. As long as the tag is pointing to the correct location of the .ico or .gif image, it should work.

.02

Orion · #5 (**permalink**) 02-20-2009, 10:21 PM

if you name your favicon favicon.ico and place it in the root of your public directory most browsers 6.0 and up will pick them up:
FF
Opera
Safari
Chrome
Funny enough IE 7 latest doesn't show them anymore

When you break way from the ico format and start playing with png or gif animations it doesn't work in all browsers..

if you name it favicon place it in the root AND add the HTML link I believe you get full coverage... I haven't played with the .gif and .png but could be worth a try .. see if it's the name favicon that most of them pick up on?

graphyx · #6 (**permalink**) 02-21-2009, 01:15 AM

Just to note: I use FireFox v2 and v3 for the Mac as well as Safari for the Mac. I clicked on your link and when the page loaded there was, for a brief two seconds what appeared to be a coffee cup surrounded on both sides by two curved arrows, static image and then a table of statistics came up and replaced it. I got that on both FF and Safari. I don't know anything about Favicons so I can't help you there but I just thought I would let you know what I saw when the page loaded. Good luck.

chillax · #7 (**permalink**) 02-21-2009, 02:22 AM

I believe you have give FULL URL and not just relative path to the directory that has the icon image.

Viewing the source of your page, try changing:

Code:

<link rel="icon" type="image/gif" ref="styling/remote_a.gif">

to

Code:

<link rel="icon" type="image/gif" ref="http://multifinanceit.com/styling/remote_a.gif">

Hope this helps

kgun · #8 (**permalink**) 02-21-2009, 10:25 AM

First of all, thank you very much for excellent feedback.

Quote:

Originally Posted by Dubbya

Kgun, not all browsers support animated favicons.

You'll need to specify the animated and non-animated images and let the browser decide which to display.

It's simple enough to do using two lines of code:

HTML Code:

<link rel="shortcut icon" href="/favicon.ico">
<link rel="shortcut icon" href="/favicon.gif" type="image.gif">

In IE, you will need to save the page to your list of favorites for the favicon to display.

In a dynamically generated page, you could use a browser detect script to write the correct tag as the page is being written to the browser.

It does not matter whether or not the page is in the root of the web or a subfolder. As long as the tag is pointing to the correct location of the .ico or .gif image, it should work.

Dubbya, I will study your solution for the first site, second link in my signature. For the moment lets abstract from the FF specific feature (the only browser that so far support animated favicons as far as I know) and Opera specif features (as a default carrying the favicon from the home page to the subpages in other folders of the site).

Thank you Dubbya, much appreciated. One question. I also noted the rel="shortcut icon" attribute in some web articles. What is the main point with that attribute on the favicon?

kgun · #9 (**permalink**) 02-21-2009, 10:35 AM

Quote:

Originally Posted by Orion

if you name your favicon favicon.ico and place it in the root of your public directory most browsers 6.0 and up will pick them up:
FF
Opera
Safari
Chrome

That was how I thought it functioned before I started searching and reading.

Quote:

Originally Posted by Orion

Funny enough IE 7 latest doesn't show them anymore

Microsoft and web standards. They don't always set them, even if Microsoft invented the favicon according to the Wikipedia article in my first post.

Quote:

Originally Posted by Orion

When you break way from the ico format and start playing with png or gif animations it doesn't work in all browsers..

if you name it favicon place it in the root AND add the HTML link I believe you get full coverage... I haven't played with the .gif and .png but could be worth a try .. see if it's the name favicon that most of them pick up on?

That is how I have done it on the site in the last link in my signature.

First Markup (yesterday) with this png icon:

HTML Code:

<link rel="icon" type="image/png" href="favicon.png">

in the root folder of the add on domain.
Second Markup (today) with this Windows Icon ICO (above png file saved as ICO - Windows Icon in IfranView):

HTML Code:

<link rel="icon" type="image/ico" href="favicon.ico">

in the root folder of the add on domain.

Very interesting observation:

The browsers (at least Opera) has a memory (even after reloading the browser):

Showing original (yesterdays) png favicon (white background) on the home page.
Showing new (todays) ICO favicon (black background) on sub pages.

Question to the experienced favicon users.

Will the new ICO (black background) file take effect on all pages after a while or do I have to set something in the Opera browser back to default, delete the png file http://www.oopschool.com/favicon.png or similar?

kgun · #10 (**permalink**) 02-21-2009, 10:44 AM

Quote:

Originally Posted by graphyx

Just to note: I use FireFox v2 and v3 for the Mac as well as Safari for the Mac. I clicked on your link and when the page loaded there was, for a brief two seconds what appeared to be a coffee cup surrounded on both sides by two curved arrows, static image and then a table of statistics came up and replaced it. I got that on both FF and Safari. I don't know anything about Favicons so I can't help you there but I just thought I would let you know what I saw when the page loaded. Good luck.

I know there are problems on some computers, especially if you have disabled JavaScript, images and not installed Java, that is required for the exchange rate table. Because of Web 2.0 and AJAX web applications, this will become a lesser and lesser problem IMO.

Worse in my personal opinion, the site is not adapted to the mobile revolution (that is now discussed in GSMA Mobile World Congress | 16-19 February 2009 | Barcelona, Spain - Homepage - much of interest happening there e.g. like mobile banking).

gavinscott · #11 (**permalink**) 02-23-2009, 07:34 AM

Hi Kgun
Further to what graphyx pointed out; the first time I loaded your page (Mac, Safari) the table took 20-30 seconds to load, although subsequently it loads almost instantly. It would be worth letting your first-time visitors know what they are waiting for, so they know it's worth the wait: I was expecting some kind of welcome animation!

kgun · #12 (**permalink**) 02-23-2009, 11:35 AM

Quote:

Originally Posted by Orion

Funny enough IE 7 latest doesn't show them anymore

The static version functions on my laptop with IE 7.

deepsand · #13 (**permalink**) 02-23-2009, 11:37 AM

Quote:

Originally Posted by gavinscott

... the first time I loaded your page (Mac, Safari) the table took 20-30 seconds to load, although subsequently it loads almost instantly.

By design, until you've cleared your cache, reloads draw from the cache, rather than from the site server, so as to give the speed increase you observe.

kgun · #14 (**permalink**) 02-23-2009, 11:43 AM

Quote:

Originally Posted by gavinscott

Hi Kgun
Further to what graphyx pointed out; the first time I loaded your page (Mac, Safari) the table took 20-30 seconds to load, although subsequently it loads almost instantly.

I have seen it lows fine without problems on mac's here in Norway. May be our broadband's are faster. The site is hosted in the USA. It is not so fast on my laptop. There is always room for improvement. If I get time, my priority is to develop a mobile version. I know it can be done with a CSS style sheets. Time is a limiting factor.

Quote:

Originally Posted by gavinscott

It would be worth letting your first-time visitors know what they are waiting for, so they know it's worth the wait: I was expecting some kind of welcome animation!

A dmoz editor once called it a monster site. After five minutes on the site she found a lot of valuable information. She wrote that she would spend hours on the site.

Never the less I see your point. IMO opinion it is better to improve the site. Again time is a limiting factor and the technological evolution works for it.

Peopleunit · #15 (**permalink**) 02-23-2009, 04:41 PM

Great, I see you've got your favicons working ok.

For anyone else coming upon this thread, here's a link to an online favicon generator. All you need to provide is the image file you'd like to convert to an icon file, and then download the files they produce (placed in a zip file that you download).

There's a good amount of supporting info so you understand everything, as well as a favicon validator in case you run in to trouble.

FavIcon from Pics -- how to create a favicon.ico for your website

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Favicon Tag?	frost	IT Discussion Forum	9	11-19-2008 04:12 PM
Favicon	Curve Appeal	Graphics & Design Discussion Forum	3	06-14-2007 07:54 PM
Anarchy or pure competition online	kgun	Domain Discussion Forum	0	06-06-2007 06:36 AM
Favicon	souvik das	Graphics & Design Discussion Forum	3	10-06-2005 01:50 PM
WPW favicon.ico	wednesday	WebProWorld: Guidelines/Announcements/Suggestions	3	03-03-2005 04:03 PM