Apex and favicon

As usual this started as "just-gimme-five-minutes-and-i'm-done!"...

Three hours have gone, but, at least, now i can write the ultimate posting about Oracle Application Express and favicons.

I've just wasted enough time on this stupid exercise so, i am not going to make the story long.
I even take for granted that you know what a favicon is! ;-)

The method i suggest works with Internet Explorer 6 and 7, Firefox 1.0 through 2.0, Opera 9.2 and, i am told, Safari for Mac.

Ready, set, go:
put the following line in the page template header (somewhere between the opening and closing HEAD tags) if you want to display the favicon on all pages using such template.

<link rel="shortcut icon" href="home/favicon.ico" type="image/x-icon"/>

typically home should be the root folder of your site, however the favicon mechanism works also if you specify a path like #APP_IMAGES#favicon.ico, supposing you have loaded the image favicon.ico into the static images application repository. If the image wasn't associated to any application, then you'll have to use #WORKSPACE_IMAGES# instead, however keep in mind that for heavy-duty sites there is a significant performance impact when serving images from the Apex repository, so it is strongly recommended that you place icons on the web server.

If you store favicon.ico in the root folder, then you can replace home/favicon.ico with www.yourdomain.com/favicon.ico or just /favicon.ico.

If you prefer, you can specify the above LINK tag instruction in the Page header section of the desired pages in case you don't want to put it at the template level.

When the favicon.ico doesn't display, it's always a good idea to double check the source of the returned page, it's easy to forget a slash or add one too many.

There are a number of sites giving instructions about how to put a favicon, but not all of them mention the TYPE attribute. I found that without TYPE attribute, Internet Explorer 7 refused to load the favicon under certain conditions, so i recommend that you specify it at all times.
Also, you can check the image encoding returned by the web server, from this link: web-sniffer.net

Enter the full path to the favicon.ico in the input field and press submit.

I also found some sites and forums echoing the myth of "favicon MUST reside in the root folder", which probably was true some time ago, but not necessarily with the newest browsers.
Clearly if you opt for the root folder, chances are that the favicon can be displayed by older browsers.

I mean, placing it in the root folder is a good thing in general, but it is not sufficient to make it work under all circumstances.

Firefox 2.0 allows you to specify icons in different formats, like GIF, but Internet Explorer is more picky on this subject and wants an ICO image.

If you don't mind about older browsers you don't even need to call it favicon.ico, i saw more than one site where the favicon had a different name altogether, albeit the .ico extension was present.

Last but not least, if you are going to implement your favicons, do not forget to erase the web cache of Internet Explorer (and perhaps Firefox too...), otherwise you may find yourself
scratching your head and asking why this stupid favicon doesn't display after all.

Every tutorial is no-good without at least one practical example, so, let me copy the source code of my newly favicon-enabled web site: www.yocoya.com.

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

So, this is how i spent the last three hours.
Very useful indeed.

Hope it helps.


PS: if you can't yield to the temptation of trying out your apex favicon, but you don't know how to get your logo in this format, have a look at this site. I guess you must supply a 16x16 or 32x32 pixels to start off.

Updated January 22, 2010
If you installed Photoshop or Photoshop Elements on Windows or Mac OS X, from the following page you can download a plugin for opening and saving images in ICO format.
With my Photoshop Elements 6 on Mac OS X 10.6.2, i downloaded the Mac CS3/CS4 version and installed it in less than a minute. Two minutes later i had already saved the image as ICO (after restarting PSE) and it worked like a charm.
Cool!