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

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.

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.