i have added my css files that are bundled like this
#Styles.Render("~/Content/themes/base/css")
#Styles.Render("~/Content/themes/vendors/css")
<link href="~/Content/themes/base/fonts/fonts.css" type="text/css" rel="stylesheet" />
and in firefox , chrome i see these 3 files requested twice
first request with header
Accept text/css,*/*;q=0.1
Second request with header
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
this is same for all 3 files and i don't know who requested second file with different headers
can some one help me how can i fix it.?? any help will be appreciated
Related
I have read numerous questions with a similar trouble but they usually were caused by a server misconfiguration. I use unpkg.com service so I assume it is configured correctly.
My HTML5 static page contains:
<link rel="stylesheet" type="text/css" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css">
My app is written in Vue but that code is still present in generated file.
Chrome shows the following warnings:
Resource interpreted as Stylesheet but transferred with MIME type text/plain: "https://unpkg.com/bootstrap/dist/css/bootstrap.min.css".
Here is the response caught by Network tab in Developer tools. Content type is text/plain
And the second redirected request with text/css:
When I enter this URL in Chrome location bar, I receive 302 status code first having the text/plain mime type first and the second fetch is expected text/css.
Is this sort of Chrome bug that it complains about the content type of request to be redirected? Or is it unpkg.com error? Is there a way to get rid off these errors (I can bundle the file in my Vue app but I want to minimize the transfers).
You can try it live here: https://beta.mezinamiridici.cz/ankety/jizda-v-tesnem-zavesu-za-kamionem
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.
Synopsis
After creating a simple HTML template for testing purpose, with no favicon.ico, I receive an error in the console "Failed to load resource: the server responded with a status of 404 (Not Found)" | "http://127.0.0.1:47021/favicon.ico".
I am trying to figure out where this error is coming from and wondered if someone had any ideas to point me in the right direction.
My HTML page looks like this:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple JavaScript Tester 01</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
When I run this page in Chrome browser and open the console, I see the error message "Failed to load resource: the server responded with a status of 404 (Not Found)" | "http://127.0.0.1:47021/favicon.ico". I am running this on a local IIS server. I see this same error message each time I create a new page.
Is it possible this error is coming from another page on my IIS server that I am unaware of?
By adding this to the header section, you will definitely remove the error in the console log:
<link rel="shortcut icon" href="">
From Chrome 2020 this is the solution :
<link rel="shortcut icon" href="#">
Because your browser always looks for the favicon.ico even if you don't specify it within your HTML.
So I'd suggest just creating one and placing it in the root of your website.
Google favicon generator and make an icon. Name it favicon.ico and drop it in your webroot.
See if this helps.
Also here is a tutorial on favicon: https://www.w3.org/2005/10/howto-favicon
You can add this to your <head> tag
<link rel="shortcut icon" href="#">
Works for me
<link rel="shortcut icon" href="~/favicon.ico">
You can't actually stop browsers requesting the image. However if you do have a favicon it can be cached by the browser which can reduce the number of requests coming in. so if you have the favicon in the root folder of the application the link above should work
It's nothing but an icon on your tab bar. This is the main point. You can also use any icon for your local file. However, the format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors. For more information please read this documentation: https://www.w3.org/2005/10/howto-favicon.
It is an old issue apparently, but since I'm just starting to learn coding...
I had the same favicon issue, both with FF and Chrome and unfortunately, none of the suggestions here helped.
Even when I have the "javascript.ico" file in my folder
<link rel="icon" href="javascript.ico" type="image/x-icon" />
this still wouldn't be able to find the icon, so the problem remained.
However, the following helped remove this error message:
just change the ".ico" extension of, both your file and in the HTML code into for example ".png"... problem solved, icon found.
<link rel="icon" href="javascript.png" type="image/x-icon" />
And after doing this, even if you change back the extension into ".ico", it'll still work and the error won't return.
I have faced the issue with using Angular. I have moved favicon.ico from src folder to assets/img and changed href in link tag in index.html:
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico">
Also I have removed src/favicon.ico from angular.json builder options.
It seems pretty lame, but the thing that works for me is that I just reload the page and the browser doesn't show any error.
Something strange seems to be happening with IE on Windows Embedded CE 6.0 that I can't explain. I have tag in my page something like this:
<LINK href="~/getStyleSheet.aspx" type="text/css" rel="stylesheet" />
When I open this page on the device the page looks totally wrong (like it doesn't have any styling). After some fiddling around I changed it to be:
<LINK href="~/getStyleSheet.css" type="text/css" rel="stylesheet" />
And just created a static .css file with the appropriate contents. That made it worked.
So it seems that IE is ignoring styling if it doesn't come from a file with a .css extension. Any one have any thoughts on this? Is this by design? Is there a way around this?
Thanks for any help in advance!
It looks like it is related to HTTP headers. I narrowed it down to the Cache-Control header. When it is Cache-Control: no-cache the CSS doesn't get applied. If it is Cache-Control: private then the CSS does get applied.
Is there some directive I could use in my HTML to tell the browser not to ask for the favicon?
Add this line.
<link rel="icon" href="data:,">
This assigns an empty data URL to the favicon’s element which specifies the location of the external resource. This trick stops the user’s browser from sending an automatic HTTP request for the favicon.
This has some more details
No, I don't think there is. From Wikipedia:
Most web browsers do not require any HTML to retrieve a favicon that conforms to the de facto file name and type (favicon.ico) located in the web site's root. If no favicon link is detected upon HTML page load completion and no previous site visits are recorded in the browser's history, a favicon.ico is requested automatically.[8]
The only thing you could do is explicitly point the browser to a different location (that for example could return a 204 no content)
<link rel="shortcut icon" href="http://www.example.com/my_empty_resource" />
You could try pointing the <link> at a data URL. As commented below, IE will not like this, though.
Example (from 11011.net):
<link rel="icon" type="image/gif" href="data:image/gif;base64,R0lGODlhEAAQAIAAAAAAAAAAACH5BAkAAAEALAAAAAAQABAAAAIgjI+py+0PEQiT1lkNpppnz4HfdoEH2W1nCJRfBMfyfBQAOw==" />
Edited to reflect Pekka's concern regarding IE.
If you are not using HTML and its auto generated by Flask or some frameworks you can always add a dummy route in the app to just return dummy text to fix this issue.
Eg for Python Flask Application.
#app.route('/favicon.ico')
def favicon():
return 'dummy', 200