I've looked at several posts on here, and I've done further research online, but I can't see to find the problem.
I put the favicon.ico in the main directory, but it's not showing up on any browser. I've tried it personally on Firefox and Safari, and I've tried the rest on Browsershots.
I also have this line in the head of the html:
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
I've also tried it without the type..., as I have it on other pages on the same server.
This website doesn't show its favicon (thistle)
This website does show its favicon (greenman)
Two of my sites on the same server with the favicon in the same place of the site's directory. ??
The only thing I can figure is there was a problem converting the ico online and saving it on my MacBook Pro before uploading it to the server?
Any help or hints or thoughts are greatly appreciated.
Had the same problem. Found this great answer: https://stackoverflow.com/a/16375622/5359989
What worked for me was changing 'favicon.ico' to something unique such as 'myfavicon.ico' and referencing it in the html accordingly. Hope this works for you also.
Change this:
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
To this:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
Another reason why your favicon is not shown could be because you're viewing a cached version of your site.
Clear your cache and open the site again and you will see the favicon.
Chrome didn't like the fact my favicon.ico was a 64x64 image. I changed it to a 32x32 pixel image and it showed right up!
You're using a relative path in your href="" attribute. Change it to a root-relative path /favicon.ico or an absolute path http://yoursite.com/favicon.ico.
Not all icons are the same! I had this problem for a while and could never figure out why some browsers didnt show the icon. I knew with absolute certainty that the file existed where the link tag said it did. Eventually I discovered that, at least for Chrome and Opera, they WONT display some icons depending on the formats within the .ico file.
E.g. a .ico that has, only, 64x64 and 32x32 and 16x16 formats will display.
BUT a .ico that also has, IN ADDITION TO those above, 512x512 256x256, 128x128 and 48x48 formats, will NOT display.
That really looks like a browser issue but its curious that it affects more than one browser.
Anyhow the solution, for me at least, was to only include 64x64 and 32x32 and 16x16 formats.
I had the same issue but solved it in the following way.
In w3schools at the "HTML favicon" section it says:
To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico".
In my case I had a project in express.js. In express one sets the root directory of static files with the command:
app.use(express.static('public'))
In my project, "public" seemed as the root directory for all my static files. So, I just had to add a folder named "image" inside "public" where I saved my "favicon.ico". Finally I linked the icon in my main template html file according to my project's directory tree:
<link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
Notice that I don't have to refer to the public folder because it is set as root by my framework.
In summary I think that if one uses a simple html project with vanilla js the w3schools' guideline is straightforward. But, if you're using a framework like express, Django etc. you have to think carefully how does your framework serve your static files.
Related
enter image description here
enter image description here
I'm working on a local server and trying to add a simple favicon. I have already searched high and low on these forums, and tried everything. I'm not sure what is going wrong.
This is the code I have inserted into the head of my code:
<link href="http://www.canwise.com/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
my favicon image is in the same folder as my html file for this page. I haven't even put it in an images folder.
First of all, please read the typical w3sfoundation example:
W3-Schools - HTML Favicon
Please note, that in this example the path starts with /
The / means, that the icon is relative to the root directory of the webpage. So if you are opening for example:
/subpages/guestbook.php
and your favicon is located at:
/favicon.ico
you also need to write it that way. Otherwise it will try to open:
/subpages/favicon.ico
Please also define the type:
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
You also need to keep in mind, that localhost often works different from an online webpage. Please open the browser developer tools using and look at networking. Clear all and reload the page. You should se an entry, that tries to load the favicon. If it cannot be loaded, you will find the reason there. If it works, you will see a 200 GET (HTTP SUCCESS). If not, the error code will help you find the source of favicon not loading properly.
If you find no entry for the favicon at all, please run your HTML/PHP through one or more linting tools. Sometimes a slight syntax error will result in very specific HTML features breaking. From the picture, your HTML looks good so far.
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.
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.
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">