I am used to just save the favicon.ico in the public_html folder for adding the favicon.
The problema I have now is that I want to display the in all the files of a certain subdirectory, ( example.com/example "onwards" ) just putting it there, doesnt seem to do the job.
I know I could go document by document and add:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
But I hope there is a more practical way, first I thought there might be a way trough CSS but that doesnt seem to be the case.
This would have come in handy because every document already includes:
<link rel="stylesheet" type="text/css" href="test.css" />
So any ideas or workarounds to how to solve this?
You will have to specify the favicon using the link rel=... notation.
Browsers will search only in the root directory of the domain for a default /favicon.ico. Any variations from that you have to specify explicitly.
Adding the <link> element is the right way to go. Use a template engine (e.g. Template-Toolkit) to avoid duplicating common content manually.
It might not be the most elegant way, and i came here to find a solution.
Unfortunaly the given answers did not suited for me.
In my case i working on a localhost (via private ip)
this is what i did :
<link rel="icon" href="<?php echo rtrim($_SERVER['PHP_SELF'], basename($_SERVER['PHP_SELF'])); ?>favicon.ico" type="image/x-icon">
As mentioned above don't waste time on searching. is the only way in that case. When you will be checking out results of your markup changes, remember that browser cache can be tricky.
redirect favicon.ico url for all subdomains to public_html's favicon.ico
ie. subdomain.website.com/favicon.ico should go to www.website.com/favicon.ico
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.
I have two websites hosted on AEM or cq5 with two diffrent domains. The new domain also displays the same favicon. I'm trying to delete that in head.jsp of template. But it still displays.
Even though I delete in both the templates it doesn't delete. I cleared the cache too. Is there a way to delete it?
Seems this isn't the first time I've had to do this. So posting for the next time either of us look ;)
As a work-around
<link rel="shortcut icon" href="#" />
solves the 404 error
You can create Blank Favicon.That will override the default favicon.
I had similar problem basically you need to:
Delete the root/server favicon check if it exists, this is usually
automatically picked for all your site/s
Explicitly point a specific favicon for all sites as below:
link rel="icon" type="image/x-icon" href="favicon.ico"
This should fix it after clearing you cache/browser.
Sample my server has multiple test webapps with different favicon:
http://tomcat-alkathirikhalid.rhcloud.com/itrainexam/
Cheers
Most shortcut icon are presented in HTML like this:
<link rel="Shortcut icon" href="url" />
but many sites don't have shortcut icon in their html code but still chrome is showing me icons on tabs. How they made it? I want to download icons from different websites but I don't know where my crawler should look for them. Examples of websites where I can find it:
http://www.amazon.com/dp/0976470705?tag=lessolearn01-20&camp=0&creative=0&linkCode=as4&creativeASIN=0976470705&adid=0E34NG800FT9HMWYP4D6
http://www.startuplessonslearned.com/2008/10/lean-startups-vs-lean-companies.html
It is known as favicon (most of times!).
For the second link you pointed to, it is :
<link href='http://www.startuplessonslearned.com/favicon.ico' rel='icon' type='image/x-icon'/>
Also, it could be added in several ways. For more info read this article.
On the second page give as example, the tag is
<link href='http://www.startuplessonslearned.com/favicon.ico' rel='icon'
type='image/x-icon'/>
The attribute specification rel="icon" is practically synonymous with rel="shortcut icon".
On the first page, there is no tag that affects favicon issue, but at the server root there is a file with the name favicon.ico, i.e. http://www.amazon.com/favicon.ico, and that’s what browsers use, by convention. Putting an icon under such a name at the server root thus makes the link elements redundant, provided that you want to use the same icon for all pages. Of course, not everyone can put files at the server root.
you can also use .png file:
<link rel="shortcut icon" type="x-icon" href=".directory/image.png" />
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.