Hope you're all well.
Recently, I started coding in visual studio code as I'll be changing my career to software development, and as I began with HTML and CSS, I stumbled upon a couple of issues.
The most irritating one so far is a favicon issue. I've done everything I can and favicon still won't show up on my demo website. I even cleared the cache, checked the route path before writing the code, but nothing would help.
I saved the favicon image in the folder named "images" in my main folder called VSCodeTraining. I put the following line under the <head></head> and still nothing happens:
<link rel="shortcut icon" href="images/favicon.png" type="image/png">
As I am working on a Mac, is there maybe something to do with the fact I'm not importing it from the Mac's main folder?
Thanks for your help in advance and sorry for the stupid question.
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.
OK I am trying to get my favicon working on my site: Hidden for privacy
For some reason it isn't showing. I am using haml and have this in my header...
= favicon_link_tag "favicon.ico"
It is also producing the html...
<link href="/assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
I do have a favicon.ico in my assets and I am not seeing any issues in my console. Also when I check the source and click the link for the file, it does find it. I have checked every tutorial possible and it doesn't work. I have also tried Safari, Chrome, and Internet Explorer. Thanks for any help.
The icon file needs to be under public/assets and clear the browser cache if it still not showing up.
For more details: Adding Icon to rails website?
I can not get my favicon to display on chrome. url is http://www.videobtc.com.
I read other posts on the same question, the best solution was to use
I proceeded to use this and I am still getting nothing. Help would be greatly appreciated.
This is how I have my favicon set up.
<link rel="shortcut icon" href="unipartisan_favicon.gif" />
...in the header
unipartisan-favicon.gif is in the htdocs directory(XAMPP) which is the same directory as my .php files that link to it. Perhaps your file type is not correct.
This has worked on both Chrome and Firefox, which are the only ones I have tested on.
Edit: I think it may also be imperative that the file you are using as a favicon has an equal pixelation ie. 300x300, 20x20, 489x489, or in my case 2156x2156px. The browsers have automatically re-sized my favicon to fit properly.
I placed my favicon here:
http://www.vittoriosastarsnursery.com/favicon.ico
But for some reason it doesn't want to show in Firefox. It did work in IE, but I'm more concerned about getting it working in Firefox.
Suddenly I found answer here
You should add "?" to your favicon path and it works! Even with path such as images/favicon.ico. Just try:
<link rel="icon" href="/images/favicon.ico?" type="image/x-icon">
Other browsers works too.
Remember to restart mozilla, because of it's own cache, that is not connected with css and other caching.
updated:
Another way is set redirect from favicon.ico to /images/favicon.ico (301 works)
I can see it in Chrome, Firefox, and IE. My friend had a problem like this when we were testing back in college. It was just a weird caching thing that made her think it wasn't working right. I'm sure that everyone besides you will be able to see that it works fine.
Try opening the Dev Tools (CMD + Option + i on Mac) and hard refresh the page (hold the refresh button until options appear).
You could always try restarting your browser after clearing the cache and see if that helps.
<link rel="icon" href="http://khachmeruk.com/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://khachmeruk.com/favicon.ico" type="image/x-icon">
Two things to consider
If it's working in some browsers and not in others it's likely going to be a cache issue. Clear your cache and refresh, or for more in depth info: How do I force a favicon refresh
If favicon.ico is in the project's root folder but not being recognized by any browsers I would check out the .htaccess, or whatever equivalent of .htaccess depending on server type etc.
For those who suffer from this problem, try move your favicon file to home directory. It worked for me and solved my problem.
https://github.com/ritwickdey/vscode-live-server/issues/77
I was facing this problem with VS-Code live server, as discussed above it's browser cache issue, there is popular github thread on this.
just try the trick:
<link rel="icon" href="favicon.ico?v=2" type="image/x-icon"/>
Happy learning
If you don't want to spend hours. trying to figure out why your favicon is not showing up, make sure to always place it in the root of your project folder and add a link in the <head></head> section of your page like so:
<head>
//other code
<link rel="icon" href="favicon.ico" type="image/x-icon">
//other code
</head>
Folder Structure
--app
-----img
-----js
-----css
-----favicon.ico
It is just a caching issue. Just change the file name and it will show up immediately... otherwise do nothing and it will show up eventually. Browsers are just very persistent with the favicon caching.
It works for me in FireFox. When running identify (part of the ImageMagick package), it reports this problem:
identify: invalid colormap index 'favicon.ico' # error/image.c/SyncImage/3906
Perhaps opening the file in a graphics editor and re-saving it would clean up this error.
I had this problem too. it turns out (for me at least) that blocking users / agents with no referrer via .htaccess caused the problem.
Something that hasn't been mentioned that seems to have been the cause of my issue was the image file size. The image I was using was 4254px X 3850px at 1.3MB. It worked fine in Chrome desktop but not on Chrome mobile or Firefox. Changing the dimensions to 120px X 120px reduced the file size to 9.1KB and the favicon now works well.
P.s. This only works if your code has no issues.
For those who have tried everything and the favicon still does not show up:
Put it in your sites Root Directory
Rename it "favicon.ico"
Make sure your code is like such:
<link rel="icon" href="favicon.ico"/>
IF you still have the same problem, put the whole website in ANOTHER DIRECTORY, like a Memory Stick (that fixed it for me :) ).
REMEMBER: You HAVE to put the icon code in the of EVERY page. :)