I have a site using a custom favicon.ico. The favicon displays as expected in all browsers except IE. When trying to display the favicon in IE, I get the big red x; when displaying the favicon in another browser, it displays just fine. The page source includes and it does work in other browsers. Thanks for your thoughts.
EDIT: SOLVED: The source of the issue was the file was a jpg renamed to ico. I created the file as an ico and it is working as expected. Thanks for your input.
This question is related to
internet-explorer
favicon
Thanks for all your help.I tried different options but the below one worked for me.
<link rel="shortcut icon" href="/favicon.ico" >
<link rel="icon" type="/image/ico" href="/favicon.ico" >
I have added the above two lines in the header of my page and it worked in all browsers.
Thanks
Try something like:
Add to html:
<link id="shortcutIcon" rel="shortcut icon" type="image/x-icon">
<link id="icon" rel="icon" type="image/x-icon">
Add minified script after tag:
<script type="text/javascript">
(function(b,c,d,a){a=c+d+b,document.getElementById('shortcutIcon').href=a,document.getElementById('icon').href=a;}(Math.random()*100,(document.querySelector('base')||{}).href,'/assets/images/favicon.ico?v='));
</script>
where
Before test clear history: (ctr + shfit + del)
Also - certificate errors (https) can prevent the favicon from appearing. The security team changed our server settings and I started getting "There is a problem with this website’s security certificate." Clicking on "Continue to this website (not recommended)." took me to the website but would NOT show the favicon.
I'm seeing different behaviors between Windows 10 and Windows Server 2016 and between IE and Edge. I tested using www.microsoft.com.
Windows Server 2016 IE 11:
Favorites: site icon
Address bar: site icon
Browser tab: site icon
Windows 10 IE 11:
Favorites: site icon
Address bar: generic blue-E icon
Browser tab: generic blue-E icon
Windows 10 Edge:
Favorites: site icon
Address bar: no icon
Browser tab: site icon
What's the deal with Windows 10 IE showing the generic icon?
If you tried everything above and it still doesn’t work in IE, check your IIS settings if you are using a Windows Server. Make sure that the HTTP Headers > “Enable content expiration” setting, IS NOT SET to “Expire immediately”
I had this exact problem and nothing seemed to work. After clearing the browser cache countless times and even updating IE to v9 I found this: http://favicon.htmlkit.com/favicon/
The above link solved the problem perfectly for me!
Did you try putting the icon at the URI "/favicon.ico" ? IE might not know about the link tag way of referring to it.
More info from W3.
Should anyone make it down to this answer:
Same issue: didn't work in IE (including IE 10), worked everywhere else.
Turns out that the file was not a "real" .ico file. I fixed this by uploading it to http://www.favicon.cc/ and then downloading it again.
First I tested it by generating a random .ico file on this site and using that instead of my original file. Saw that it worked.
In IE and FireFox the favicon.ico is only being requested at the first page visited on the site, which means that if the favicon.ico requires log-in (for example your site is a closed site and requires log in) then the icon will not be displayed.
The solution is to add an exception for the favicon.ico, for example in ASP.Net you add in the web.config:
<location path="favicon.ico">
<system.web>
<authorization>
<allow users="*" />
</authorization>
</system.web>
</location>
Regarding incompatibilities with IE9 I came across this blog post which gives tips for creating a favicon that is recognised by IE9.
In an essence, try creating a favicon with the following site: http://www.xiconeditor.com/
this seems to be an ASPX pages problem, I have never been able to show a favicon in any page for IE (all others yes Chrome, FF and safari) the only sites that I've seen that are the exception to that rule are bing.com, msdn.com and others that belong to MS and run on asp.net, there is something that they are not telling us! even world-known sites cant show in IE eg: manu.com (most browsed sports team in the world) aspx site and fails to dislplay the favicon on IE. http://www.manutd.com/favicon.ico does show the icon.
Please prove me wrong.
THE SOLUTION :
I created an icon from existing png file by simply changing the extension of the image from png to ico. I use drupal 7 bartik theme, so I uploaded the shortcut icon to the server and it WORKED for Chrome and Firefox but not IE. Also, the image icon was white-blank on the desktop.
Then I took the advice of some guys here and reduced the size of the image to 32x32 pixels using an image editor (gimp 2<<
I uploaded the icon in the same way as earlier, and it worked fine for all browsers.
I love you guys on stackoverflow, you helped me solve LOTS of problems. THANK YOU!
I know this is a really old topic now, but as it's the first one that came up on my google search I just wanted to add my solution to it:
I had this problem as well with an icon that was supplied by a client. It displayed in all browsers apart from IE. Adding the link or meta tags didn't work, so I started to look at the format of the icon file.
It appeared to be a valid icon file (not just a renamed image), but what fixed it in the end was to convert it to an image, save it as a GIF, and then converting it back to an icon.
Also make sure to clear the IE cache while you're testing.
I once used a PNG as a favicon.ico and it displayed in all browsers except IE. Maybe something in the file causes it to not be recognized by IE. Also make sure it's 32x32. Don't know if it matters though. But it's something I had to make sure in order to see it in IE.
Hope it helps. Try to use an ico file from some place else just to see if that works.
Care to share the URL? Many browsers cope with favicons in (e.g.) png format while IE had often troubles. - Also older versions of IE did not check the html source for the location of the favicon but just single-mindedly tried to get "/favicon.ico" from the webserver.
Check the response headers for your favicon. They must not include "Cache-Control: no-cache".
You can check this from the command line using:
curl -I http://example.com/favicon.ico
or
wget --server-response --spider http://example.com/favicon.ico
(or use some other tool that will show you response headers)
If you see "Cache-Control: no-cache" in there, adjust your server configuration to either remove that header from the favicon response or set a max-age.
<link rel="shortcut icon" type="image/x-icon" href="FolderName/favicon.ico" />
None of the above solutions worked for me.
First of all I made sure the icon is in the right format using the website to create favicons suggested above.
Then I renamed the icon from 'favicon.ico' to 'myicon.ico' and added the following code to my page (within the <head> tags):
<link rel="shortcut icon" href="myicon.ico" type="image/x-icon" />
The icon is on the same folder as the page.
This solved the problem for me. The issue behind the scenes had probably something to do with the caching of IE, but I'm not sure.
May be this help others.
For me ICON was not getting displayed in IE, even after following all steps.
Finally I found a note in MSDN Troubleshooting Shortcut Icons.
Verify that Internet Explorer can store the shortcut icon in the Temporary Internet Files folder. If you have set Internet Explorer to not keep a cache, then it will not be able to store the icon and will display the default Internet Explorer shortcut icon instead.
I was using IE in "In Private" mode, once I verified in normal mode.... Fav Icon displayed properly.
Run Internet Explorer as Administrator. If you open IE in normal mode then favicon will not display on IE 11 (Win 7). I am not sure about the behavior on other version of browsers.
This work crossbrowser for me (IE11, EDGE, CHROME, FIREFOX, OPERA), use https://www.icoconverter.com/ to create .ico file
<link data-senna-track="temporary" href="${favicon_url}" rel="Shortcut Icon" />
<link rel="icon" href="${favicon_url}" type="image/x-icon" />
<link rel="shortcut icon" href="${favicon_url}" type="image/x-icon" />
Source: Stackoverflow.com