So here's another IE cross-compatibility issue. My website, www.zerozaku.com, is compatible with Chrome and Firefox, but IE has an issue with my Mini-Chat overflowing out of the box. Could anyone help?
P.S. I've only tested it on IE8, Firefox, Chrome
First error on list <link rel="shortcut icon" href="favicon.ico">
needs a closing tag like <link rel="shortcut icon" href="favicon.ico" />
Also if you try to run the validator on your page you'll notice that you have 50+ markup errors which I bet are causing missbehaviour in IE.
I just restructured the XHTML and CSS to be IE-compliant.
Related
I am trying to add icon to html page.
Following is the code,
<link rel="icon" href="../../images/favicon.ico" type="image/x-icon"/>
Here I am trying to get favicon.ico from specific path.
This works on chrome but not on IE.
IE 11 version
Did you try this method:
<link rel="icon" href="url/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="url/favicon.ico" type="image/x-icon" />
<link rel="ICON" type="image/x-icon" href="http://example.com/myicon.ico"/>
Try any of these and check whether It worked for you.
Check this out:
How do I force a favicon refresh
Basically, IE11 is fierce about caching the favicon. Adding a cache buster in the URL might fix it. Something like ../../images/favicon.ico?v=1.
Another user also suggested removing type="image/x-icon".
Something werid happens to me, I am going to build my personal website, put favicon.ico in the header.html, like below:
<link rel="shortcut icon" href="/favicon.ico">
And clean up the history records of the browser, Firefox shows the icon, but Chrome doesn't show up.
I can't figure out the reason, please help me.
This is probably because you have non-header markups in your head. For example:
<html>
<head>
<div>This div has nothing to do here. It's a "body" markup.</div>
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
...
</body>
</html>
When Chrome finds a non-header markups in the head (eg. div, span, p...), it considers the header to be completed (even if it is not technically closed) and everything that follows is supposed to be in the body. And since the favicon markup doesn't work when it is in the body...
This behavior is specific to Chrome, this is why your favicon work in Firefox.
I want to make a favicon for my web page. I found a sample but it's not working for me. Can someone please help me get it to work. On the index page of the web site I put this in the of the page.
<!--
<![if !IE>
<link rel="icon" href="http://mywebsiteurl/images/favicon.ico" type="image/x-icon" />
<![endif]>
<link rel="shortcut icon" href="http://mywebsiteurl/images/favicon.ico" type="image/ico" />
!-->
Can I put this on specific pages that I want to display the favicon or does it have to be somewhere at the root of the site?
If you can think of any solution I would really appreciate it. Thanks for any help!
Try this, your comment end was in the wrong place
<!--
<![if !IE>
<link rel="icon" href="http://mywebsiteurl/images/favicon.ico" type="image/x-icon" />
<![endif]>
!-->
<link rel="shortcut icon" href="http://mywebsiteurl/images/favicon.ico" type="image/ico" />
Assuming you are using IE conditional comments for a reason, it looks like your comment syntax is off. You can read more about them here.
Otherwise, the conditional comments aren't specifically needed for a favicon; your first tag looks good to me.
<link rel="icon" href="favicon.ico" type="image/x-icon" />
Yes, you can use unique favicons for individual pages, but browsers go cache crazy and will usually show the most recent icon for that domain unless otherwise instructed. For example: if you set an icon on your home page, but then didn't set one on a subpage, it would likely keep the home page's icon.
I've visited these questions and none of the answers worked for me:
Why doesn't my fav icon work in Chrome any more?
Chrome doesn't show the favicon
My Code
My website is http://mikeyaworski.com and this is the code I use to set my icon:
<head>
<title>mikeyaworski</title>
<link
rel="shortcut icon"
href="http://mikeyaworski.com/myicon.ico"
type="image/vnd.microsoft.icon"
>
</head>
This is my entire code.
What I've Tried
Instead of rel="shortcut icon"I've tried rel="icon"
Instead of type="image/vnd.microsoft.icon" I've tried type="image/x-icon"
Instead of href="http://mikeyaworski.com/myicon.ico" I've tried href="myicon.ico"
The icon works in Mozilla and Internet Explorer. The icon does not work in Google Chrome. Any ideas?
Your html is invalid and your browser tries to fix it. In doing so your link tag ends up outside the head and is ignored, fix your html and it will work
<!DOCTYPE>
<html>
<head>
<title>mikeyaworski</title>
<link rel="icon" href="myicon.ico" type="image/vnd.microsoft.icon">
</head>
<body> <!-- body tag should be here -->
<h1 style="text-align:center;font-family:trebuchet ms;" id="top"><br><br>Hompage</h1>
<p>
Coming soon. Until then, view my StackOverflow and other StackExchange profiles:
</p>
<a href="http://stackexchange.com/users/2644958">
<img src="http://stackexchange.com/users/flair/2644958.png?theme=dark" width="208" height="58" alt="profile for mike yaworski on Stack Exchange, a network of free, community-driven Q&A sites" title="profile for mike yaworski on Stack Exchange, a network of free, community-driven Q&A sites">
</a>
<body>
</html>
<!-- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> -->
Try using the following code:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
Or Else have a go at the link below with similar discussion:
local (file://) website favicon works in Firefox, not in Chrome or Safari- why?
Update:
Or else give a following link a try:
Fix missing favicons on Google Chrome
Hope this helps.
Thanks,
Jatin
I have the html:
<link rel="shortcut icon" href="/images/favicon_muse_me.ico">
on my website Muse Me (http://www.musememobile.com)
The favicon won't show up if I open it with Chrome. It shows up in other Browsers.
The favicon showed up before in Chrome but then I changed it.
What should I do to make it show up in Chrome?
Add the ICO file to the root directory as 'favicon.ico'.
Some browsers disregard the favicon metatag, and just look for /favicon.ico.
Chrome does not support animated favicons, and it doesn't look like anyone is interested in implementing it.
Original bug report: http://code.google.com/p/chromium/issues/detail?id=19731
Latest duplicate: http://code.google.com/p/chromium/issues/detail?id=130062
What about if you declare a "type" for your link? Also, you can try a rel of simply "icon" in addition.
Try this:
<link rel="icon" href="/images/favicon_muse_me.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/images/favicon_muse_me.ico" type="image/x-icon" />
You could also try appending the domain to the image src as well:
<link rel="icon" href="http://www.musememobile.com/images/favicon_muse_me.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.musememobile.com/images/favicon_muse_me.ico" type="image/x-icon" />
UPDATE
You could also try using a png for your favicon (obviously will need to have a png version to do this). This is the approach I take with my own site and it looks fine in Chrome:
<link rel="icon" type="image/png" href="/images/favicon_muse_me.png" />
Make sure it's in <head> tag. It's kind of...'meta' info for the page.
<head>
<link href="//domain.com/favicon.png" rel="icon" type="image/x-icon">
</head>
I tried other options but this worked in Chrome for me
What I have been using is the URI, witch you can find out at https://websemantics.uk/tools/image-to-data-uri-converter and just put it in the atrabute href.
For example this is a valid URI a favicon
<link rel="icon" href="data:image/png;base64,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">