I am using the following:
<link rel="shortcut icon" href="/images/favicon.ico" />
It is a true 'ico'. When I visit http://mydomain.com, the icon loads. But when I visit the 'www' subdomain: www.mydomain.com...it won't load. Any ideas what is going on?
I found that I had to clear my Firefox cache [CTRL]+[SHIFT]+[DEL], and then restart Firefox before I could see the favicon, which I put in the root of the web server and called favicon.ico.
Note that in recent versions of Firefox the favicon is only displayed on the tab icon and bookmark, not in the address bar icon.
It's part of a bigger firefox bug. If I am in mysite.com and say link rel="shortcut icon" href="/myicon.ico" it works. But this is the only way it works. If am in mysite.com and say link rel="shortcut icon" href="myicon.ico" or any other relative link, it fails. HOWEVER, if I am in www.mysite.com and use relative links, they work fine. Further, if I am in mysite.com and say link rel="shortcut icon" href="http://www.mysite.com/mypath/myicon.ico" it works. Firefox has forgotten how to deal with websites where www.mysite.com IS mysite.com. It used to work, and it doesn't anymore. You can also see that if you flip between www.mysite.com and mysite.com links will change from "visited" to "unvisited" style. FF is broken on this one, and has been for a couple of versions now, though once it worked.
This sounds like a configuration issue on your end which we can't solve without more information. Have you tried using an absolute URL instead of a relative one?
Example:
<link rel="shortcut icon" href="http://mydomain.com/images/favicon.ico" />
This is a result of how Firefox currently handles the caching of the favicon file. To solve you have a few options:
Add GET parameters
You can add an arbitrary GET parameter and value to the end of your favicon URI
(Tip: This trick can be used for any other css/js files when you want to make sure the user's browser is not serving a locally cached version.)
<link rel="shortcut icon" href="/images/favicon.ico?updated=20150818" />
Rename the file
Rename your favicon file and reference the renamed file in your href attribute.
<link rel="shortcut icon" href="/images/favicon_version_2.ico" />
Hard Refresh
A hard refresh may work on some browsers if you are only concerned with updating your local machines favicon. Usually Ctrl+Shift+R or Ctrl+F5 for Windows/*NIX and Command+R or Command+Shift+R on Mac will do the trick.
Explanation: The end result is you need to force the browser to pull a fresh copy of the file instead of using a locally cached file. Adding a ?somevariable=uniquevalue to the end of the file URI tricks your browser into thinking it's dealing with a new file, and new files by nature can't already be cached. The same effect is created when you rename a file.
Extra nerdy technical notes: Using a timestamp, or unique file version number for the GET parameter value is best because it will encourage variable uniqueness. It's possible if the user has already loaded that URI with the exact same GET parameter and value (?updated=20150818 in my example), the browser will not pull a fresh copy, because it may understand it's still dealing with the same file.
The option to cache files based on the GET parameters in a URI is browser specific as the rules are somewhat left up to the browser vendor's to discern between how they handle that particular caching instance (see RFC at http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html#sec13.9). So, just keep in mind it's possible in some browsers if you are using a date as a value, you may want to include the time as well if you are changing your file multiple times throughout the day.
For security reasons favicons are not used in the address bar anymore starting with firefox 15, but are still used in tabs and bookmarks etc
See http://www.ghacks.net/2012/04/25/mozilla-to-remove-favicons-from-firefox-url-bar/
you can try to put the icon to the root.
For me putting two link refs in the header worked.
FF did not display the icon until the second line was added
<!-- browser icon -->
<link type="image/x-icon" href="/favicon.ico" rel="shortcut icon" >
<link type="image/x-icon" href="/favicon.png" rel="shortcut icon" >
Removing or leaving in the first / made no difference to how FF handled the icon.
The console reported
[Exception... "Favicon at "https://<myhost>/favicon.ico" failed to load:
Forbidden." nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame ::
resource:///modules/FaviconLoader.jsm :: onStopRequest :: line 227" data: no]
But it loaded the .png file anyway, without complaining in the browser window.
Perhaps the first slash in href="/images/favicon.ico" is causing a problem?
Have you tried
<link rel="shortcut icon" href="images/favicon.ico" />
?
What is the directory structure for www subdomain? Can you access other image files using the absolute path?
Fireworks often picks up the favicon.ico file automatically without any code, so long as it is the same folder as the document. Try moving your file up a level to avoid referencing issues.
This problem is annoying...
I usually just add a 16x16 PNG favicon to solve this.
Firefox's way to deal with favicons seems a bit odd and that workaround is, to me, the simplest.
Hope this helps.
Firefox looks for "favicon.png" rather than "favicon.ico" in root folder of your website. I recommend including both for compatibility with more browsers.
The protocol relative URL could be a good option (archived, you never know).
It is about network-path reference (explanation there), try:
<link rel="shortcut icon" href="//images/favicon.ico" />
for firefox you have to use a special tag:
<link rel="image/x-icon" type="image/png" href="/favicon/favicon-196x196.png" />
Now when you drag it to bookmark bar the icon shows.
Related
For some reason, the favicon just isn't showing. The website is gracedli.com.
You can see the favicon at gracedli.com/favicon.ico and my code to add it is (currently only on index.html):
<link rel="icon" href="favicon.ico" />
I've cleared the cache and used multiple different browsers, and for the life of me, I can't figure it out. Would love some help on it (everything's written in pure HTML/CSS so you can take a peek at the full code at the link). Thank you so much!
You have put the contents of <head> in <header> instead. Move them into , and that would possibly solve your problem.
Common reasons your Favicon is not showing
Check file path : You need to ensure that your favicon’s file path is correct.
The link of favicon is not at the right location : It is important to place the link to add your favicon in the head section of your webpage.
Syntax errors : A minor syntax error in the link of favicons could result in your favicon not showing.
When favicon file in the root directory, but not linked : Always put the favicon in the root directory, and name it favicon.ico. Almost all modern browsers look up /favicon.ico by default but make sure that you have these links in your head section:
link rel="SHORTCUT ICON" href="favicon.ico" type="image/x-icon" />
link rel=" bookmark" href="favicon.ico" type="image/x-icon" />
Because in many cases Just because the favicon file is in your root directory, it does not mean that it will automatically recognize.
Your browser has cached your site as one without a favicon : May be your browser has ‘saved’ your site as one without a favicon. You need to clear the cache in your browser or use a different browser.
May it helped to solve the issue…
Huge shout out to Timmy Chan (in the comments of the question) for noticing this, but I put my tags in <header> instead of <head>. Once I moved them, it worked!
So I recently started playing around with Amazon S3 and build a small sample web app. I followed the tutorials and my site, including images, are working correctly. I added a favicon.ico file to my root directory and referenced this in my index.html but no matter what I do I cannot get the favicon to display in a browser search bar, tab, or favorites list.
Note that I used the Bucket Policy permissions provided by the tutorial in Step 2.1 - Part 4 to make my objects publicly accessible, and I can also navigate to the link provided by the S3 Bucket that holds my favicon.ico object and I can see it in the browser, so I know the link works.
If the link works, everything in the Bucket is publicly accessible, and the rest of my site works including images, what am I doing wrong?
File Structure
index.html
...
<!-- Favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
...
Amazon S3 Bucket
Bucket Policy
UPDATE: I have also tried removing <link rel="icon" href="favicon.ico" type="image/x-icon"> completely from my index.html and also modifying it to have a / in front of favicon.ico like so <link rel="icon" href="/favicon.ico" type="image/x-icon"> to no avail.
I was able to get this to work by using the full exact URL of the favicon in the s3 bucket.
<link
rel="shortcut icon"
type="image/icon"
href="https://my-s3-bucket.s3.us-east-2.amazonaws.com/favicon.ico"
>
Cloudfront has permissions to access this file, it just has to know where it is- no public bucket required.
If you just do the relative path, i.e. href="favicon.ico", that will resolve to your-www.domain.com/favicon.ico, which is not where the file actually is.
If you're using some kind of bundler, a relative path may work as long as you specify the base path as the url of the s3 bucket.
It sounds like this is not an Aws/S3 issue. You can check this by opening the website locally (i.e. from local disk rather than S3) and seeing if the favicon appears. Note that Chrome won't display favicons from locally hosted sites though.
Here a few things to try:
Clear you browser cache and reload the page
Run the website locally and open it with FireFox
Try and use a png favicon instead, in case
there is a problem with your x-icon
From my experience, there is no need to add anything in bucket policy.
Once you added your production build resources to S3 > Then give full public access to all your files. Hit next and save. Remember you are giving read-only access to the public. Please find the screenshot.
Make sure you check the metadata from favicon like below
Check the permission whether the group you are trying to access have both read and write permissions.
Hope it helps
I ran into the same problem and was curious why one of my pages worked and another did not.
I found that if I set this in the HTML (inside the tags in the header, all worked well:
<meta>
<link rel="shortcut icon" type="image/icon" href="images/favicon.png">
</meta>
I also tested with this, and it also worked:
<link rel="shortcut icon" type="image/icon" href="favicon.ico">
Apparently, if it is not specified, it will try to pull it from amazon.com.
Note: In my case, the main bucket is public, however I also put in a bucket policy which restricts the access to a specific CIDR block.
Hope this helps!
I got the same issue, I updated the content type of my favicon to image/vnd.microsoft.icon
and problem resolved.
Also after changing the content you should open you tab in a new incognito window or do empty cache hard reload.
I had the same issue today. I can confirm that it's some caching issue of Google Chrome. At first I had it like:
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
And it didn't work when loaded for AWS as well as when I tried loading directly from file system. So it should be:
<link rel="icon" type="image/x-icon" href="favicon.ico" />
as confirmed by loading from file system. But it still didn't work in Chrome. I also tried all sorts of things before I found the issue on reddit where author said it resolved itself so I decided that should be some caching issue so I tried opening my site in MS Edge and it worked. So I closed all Chrome related processes (including secure shell extension started one) and restarted Chrome and it worked. I bet it's caused by some sort of "web pages loading optimization" feature which caches (more aggressively) meta data parts of your page or something like that.
I am a little bit late, but in case somebody had this issue, in my case, I had to add behavior to CloudFront with path pattern /favicon.ico that would point to my s3 bucket, and that would fix it for me.
The favicon does not work on some pages in IE.
But the favicon works on these pages as well in other browsers (tested in Firefox and Chrome).
Pages not showing the favicon in IE: link - favicon error in IE
Pages showing the favicon in IE: link - favicon works
You have tagged the question with the "doctype" tag. This is a clue of what might be happening...
I am confident that the issue is related to the malformed HTML (or XHTML) tags in the document which IE fails to render the favicon. I myself already had lots of "unrelated" issues due to malformed contents. I suppose, in this case, the document which fails to render the favicon is triggering a kind-of "quirks mode" in IE.
Unfortunately, there are so many issues with both documents which turns difficult to find out what exactly is the one triggering the specific IE "quirks mode" which causes the favicon problem.
The document where favicon works raises 61 errors and 3 warnings in the W3C markup validation service.
The document where favicon does not work in IE raises 98 errors and 25 warnings in the W3C markup validation service.
So, probably it is one of these additional 37 errors and 22 warnings at the failing favicon document which makes IE too much confused and incapable of parsing the thing as a whole.
I have not dived in the errors and warnings, because they are too many. But I'm sure that if the validation passed, favicon would be appearing at both pages.
IE doesn't show the favicons images of those of don't have type="image/x-icon".
I think the best thing to do is convert them to another format.
If you are displaying the icons manually then you could download each, convert it with an image program, and upload it to your site.
As said on this article:
Internet Explorer sees only the server MIME of the ICO file, otherwise
it ignores the file.
Try using this:
<!-- For IE6+ -->
<link rel="shortcut icon" href="path/to/favicon.ico" type="image/vnd.microsoft.icon">
From what i can see you are using
<link href="http://images1.content-ug.com/uniguru-cont/img/ug_favicon.ico" rel="shortcut icon" type="image/x-icon"/>
I want to ask you to follow a couple of steps in order to troubleshot you through your problem.
Copy your current favicon from this address
Rename it
Put it on the same directory as your problematic pages
Link the renamed favicon from the pages that have this problem by using the format as below (put the rel attribute first):
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
Lastly if all the above doesn't resolve your problem, then just remove the type from the link (even though i really don't think this will do any change)
<link rel="shortcut icon" href="favicon.ico" >
Hope this solves your problem
Here are a couple of things that I discovered while attempting to find answers for your problem.
Make sure the favicon.ico is a valid icon file. There are bad ico files out there that either are not true icons or they are just corrupted from a bad converter program. So Remake favicon.ico first and for most.
Make sure the file name is favicon.ico and located in the root directory for easy default purposes.
Internet Explorer will not show/display an icon if it is on your local harddrive. It needs to be on the internet. That is just IE not specific to other browsers.
Internet Explorer also don't like to display if you do not use www before your domain name.
You may also want to clear cache as well to make sure you aren't looking at your old temp files.
I hope this helps you out a bit.
The problem is the broken object/embed tags. Remove the markup below and the favicon should start working on that page (at least it did in my tests on IE9).
<object ...>
<embed class="u_v" type="application/x-shockwave-flash" ...>
</object>
You should have no need for that markup anyway, since the script immediately below it will generate the appropriate embed code for you.
Use this is all browser sported:
<link rel="shortcut icon" href="img/favicon.ico">
try this inner head tag.
Make the icon's file name as 'favicon.ico'
Keep the icon in root directory
No need to include like <link rel="" .... />. By default it will render the icon which named 'favicon.ico'.
IE caches the favicon. Try going to Internet Options and delete the browsing history there.
Try adding both these lines,may be this will work
<link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
<link rel="icon" type="image/x-icon" href="favicon.ico">
I am making a HTML page and one of the things I wanted was a favicon appearing next to the title.
I'm using Google Chrome, I see favicons working on other websites, but the favicon on my website won't show up. The site is in a folder on my desktop named site.
The favicon.ico file is 16x16, and I used an online generator to make it.
This is the code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
</body>
</html>
Since you have a leading / in your href, you are referencing a file that will be in the root-folder. In case you have your page in a folder on your computer, not serving it from a local webserver, the leading / will tell the browser to look in the root folder of your filesystem. So the browser expect the file to be at C:/favicon.ico or similar, which is probably not what you've expected.
If you have the favicon.ico in the same folder as the web page, you could just remove the leading slash, and the icon should be visible.
<link rel="shortcut icon" href="favicon.ico" />
Update:
As a debug option, your could try to add a tag that you know works. I borrowed this snippet from the StackOverflow source. Try replacing your link tag with this and see if you get the SO logo as your favicon.
<link rel="shortcut icon"
href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">
Update 2:
It appears that there is a bug reported on Chromium where the favicon isn't displayed if the file is loaded locally, without being served through a webserver.
I've found that (at Chrome 56, OSX) the favicon state appears to be cached for the browser lifetime, so if a favicon isn't being loaded, it won't be until after restarting Chrome. It appears that it doesn't show up in the "application" tab in dev tools and isn't cleared by a hard reload or 'Clear site data'.
A common issue where the favicon will not show up when expected is cache, if your .htaccess for example reads:
ExpiresByType image/x-icon "access plus 1 month"
Then simply add a random value to your favicon reference:
<link rel="shortcut icon" href="https://example.com/favicon.ico?r=31241" type="image/x-icon" />
Works every time for me even with heavy caching.
Another reason for Chrome not displaying the favicon is that it still remembers a time when the site in question did not have a favicon or the favicon was incorrectly configured.
You're going to want to completely wipe the favicon cache:
Exit all running Chrome processes.
Delete the Favicons file in your user data folder. For example:
C:\Users\me\AppData\Local\Google\Chrome\User Data\Default\Favicons
This can not be resolved by clearing the browser cache, as it does not affect the Favicons container.
Also note that, contrary to what you might read online, requests to favicon resources are not shown in the Network panel of the DevTools. Under very rare circumstances, one such request may show up there, but it is highly unlikely and the DevTools will not help you solve your favicon woes.
1) Clear your chache. 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).
4) Try to rename it from favicon.{whatever} to {yourfaviconname}.{whatever} but I would suggest you to still have the normal favicon. This has solved my issue on IE.
5) Found another solution for this which works great! I simply added my favicon as Base64 Encoded Image directly inside the tag like this:
<link href="data:image/x-icon;base64,AAABAAIAEBAAAAEAIABoBAAAJgAAACAgAAABACAAqBAAAI4EAAAoAAAAEAAAACAAAAABACAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AIaDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wCGg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8AhoOC/////wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wCGg4L/////AHCMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/////wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wBTlsIAU5bCAFOWwgBTlsIAU5bCM1OWwnP///8AhoOC/////wD///8A////AP///wD///8A////AP///wD///8AU5bCBlOWwndTlsLHU5bC+FOWwv1TlsLR////AP///wD///8A////AP///wD///8A////AP///wD///8A////AFOWwvtTlsLuU5bCu1OWwlc2k9cANpPXqjaT19H///8A////AP///wD///8A////AP///wD///8A////AP///wBTlsIGNpPXADaT1wA2k9dINpPX8TaT1+40ktpDH4r2tB+K9hL///8A////AP///wD///8A////AP///wD///8A////ADaT1wY2k9e7NpPX/TaT16AfivYGH4r23R+K9u4tg/WQLoL1mP///wD///8A////AP///wD///8A////AP///wA2k9fuNpPX5zaT1zMfivYGH4r23R+K9uwjiPYXLoL1+S6C9W7///8A////AP///wD///8A////AP///wD///8ANpPXLjaT1wAfivYGH4r22x+K9usfivYSLoL1oC6C9esugvUA////AP///wD///8A////AP///wD///8A////AP///wD///8AH4r2zx+K9usfivYSLoL1DC6C9fwugvVXLoL1AP///wD///8A////AP///wD///8A////AP///wD///8A////AB+K9kgfivYMH4r2AC6C9bEugvXhLoL1AC6C9QD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAugvXyLoL1SC6C9QAugvUA////AP//AADgBwAA7/cAAOgXAADv9wAA6BcAAO+XAAD4HwAA+E8AAPsDAAD8AQAA/AEAAP0DAAD/AwAA/ycAAP/nAAAoAAAAIAAAAEAAAAABACAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP8AAAAA////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/wAAAAD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP/4+vsA4ujuAOLo7gDi6O4A4ujuAN3k6wDZ4OgA2eDoANng6ADZ4OgA2eDoANng6ADW3uYAJS84APj6+wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/9Xd5QBwjKgAcIyoRnCMqGRwjKhxcIyogHCMqI9wjKidcIyoq3CMqLlwjKjHcIyo1HCMqLhogpwA/f7+AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/xtHcAHCMqABwjKjAcIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo4EdZawD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+2xNMAcIyoAHCMqJhwjKjPcIyowHCMqLFwjKijcoymlXSMpIh0jKR6co2mbG+OqGFqj61zXZO4AeXv9gCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/6i5ygDF0dwAIiozACQyPQAoP1AALlBmADhlggBblLkGVJbBPFOWwnxTlsK5U5bC9FOWwv9TlsIp3erzAISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAALztHAAAAAAAuU2sAU5bCClOWwkNTlsKAU5bCwFOWwvhTlsL/U5bC/1OWwv9TlsL/U5bC/ViVvVcXOFAAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAALDhEALVFoAFOWwjpTlsL6U5bC/1OWwv9TlsL/U5bC/1OWwvxTlsLIV5W+i2CRs0xHi71TKYzUnyuM0gIJHi4AAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAACtNZABTlsIAU5bCD1OWwv1TlsL6U5bCxFOWwoRVlsBHZJKwDCNObAA8icJAKYzUwimM1P8pjNT/KYzUWCaCxgALLUsAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAApS2EAU5bCAFOWwgBTlsIAU5bCNVOWwgg+cJEAIT1QABU/XQA1isg4KYzUuymM1P8pjNT/KYzU/ymM1LAti9E0JYvmDhdouAAAAAAAAAAAAP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AFyk1AE+PuQBTlsIAU5bCAER7nwAmRVoADBojABRFaQAwi80xKYzUsymM1P8pjNT/KYzU/ymM1LgsjNE2MovXFB+K9MUfivbBH4r2BgcdNAARQH8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAQIDABIgKgAPGiIABRMcABdQeQAti9AqKYzUrCmM1P8pjNT/KYzU/ymM1MAqjNM9HmqmACWK7SIfivbZH4r2/x+K9vsuiudAFE2YACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAABhQfABtejgAoitEAKYzUACmM1JQpjNT/KYzU/ymM1MgpjNREH2mgABlosQAfivY0H4r26R+K9v8fivbyKIrtR0CB1SggevTQIHr0Nv///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAACBwsAJX2+ACmM1AApjNQAKYzUGSmM1MYpjNRMInWxABNHdQAcfuEAH4r2Sx+K9vUfivb/H4r25iGK9DE2gt4EIHr0yyB69P8gevTQ////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAOMUsAKYzUACmM1AApjNQAJX6/ABE7WgAUWJwAH4r2AB+K9mYfivb9H4r2/x+K9tYfivYfG27RACB69HsgevT/IHr0+yB69DL///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAfaJ4AJ4XKABVGagAKKkoAG3raAB+K9gEfivaEH4r2/x+K9v8fivbCH4r2EB133wAgevQsIHr0+SB69P8gevSAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAUSGwAFERwAElCOAB+J9QAfivYAH4r2lx+K9v8fivb/H4r2qR+K9gYefuoAIHr0BSB69M4gevT/IHr00CB69AUgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAkqSgAfivYAH4r2AB+K9gAfivZLH4r2/R+K9osfivYBH4PwACB69AAgevSAIHr0/yB69PkgevQwIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAAAAAAEEiAAB+K9gAfivYAH4r2AB+K9gAfivYsH4r2AB+G8wAge/QAIHr0MCB69PsgevT/IHr0eyB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAXZrYAH4r2AB+K9gAfivYAH4r2AB+K9gAfifUAIHz0ACB69AcgevTQIHr0/yB69MwgevQEIHr0ACB69AAgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAIDAB6E6gAfivYAH4r2AB+K9gAfivYAH4r2ACB+9QAgevQAIHr0fCB69P8gevT5IHr0LCB69AAgevQAIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAABBAcAEUqDAB6E6wAfivYAH4r2AB+K9gAggPUAIHr0ACB69AAgevQTIHr0qCB69HYgevQAIHr0ACB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP////////////////wAAH/8AAB//P/+f/z//n/8wAZ//MAGf/z//n/8wAZ//MAGf/zAAn/8/gJ//+AD///AAf//wEH//+cA///8AH//8BB///BgH//xwB///4If//4EP//+CD///hh///9w////4P///+H////j////////////" rel="icon" type="image/x-icon" />
Used this page here for this: http://www.motobit.com/util/base64-decoder-encoder.asp
For me the problem was that there was a div above it (which of course shouldn't have been in the head, but it happens). Firefox didn't mind, but Chrome did.
It doesn't look like Chrome allows you to display the favicon in the address bar...
http://en.wikipedia.org/wiki/Favicon#Use_of_favicon
I've also seen it done like this. Don't know if it would make a difference or not.
<link rel="icon" href="/favicon.ico" />
This is a bug in Chrome and Chrome only. To trigger the bug:
Set in your HTML <head> block: <link rel="shortcut icon" type="image/ico" href="favicon.ico">
Load the page with one favicon.ico image, then replace the favicon.ico file with a different one. You will not be able to get the new one to display, even if you use Classic Cache Killer or use incognito mode (security breach, anyone?). You can use another browser to confirm.
To solve the bug: Do a forced reload, by pressing shift + F5.
This is such a massive bug in Chrome, that it's already been reported to their developers, who have suggested using this method as solving the their bugs. (Source: GoogleSupport.)
This trick works: add this script in header or masterPage for Example
var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = '/favicon.png';
and will be cached. It's not optimal, but it works.
The path must be via the URI (full).
Like: http://example.com/favicon.png
so in your case:
<!DOCTYPE html>
<html>
<head profile="http://www.w3.org/2005/10/profile">
<title></title>
<link rel="shortcut icon"
type="image/png"
href=" http://example.com/favicon.png" />
</head>
<body>
</body>
</html>
Ref:
http://www.w3.org/2005/10/howto-favicon
Note if you have so many tabs open that Google Chrome is only showing the favicons then Google Chrome won't show the favicon for the selected tab, so if you keep reloading the tab with your page loaded in order to see your new favicon you will only see the text of your page's title.
You will need to reload your page, and then select a different tab in order to see your favicon.
I moved ico file to root folder and link it. It worked for me.
Also, in chrome, I have to wait 30 mins to get cache cleared and new changes to take affect.
These are the locations where browsers store the Temporary data in Linux:
Note: you can see hidden files in File Manager using Ctrl + H
for Terminal use the command ls -la
Chromium
~/.cache/chromium/[profile]/Cache/
Google Chrome
~/.cache/google-chrome/[profile]/Cache/
Also, Chromium and Google Chrome store some additional cache at
~/.config/chromium/[profile]/Application Cache/Cache/
and
~/.config/google-chrome/[profile]/Application Cache/Cache/
and generally here:
/tmp/
so to apply new FAVICON or try to show it up is to clean them
make sure u are inside each of these directories use the command:
rm -rf *
There's one more possibility that no-one else seems to have mentioned: You may have exported your .ico file with settings that Chrome does not support.
Another possibility is your .ico lacks a 16px image, and so may display nothing, even though you have other resolutions.
I would suggest trying different settings on your .ico exporter, or trying another one altogether.
One potential problem is that the server is not replying with a correct file type when the browser fetches the favicon,
using Base64 is a good workaround
This issue was driving me nuts! The solution is quite easy actually, just add the following to the header tag:
<link rel="profile" href="http://gmpg.org/xfn/11">
For example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="icon" href="/favicon.ico" />
Your html is completely wrong for starters, there should not be a div within your head section, nor after your body section. I suggest you look into correct html first before starting to work with favicons etc.
Using converticon.com, I converted my icon png file into an ico file. I placed the following code in my head tags:
<link rel="shortcut icon" href="icons/icon.ico">
I double checked and the file is in the appropriate location. The image has read and write capabilities. I then loaded the page on my browser but I all I get is an empty square box with a dotted border. I'm using XAMPP server. Why isn't the image displaying?
Did you try testing this on multiple browsers? Different browsers handle favicons differently.
Here are some things you could try.
Clear Your Cache
Delete all references of your link in your favorites.
Clear the file cache in your browser.
Shut down all instances of your target browser.
Reopen your browser and navigate to your website.
Force Refresh
If you are using Mozilla Firefox then you should:
Navigate to your website
Navigate to the exact location of your fav icon eg. www.site.com/favicon.ico.
Right click in browser window and select refresh.
When this is done Firefox is forced to reload the icon instead of the cached version.
Default behaviour of browsers
A second method for specifying a favicon relies on using a predefined URI to identify the image: "/favicon.ico", which is relative to the server root. This method works because some browsers have been programmed to look for favicons using that URI thus I would recommend placing the favicon in the root instead and see if that works. (rename the icon to favicon.ico also).
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
Image Format
At times there is an issue with the format of the favicon. If you are experiencing a problem across all web browser you could convert the favicon to gif or png and see if that solves the problem.
Force browser to update favicon
You can force your browser to update your favicon by passing a URL parameter. Using the ver parameter, you can increment the version number each time you want to force the downloading of new files.
add this to your markup.
<link rel="shortcut icon" href="/favicon.ico?ver=2.0" type="image/x-icon"/>
In MAMP (assume XAMP is same/similar) you would do the following:
- With MAMP running/open, hit the "Stop" button.
- Then go to: File > Edit Template > Apache httpd.conf
- Comment out lines:
#Alias /favicon.ico "/Applications/MAMP/bin/favicon.ico"
#Alias /icons/ "/Applications/MAMP/Library/icons/"
- Place your favicon.ico file in your site's root directory
- Start MAMP
You can probably do all sorts of crazy stuff here. Never worried about favicons during development, personally.
BTW - you don't have to clear your browser's cache, entirely. Just browse to the favicon and refresh it.... localhost:8888/favicon.ico
Just put the favicon at the root of your site, such as "example.com/favicon.ico" (make sure it is named favicon.ico though), and remove the above mentioned link element altogether. Browsers will check this location for a favicon by default if no is present, even IE.
After you do this, be sure to clear your cache when testing.
Try adding type attribute. Example:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">