Do you have a question? Post it now! No Registration Necessary. Now with pictures!
- Posted on
November 23, 2008, 2:30 am
rate this thread
I am adding a Favicon as follows:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
I supose this is correct. Do I need to place the favicon on the site's
root or can I place it on a images folder and change the href.? For
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-
The favicon href is related with root of the page we surf, not
necessary the root of the site.
Per example you may have index.html on the root of the site and the
differents pages on pages/welcome.htm.
if you put favicon there -> pages/images/favicon.ico
your href of the welcome.htm page will be = href="images/favicon.ico"
if you put favicon there -> pages/favicon.ico
your href of the welcome.htm page will be = href="favicon.ico"
if you put favicon there -> favicon.ico
your href of the welcome.htm page will be = href="../favicon.ico"
if you put favicon there -> images/favicon.ico
your href of the welcome.htm page will be =
Someone may correct me if i have said something wrong.
This are simple example without speaking about the "base" - all infos
can be found there -> http://www.w3schools.com/TAGS/tag_base.asp
Yes, correct. But you can also use an 'absolute-path reference' by
adding an slash before the url:
whould refer to favicon.ico file in the site root, e.g. 'example.com/
would refere to the facicon.ico file in the images folder directly
under the site root, e.g. 'example.com/images/favicon.ico'
I.e. insted of 'href="http://www.example.com/images/favicon.ico ' you
could use 'href="/images/favicon.ico"'.
"A relative reference that begins with a single slash character is
termed an absolute-path reference."
That would be right, but I find it easyer to use a path relative to
the site root. Although, you would have to set up an web server to
make this work at your localhost.
I wouldn't mess too much around with the base tag. It will give you
more trouble than it solves.
It depends upon your priorities. How important is it that all
browsers (including ones that look in the root without looking
at the HTML) use your favicons? How important is it that you
serve up the favicon with the correct IANA Mime-Type instead
of a Mime-Type that works fine but is not technically correct?
How important is it to you to strictly follow the W3C standards
even though not doing so works fine?
If you just want it to work on most browsers, put it in the
image folder (see Raymond.Schmit's post for how to link to it).
If you want maximum compatability and maximum standards
compliance and don't mind overkill, do this:
In the webpage root, create these files:
NOTE: I have seen no evidence that any browser uses the larger
sizes in a multi-size .ico file, so I skip the 32x32, etc.
AddType image/gif .gif
AddType image/x-icon .ico
AddType image/vnd.microsoft.icon .icon
AddType image/jpeg .jpeg
AddType image/jpeg .jpg
AddType image/png .png
<head profile="http://www.w3.org/2005/10/profile ">
<link rel="shortcut icon" href="href="http://www.example.com/favicon.icon "
<link rel="icon" href="href="http://www.example.com/favicon.png"
What this accomplishes:
[A] Old user-agents that look for favicon.ico in the root find it.
[B] User-agents that follow the Microsoft standard
( http://msdn.microsoft.com/en-us/library/ms537656.aspx ) will find
favicon.icon with the correct IANA Mime-Type
( http://www.iana.org/assignments/media-types/image/vnd.microsoft.icon ).
[C] User-agents that follow the W3C standards
( http://www.w3.org/2005/10/howto-favicon ) will see favicon.png
with the correct IANA Mime-Type.
[D] any user-agent looking for favicon.gif/jpeg/jpg in the root will find it.
[E] The full URL in link rel tags makes it so this works wherever the webpage is.