I have a html site.The issue is favicon not working in chrome but it worked well in Firefox & Safari.
Anyone can help me to get rid of this issue?
<link rel="shortcut icon" type="images/ico"
href="http://www.example.com/images/favicon.ico" />
I was having exactly the same problem. Then I tried refreshing the page by doing Ctrl + Shift+ R. It worked!
Have a look at this question: Favicon not showing up in Google Chrome
1) Clear your cache. http://support.google.com/chrome/bin/answer.py?hl=en&answer=95582 And test another browser, lets say safari. How did you import the favicon?
2) How you should add it:
Normal favicon:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
PNG/GIF favicon:
<link rel="icon" type="image/gif" href="favicon.gif" />
<link rel="icon" type="image/png" href="favicon.png" />
3) Another thing could be the problem that chrome can't display favicons, if it's local (not uploaded to a webserver).
Source: https://stackoverflow.com/a/16375622/1581725
<link rel = "shortcut icon" href = "test_image.ico" type = "image/x-icon" />
Also, if your icon is too small, double the size. That worked for me when I had this issue.
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".
I opened Chrome's developers tools and it doesn't load my favicon at all when I looked for it at networks tab.
Here is my code:
<DOCTYPE HTML>
<head>
<link rel="icon" href='./img/favicon.ico' type="image/x-icon"/>
<meta charset="utf-8">
<title>Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="script.js"></script>
</head>
Try this one:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Upload your favicon.ico to the root directory of your website and that should work with Chrome. Some browsers disregard the meta tag and just use /favicon.ico
Go figure?.....
Seems there's no issue with your code attributes.This is the standerd form
<link rel="icon" href="imagelocation" type="image/x-icon" sizes="16x16">
Try a Image from internet without downloading and make verify that it's not a issue of Chrome first.Then take a look to your code and location of the image are matching correctly with your location of file you have call your Favicon.
Accroding to your tag your favicon should be in a sub directory called 'img'.This may be a browser cacheing issue also. Try viewing page source (Right Click > View Page Source ) and go to the location of the image and try reload it.
Try adding type type="image/x-icon"
<link rel="icon" href='./favicon.ico' type="image/x-icon"/>
and try move the favicon.ico in an subdir /img
then
<link rel="icon" href='./img/favicon.ico' type="image/x-icon"/>
or with shortcut icon
<link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico" />
or save the ico like a png
<link rel="shortcut icon" type="image/png" href="./img/favicon.png" />
I'm doing an assignment for class, and we were tasked to make a webpage. All went well with creating the page, but I'm struggling to get the icon on my browser tab.
He instructed us to get the icon from one of our folders
This is from his directions
"Note in order to show your icon, you insert this line in your html head section"
<link rel="shortcut icon" href="images/favicon.ico" type="favicon/ico" />
"Assuming that your company icon is in the folder images"
I've tried many variations of that, but it won't work.
Mine is called favicon(1).ico
Here's one of my attempts
<link rel="shortcut icon" href="/favicon(1).ico" type="image/x-icon" />
Here's another.
<link rel="shortcut icon" href="images/favicon(1).ico" type="favicon/ico" />
I have a folder on my Desktop called "Question 1" and within that folder I have my HTML file for this assignent and another folder called "images". In the "images" file I have the "favicon(1).ico icon.
Is there a way I can take that icon from my folder and place it in my code?
This is the Snippet that I use whenever I need to configure a favicon:
<!-- for FF, Chrome, Opera -->
<link rel="icon" type="image/png" href="/assets/favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/assets/favicons/favicon-32x32.png" sizes="32x32">
<!-- for IE -->
<link rel="icon" type="image/x-icon" href="/assets/favicons/favicon.ico" >
<link rel="shortcut icon" type="image/x-icon" href="/assets/favicons/favicon.ico"/>
This should work just fine.
You need to use .png in FF, Chrome and Opera and support them with 2 resolutions, for different devices and screen resolutions.
IE needs the .ico Image and needs the rel to be "icon" and "shortcus icon", don't ask me why, IE is always a bit of a wierdo as we all know :D
Try:
<link rel="shortcut icon" href="favicon(1).ico">
or this (for Mozilla)
<link href="favicon(1).png" rel="icon" type="image/png" />
It can be .png or .ico
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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">
Google Chrome and IE8/9 don't display my favicon. Here is my HTML code from the head tag:
<link rel="icon" href="images/favi.ico" type="image/x-icon" />
<link rel="shortcut icon" href="images/favi.ico" type="image/x-icon" />
Can you please solve this issue?
Try this: <link rel="icon" type="image/ico" href="path_to_icon/favicon.ico"/>
put it in the root directory and it should work...
<link rel="shortcut icon" href="favicon.ico"> for more info, see here http://en.wikipedia.org/wiki/Favicon
and you should better use the default name favicon.ico,
probably you have to clean your cache in your browser first...