Favicons FAQs
Where are favicons
visible?
What web
browsers support favicons?
What are the pros and cons of making a favicon.ico package
that includes 32 by 32-pixel favicons in addition to 16 by
16-pixel favicons?
How do I associate my favicon with my web site?
Are all
favicon files named favicon.ico?
What are the advantages of naming a favicon something other
than favicon.ico?
What can I do if my favicon won't work with my https (secure
http) site?
Is there a way to force a browser to recognize my favicon?
Is there a way to prompt the user to bookmark my site?
Why don't favicons appear in the Internet Explorer address
bar as soon as a site is bookmarked?
All of my previously accumulated favicons disappeared when I
cleared my Internet Explorer cache, and they were replaced
by the standard blue "e" IE icon. Why?
How can I verify that I
correctly uploaded my favicon to my web site?
In addition to the browser's address bar (previously shown),
favicons appear in the following locations:
1. The history bar (this is the
list that drops down when you click on the down arrow on the
far right of the address bar):
2. Your favorites list:
3. Another way of viewing your
favorites:
4.
On the links bar. If this is not visible, right-click on the
taskbar (the horizontal bottom bar that contains the START
button on its left side), then select TOOLBARS, then LINKS.
To add a shortcut to the links
bar:
Drag the favicon from the address bar to the links bar. Or
drag any link from a web page, your favorites list, or your
desktop onto the links bar.
To remove a shortcut from the links bar:
Right-click the shortcut, and then click DELETE.
To rearrange shortcuts on the links bar:
Drag a shortcut to the desired place on the links bar.
To customize shortcuts on the
links bar:
Right-click the shortcut, and then click Properties.
Now click the Change Icon button to select a
different icon.
5. On the desktop. To have a
favicon appear on your desktop as a shortcut, you can
either:
- Left-click on the
favicon in the address bar, and drag it to the desktop
(this means that you left-click on the favicon, keep the
left mouse button pressed as you drag the favicon to its
desired location, then release the mouse button). If the
generic blue "e" Internet Explorer icon is initially
present and a favicon is available for that site, this
procedure will make your browser immediately download
the favicon from the server.
- Left-click on the
favicon in your favorites list and drag it to the
desktop. This will move the favicon from your favorites
list to the desktop. If you wish to retain the favicon
in your favorites list AND have a copy of the favicon as
a desktop shortcut, right-click the desired entry in
your favorites list, then select CREATE SHORTCUT.
Left-click on one of these entries and drag it to the
desktop.
- Left-click the blue "e" icon
in the upper left corner of the browser, then drag it to
the desktop.
- Right-click on the web
page and choose Create Shortcut.
Notice that as you put your
mouse cursor over a desktop favicon, it becomes a clickable
hyperlink. Try it! (It works even here.)
In case you were wondering . . .
.
The first favicon is for the
ContactMeFree
site, which is a dream come true for anyone involved in
online dating. If you have your profile posted on a
personals site but don't pay for a membership, you know how
limited you are in terms of being able to send or receive
messages. You probably assume that those limitations
disappear if you pay for a membership. Guess what? You are
still far more limited than you realize. Frankly, if you
knew how limited you were, you would be furious that the
personals site was charging you $20 to $50 per month and
still keeping the shackles on you! The man who
created
ContactMeFree
was so outraged by those limitations that he decided to do
something about it. So he did!
The second favicon is for the
MyProfileWriter
site. You know that writer's block you get when you sit down
to write the essay portion of your personal profile for
online dating? And you know the difficulty you have trying
to think of a catchy headline? Well,
MyProfileWriter
allows you to create a profile essay and headline without
typing, just by clicking!
The third favicon is for a site that discusses
The Beautiful Woman
Syndrome.
Here is another desktop favicon:
This one is for the
www.ERlove.com,
which has numerous true emergency room stories that pertain
to either love, lust, or romance. That site also offers a
free 259-page e-book,
Love & Lust in the ER,
which includes the same cases in an Adobe Acrobat (.pdf)
format.
OK, back to our regularly
scheduled program . . . .
Internet Explorer (version 5 or
later), Firefox,
Netscape (version 7 or later), Konqueror, Firebird, and
Opera (version 7 or later).
The disadvantage is that
the file size is larger, and hence the favicon takes longer
to download once it is requested by bookmarking a site. The
file size of a favicon.ico package that includes Windows®
XP colors with alpha channel transparency (32-bit), 256 indexed colors (8-bit),
and 16 colors (4-bit) is just 2.8 Kb if only 16 by 16-pixel
favicons are included and 9.9 Kb if it also contains 32 by
32-pixel favicons. Hence, the favicon will take a couple
more seconds to download for your users with slow dial-up modems,
but only a fraction of a second more for users with
broadband connections.
The advantage of
including the three larger (32 x 32) favicons in addition to
the three smaller favicons (16 x 16) is that your favicon
will have a more detailed image if someone who bookmarks
your site moves your favicon to their desktop as a shortcut.
Desktop shortcut favicons are 32 by 32 pixels in size. If
your favicon.ico package includes the 32 by 32-pixel
favicons, the computer's operating system automatically
selects the larger favicon to display on the desktop. If
only 16 by 16-pixel favicons are present in your favicon
package, the favicon is automatically expanded to a 32 by
32-pixel size. While the size is the same in the end, the
interpolation process does not generate any more detail than
what was originally present in the 16 by 16-pixel favicon.
Hence, that favicon is essentially magnified to appear
larger, but that gives it a somewhat grainy appearance
because the image is just scaled up and no new data is added
to the image. A 32
by 32-pixel favicon contains 4 times as many pixels as 16 by
16-pixel favicons, so they potentially contain 4 times more
detail. This is a plus if your favicon is moved to the
desktop as a shortcut, but in other locations (the
address, history, and link bars, and your favorites list),
only the smaller 16 by 16-pixel favicons are present. The
following image shows a 16 by 16-pixel favicon, a 32 by
32-pixel favicon, and a 16 by 16-pixel favicon scaled up to
32 by 32 pixels:
Save the favicon.ico file in the
root directory of your domain. For example, if your domain
is called www.my-domain.com, your favicon should be uploaded
to www.my-domain.com/favicon.ico using whatever program you
use to upload your other files. Every time your web site is
added to a user's favorites list (bookmarked), Internet Explorer**
and other browsers automatically locates the favicon.ico
file, downloads it, then appends the favicon to all the
locations where favicons can appear.
** While Internet Explorer can
automatically locate and display favicons in the root
directory, it won't always do that (just another
quirk, courtesy of Microsoft). To increase the probability
that IE will always handle favicons as it should, add the
two lines of purple-shaded code into the head section of
your web site:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>ER-doctor.com: Information for people contemplating a
career in emergency medicine and other specialties</title>
<meta name="description" content="Information for students
contemplating a career in emergency medicine and other
specialties" />
<meta name="keywords" content="ER, emergency room, medical
school, become a doctor, emergency medicine, GPA, ER doctor,
MCAT, ER residency, brainpower, intelligence, creativity,
doctor, medical, hospital, college" />
<link
rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico"
type="image/x-icon" />
</head>
No, they can have any file name
if the extension is still ".ico".
However, it is advisable to name them favicon.ico because
this obviates the need to add code to your site to inform
the browser what your favicon is called. If your favicon has
another name, associate the favicon with your web site by
adding a line of HTML code (shaded
purple for clarity in the example below) into the head section of your web
site. This line of code includes a link tag specifying the
location and name of the favicon file.
<head>
<link rel="shortcut icon"
href="http://www.my-domain.com/myfavicon.ico"
type="image/x-icon" />
<title>my title</title>
</head>
You can also use this code if
you cannot upload the favicon file to the root directory of
your domain, or if you want to have different favicons for
different pages. If you want specific favicons to appear on
specific pages, indicate the name and location of those
favicons using the above code, but do not place favicon.ico
in your root directory. Why? Because this may override the
appearance of specific favicons on specific pages (instead,
the favicon.ico in your root directory will appear on all
pages).
Use the lowercase
favicon.ico, not the uppercase FAVICON.ICO.
Unless you indicate otherwise, I
will use favicon.ico as your favicon name. You can rename it
if you wish by using the standard procedure for renaming
files. For example, in Windows right-click the file and
choose RENAME.
1. You can have different
favicons for different pages.
2. It is easier to not confuse
one favicon with another if you have multiple favicons.
Add a line of code (shaded
purple for clarity in the
example below) specifying
the location and name of the favicon file. For example:
<head>
<link rel="shortcut icon"
href="https://www.my-domain.com/myfavicon.ico"
type="image/x-icon" />
<title>my title</title>
</head>
Favicons named favicon.ico
should be recognized automatically. As an additional
safeguard, though, you may wish to add the following code
(shaded purple for clarity in
the example below) into
every page's head section:
<head>
<link
rel="shortcut icon" href="/favicon.ico" type="image/x-icon"
/>
</head>
Note the / before favicon.ico.
New favicons may not show up if
Internet Explorer's cache of temporary Internet files is
bloated, even if the cached files do not exceed the preset
limit. The cure is simple: just clear your cache
periodically (it is advisable to do this for other reasons,
too). To clear the cache, start Internet Explorer, then
select TOOLS, then INTERNET OPTIONS. In the Temporary
Internet files box, press the DELETE FILES button.
Yes. Use one of the following
scripts, customizing it as necessary:
<SCRIPT>
<!--
if ((navigator.appVersion.indexOf("MSIE") > 0)
&& (parseInt(navigator.appVersion) >= 4)) {
var sText = "<U><SPAN STYLE='color:blue;cursor:hand;'";
sText += "onclick='window.external.AddFavorite(location.href,";
sText += "document.title);'>Add this page to your
favorites</SPAN></U>";
document.write(sText);
}
//-->
</SCRIPT>
This is the script used on this
site:
<a href="javascript:window.external.AddFavorite('http://www.make-a-favicon.com',
'How to make and use favicons')"
style="font-size:12px;color:#ffffff;font-family:verdana;">Click
here to bookmark this site</a>
There is an automated script
generator for this on the following web page:
http://www.htmlbasix.com/bookmark.shtml
If you use it, don't bother
trying to change the font type, size, or color with their
generator. Just generate the script and paste it into your
page code at the desired spot, then highlight it (in your
WYSIWYG page design screen) to change
the font attributes if desired. Keep in mind that this
generates white text by default, so the text will initially
be invisible on your web page if your background is white.
That is just the way Internet
Explorer (IE) works. If you bookmark a site, close IE, and
restart IE, you will see the favicon visible in all possible
locations, including the address bar when you return to that
site. I've read speculations that IE intentionally works
this way because favicons are intended to be a visual prompt
to help you locate bookmarks. If you're already at a site,
there is no need for this. Well, that's the theory. I don't
agree that favicons are superfluous during your first visit
to a site, so in a minute I'll explain how to make
favicons instantly appear (even for initial site visits).
Immediately viewing favicons would help users associate a
favicon with a given site, and it would also visually
enhance the site visit. Hence, I think that Microsoft should
rethink their policy on this matter.
Now let's discuss how to make
favicons instantly appear on initial site visits (remember,
they will automatically appear on return visits if the site
is bookmarked). There are a couple ways to make favicons
appear in the address bar during the first site visit:
1. Click on the generic blue "e"
icon in the upper left corner of IE's window, and drag it to
the generic blue "e" in the address bar. If a favicon is
available for that site, it will immediately appear. ("Click
and drag" means click with the left mouse button, keep it
depressed while moving the mouse, and release it over the
destination — in this case, the generic blue "e" in the
address bar.)
2. Or just click and drag within
the generic blue "e" in the address bar, and repeat if
necessary.
Internet Explorer version 7
handles favicons much better than earlier IE versions. In
fact, IE7 often (but not always) displays favicons during
the initial site visit even if that site is not bookmarked.
However, IE's favicon display performance is inconsistent,
so you may wish to add code into your head sections (see
above) to improve IE's favicon display reliability.
Because IE stores the favicons
in the Temporary Internet Files cache by default. You can
prevent this by using FavOrg, a PC Magazine utility:
http://www.pcmag.com/article2/0,4149,9883,00.asp
Incidentally, if you (or one of
your utility programs, such as Norton's One Button Checkup)
clears your Temporary Internet Files cache, you will notice
that the desktop shortcut favicons are replaced by the
generic IE icons. The custom favicons are sometimes restored eventually if you revisit that site. You
can restore the custom favicon by bookmarking the site
again. If you do this, the favicon will sometimes
immediately appear, but other times you must drag the
favicon from the address bar to the site of the generic IE
icon. Occasionally, even that does not work, at least
immediately. However, if you restart your computer after
doing the latter procedure, the custom favicon should
appear. Internet Explorer version 7 handles favicons better
than earlier versions, but Firefox is still better in this
regard.
How can I verify that I
correctly uploaded my favicon to my web site?
If your browser does not display
it after you upload the favicon to your root directory, it
may nevertheless be there and visible to others who visit
your site. If I upload a new favicon and it does not appear
in Internet Explorer, I switch to Firefox. 99 times out of
100, the favicon is there.
Here is another tip to verify
that the favicon is where it should be: Load this page:
www.your-domain.com/favicon.ico
Of course, substitute the name
of your domain for "your-domain.com."
For example, loading this file on this site . . .
www.make-a-favicon.com/favicon.ico
. . . shows the favicon. It will
be enlarged and more grainy than it actually is, but at
least you will know that the favicon is where it should be.
|
