FAVICON.ICO - RealWorld forums

FAVICON.ICO

The favicon.ico nightmare.

Hippie
on August 22nd 2008

Hour 20. No icon. Help.

I put all seemingly relevant info in the body of this text. I have tried every code in every position and all I know is that the icon showed last week and saved to bookmarks. Now that I've updated my site, the favicon.ico has disappeared. I would be happy to provide more info if needed & would be thrilled if some computer genius could figure this out.

STATS:

. a masked site which forwards to alt URL
. domain host inputs metatags & title
. favicon.ico in the root directory
. html between <head> & </head>
. code <link rel="shortcut icon" href="/favicon.ico">
. does not read in explorer
. does not read in firefox
. icon does not show in favorites
. icon showed last week...have purged cache since
. source code on firefox reads

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

  "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

 <title>:: www.hippiescustomtattoos.com :: HIPPIE'S CUSTOM TATTOOS :: BLACK SHEEP INN :: </title>
 <META name="description" content="Hippie's Custom Tattoos inking Ottawa &amp; Wakefield Quebec at the Black Sheep Inn."><META name="keywords" content="Tattoo, tattoos, Ottawa, Wakefield, Quebec, tattoo.ca, tattoos.com, tattoo.com, tattoos, Dan Beo, Dan, Hippie, Hippie's Custom Tattoos, Custom, Tattoos, Black Sheep Inn, Black Sheep, Music, Indie Music, body art, custom, tattooing, celtic, tribal, ink, Odawa, Quebec, Ontario, Chelsea, Canada, Canada tattoos, shop, downtown, studio, contact, designs, tattoo galleries, sterilized, single use, sterile needles, art, artists, local ottawa artists, poster, poster factory, local, ottawa tattoos.">

</head>
<frameset rows="100%,*" border="0">

 <frame src="http://www3.sympatico.ca/regulator1" frameborder="0" />
 <frame frameborder="0" noresize />

</frameset>

</html>

. source code on explorer reads

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

  "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

 <title>:: www.hippiescustomtattoos.com :: HIPPIE'S CUSTOM TATTOOS :: BLACK SHEEP INN :: </title>
 <META name="description" content="Hippie's Custom Tattoos inking Ottawa &amp; Wakefield Quebec at the Black Sheep Inn."><META name="keywords" content="Tattoo, tattoos, Ottawa, Wakefield, Quebec, tattoo.ca, tattoos.com, tattoo.com, tattoos, Dan Beo, Dan, Hippie, Hippie's Custom Tattoos, Custom, Tattoos, Black Sheep Inn, Black Sheep, Music, Indie Music, body art, custom, tattooing, celtic, tribal, ink, Odawa, Quebec, Ontario, Chelsea, Canada, Canada tattoos, shop, downtown, studio, contact, designs, tattoo galleries, sterilized, single use, sterile needles, art, artists, local ottawa artists, poster, poster factory, local, ottawa tattoos.">

</head>
<frameset rows="100%,*" border="0">

 <frame src="http://www3.sympatico.ca/regulator1" frameborder="0" />
 <frame frameborder="0" noresize />

</frameset>

</html>

. source code in dreamweaver reads

<html>
<head>
<title>::www.hippiescustomtattoos.com::HIPPIE'S CUSTOM TATTOOS::BLACKSHEEP INN::WAKEFIELD QUEBEC::</title>
<link rel="shortcut icon" href="/favicon.ico">
<style type="text/css">
a:hover{text-decoration:none}
.scroll
{
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #821212;
scrollbar-base-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #821212;
scrollbar-shadow-color: #821212;
scrollbar-track-color: #ffffff
}

.main_text
{
font-family:Tahoma;
font-size:9px;
line-height:13px;
color:#464646;
}
.header_text
{
font-family:Tahoma;
font-size:9px;
line-height:13px;
color:#7A0202;
}

.link_text, link_text2
{
font-family:Tahoma;
font-size:10px;
line-height:13px;
color:#821212;
}

.link_text2 {
color: #FFF;
}

.copyright_text
{
font-family:Tahoma;
font-size:10px;
line-height:13px;
color:#E0E0E0;
}
a.copyright_text:link {text-decoration:none;}
a.copyright_text:hover {text-decoration:underline;}
a.copyright_text:active {text-decoration:none;}
a.copyright_text:visited {text-decoration:none;}

a.header_text:link {text-decoration:none;}
a.header_text:hover {text-decoration:underline;}
a.header_text:active {text-decoration:none;}
a.header_text:visited {text-decoration:none;}
</style>
</head>

Vlasta
on August 22nd 2008

Here is the reason: your favicon is not an icon, but a html file with .ico extension.

Hippie
on August 23rd 2008

I am most deeply grateful for your answer! What does this mean? What should I do? Reconfigure my icon? I got the icon AS an icon. I need to absorb this for a moment. I will take this info to the lab of favicon insanity & see what comes up. Presumably re-creating the icon??? I don't mind step by step instructions.

Vlasta
on August 23rd 2008

Yes, when I looked at this url www.hippiescustomtattoos.com/favicon.ico, I got a tiny html page. You need a real .ico file. To quickly test it, create on in the online icon editor. There is also a more advanced shareware icon editor.

Hippie
on August 23rd 2008

Thanks a million, Vlasta.

Here's the final scoop:

MASKING THE DOMAIN short-circuits the favicon.ico file
this, I think, is because the domain provider's (GoDaddy) default metatag (or whatever) html overwrites the html & ends with the </head> code and the URL can't find the original (Dreamweaver) code!

Internet Explorer displays nothing either way & that is par for the course.

Firefox now displays the icon at the true domain name:
http://www3.sympatico.ca/regulator1

But Firefox does not display the icon at the masked domain site:
http://www.hippiescustomtattoos.com/

These display & don't display simultaneously depending what URL you type in.

The icon validator show the following error:
http://www3.sympatico.ca/regulator1/ was checked but could not find a valid favicon.
Details:* Found the web page at: http://www3.sympatico.ca/regulator1/ (8.54 KB)

Found <link rel="shortcut icon" ...> tag that specify a favicon:

It comes down to my choice of whether I want my business domain name in the URL or...if I really need the icon there- remove the mask on the forwarded site and let the site display the weird URL [www3.]

The good news is, when I save a bookmark in Firefox at the true domain name [www3.sympatico.ca/regulator1] it saves it WITH the icon, the URL display is [www3.sympatico.ca/regulator1] but the browser title bar (the blue part at the top) displays my desired title in which I've put my optimal URL www.hippiescustomtattoos.com
Long & short, this is the potential final compromise ICON + GOOD TITLE + WEIRD URL.

I write all this with the hope that I can save someone endless hours of mindless FTP uploading. And...further...if anyone has some tricky way of getting around the domain provider's point & click masking info that also would be cool. I tried to do this by inserting the html code for favicon.ico in the "Masked description Meta tag" area but this shut down the whole masking option and displayed an error.

deann.walter
on August 29th 2008

That happens to me all the time with GoDaddy. I just delete the file from their server and re-upload it. The code I use is this:

4m
on November 7th 2008

You can use an external image hoster like Photobucket to host a GIF or PNG. It should work, too.

masada
on April 6th 2009

I've found that when masking a URL that is forwarded, goDaddy generates a 0px frame as the top frame, then a second frame that loads the page it forwards to. As a result of this method, the code you created for the favicon isn't actually being read so it won't work. I have no idea why they do it this way.

jomytago
on April 7th 2016

favicon size:

16 x 16 – Standard size for browsers
24 x 24 – IE9 pinned site size for user interface
32 x 32 – IE new page tab, Windows 7+ taskbar button, Safari Reading List sidebar
48 x 48 – Windows site
57 x 57 – iPod touch, iPhone up to 3G
60 x 60 – iPhone touch up to iOS7
64 x 64 – Windows site, Safari Reader List sidebar in HiDPI/Retina
70 x 70 – Win 8.1 Metro tile
72 x 72 – iPad touch up to iOS6
76 x 76 – iOS7 96 x 96 – GoogleTV
114 x 114 – iPhone retina touch up to iOS6
120 x 120 – iPhone retina touch iOS7
128 x 128 – Chrome Web Store app, Android
144 x 144 – IE10 Metro tile for pinned site, iPad retina up to iOS6
150 x 150 – Win 8.1 Metro tile
152 x 152 – iPad retina touch iOS7
196 x 196 – Android Chrome
310 x 150 – Win 8.1 wide Metro tile
310 x 310 – Win 8.1 Metro tile

source:

http://net-informations.com/faq/asp/favicon.htm

Jomy

Page views: 10218 Posts: 9

Graphic design

Vista & Win 7 icons

Find out how Vista icons differ from XP icons.

See how RealWorld Icon Editor handles Vista icons.

What about ICL files?

Select background