My friend recently provided me with some disk space on his VPS and gave me the use of http://IP/czdavid/. I am not currently in need of a domain name since it will serve me as a file sharing site.
Now, the problem is that he has his favicon on the root of the IP and browsers search for it there. I can resolve the problem on individual pages with <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>, the problem is that directory listing and actual files - images and text files and other opened in a browser - will show the domain favicon.
Is there any way to set a favicon for the entire sub-directory, short of getting a domain name?
No, this is not possible.
favicon.ico will be retrieved from the root of the site, unless specified in a link element on an HTML page.
The only way I can think of, would be to use the URL rewriting capabilities of the web server. At least in case of an apache, it would be possible to create a ruleset, that would deliver a different favicon depending on the referrer from the request.
But it is an ugly hack and only works, if browsers actually submit a referrer with a request for a favicon.
Related
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.
In my index.php file I have:
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
And in assets/images I have the two files ("favicon-16x16.png" and "favicon-32x32.png"). What am I doing wrong?
Also, when I go to specific pages on my websites and refresh I see the favicon. But it doesn't show on the root page and it only only show on some other pages if I refresh.
Another thing I noticed is that this problem didn't happen when my index.php file was called index.html. However I have to name the file index.php because I'm hosting through Heroku.
The favicon rel should be defined as rel="shortcut icon"like this:
And also make sure the path file is correct for every page. If your root file is in the same directory i.e. inside your assets folder, then the above updated code should work but if your index is outside your assets folder, then you need to change your favicon path file to something like href="assets/images/favicon-32x32.png"
Not sure of what is causing this issue, but here is a checklist:
Use absolute paths, eg. /images/favicon-32x32.png, instead of relative paths, eg. images/favicon-32x32.png. Else you might have issues due to pages in different directories.
Makes sure your links are valid. For example, if your HTML code contains <link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16"> and your web site is http://example.com, then type http://example.com/images/favicon-16x16.png in the address bar of your browser: does it displays the icon?
Browsers are very tough regarding favicon caching. If the favicon is not configured correctly, you browser might display it anyway because it cached it during a (successful) previous attempt. Even if the favicon is configured correctly, your browser might not display it, at least immediately, because of failed previous attempts. As a workaround, you can add a kind of version to your URL. For example, <link rel="icon" type="image/png" href="/images/favicon-16x16.png?v=2" sizes="16x16"> and change it whenever you try something else. That will force your browser to consider the picture no matter what it encountered previously.
Because of this same caching issue, you might want to try with another browser, just to make sure your cache is not messing up.
While debugging your favicon, display either your browser's network logs (Firebug with Firefox, Dev tools with Chrome...) and/or your server's logs (eg. access.log with Apache) to understand what's going on. Again, this might reveal the dreadful caching issue: you try many things but your browser won't reload anything.
Browsers can have different behavior in local environments regarding favicon. Are you accessing your files directly, ie. from the file system? If so I suggest you to switch to a web server environment.
When and how do browsers request the favicon.ico file? Do they always check for it in root, or do they read the content of the webpage first to see if the page specifies the location?
I have my favicon.ico path in /images
There is the following tag in each of my pages:
<link rel="shortcut icon" href="images/favicon.ico">
When I load the page in my browser, it seems to work (I can see the file), but I don't know whether they are making bad requests to my root folder first (where the file doesn't exist), and are later making a request to the link.
I want to minimze 404's and wasted bandwidth, by the browser making incorrect calls to my site.
EDIT: I'm looking for some insight into how browsers work, and request this file, so my site structure is efficient.
Remember that not all requests to your site are for HTML pages! Requests for non-HTML content, like bare image files (e.g, viewing http://example.com/image.jpeg directly in the browser), cannot see a <link> tag. Therefore, they must fall back to searching for the shortcut icon in the standard location at /favicon.ico.
This still doesn't mean that this needs to be the canonical location, though! You can still keep it in /images/favicon.ico if you want - just make sure that a redirect is in place from /favicon.ico to wherever your preferred location is.
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">
Could there be any problems moving favicons and apple touch icons to a subfolder?
Like:
<link rel="shortcut icon" href="/images/favicons/favicon.ico">
<link rel="apple-touch-icon" href="/images/favicons/apple-touch-icon.png">
Yes, some browsers start downloading /favicon.ico at the same time they start downloading HTML document. If there's no file you'll get an extra 404 in your server log and the browser will have to make an extra HTTP request when it recognizes the icon is elsewhere.
A quote from Yahoo's Best Practices for Speeding Up Your Web Site:
The favicon.ico is an image that stays
in the root of your server. It's a
necessary evil because even if you
don't care about it the browser will
still request it, so it's better not
to respond with a 404 Not Found. Also
since it's on the same server, cookies
are sent every time it's requested.
This image also interferes with the
download sequence, for example in IE
when you request extra components in
the onload, the favicon will be
downloaded before these extra
components.
The only problem could be that your relative link is not under the root domain, so that
HOST / YourPath /images/favicon.ico
can be found difficult.
If that would be the case then you would need to include a base href tag in your document and then this would be solved.
p.s. here is the parser i'm writing now to auto download favicons, find yourself in the flow: http://plugins.trac.wordpress.org/browser/wp-favicons/trunk/includes/class-http.php