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.
Related
I am working on building a website using GitHub Pages and am having a bit of trouble getting the favicon to display properly. My understanding is that, due to compatibility concerns, you need to add various custom bits of code to make sure that your favicon displays correctly across different browsers.
I am currently using Safari 14.0.3 and Google Chrome to test this.
I have included the following HTML code to display my favicon:
<link rel="apple-touch-icon" sizes="60x60" href="/images/favicon_2.png">
<link rel="icon" href="/images/favicon_2.png">
The only problem with this is that it is not displaying on the tab bar in Safari. It correctly displays on Google Chrome and in the search bar at the top of Safari, but not in the tab bar. I have included images below for reference:
Where it is showing correctly in Safari:
Where it is not showing in Safari:
Note: I am trying to get the globe favicon to display.
I have read some similar questions that have talked about clearing cache etc., but none of these seem to have worked.
What I have tried so far:
Clearing all of my Safari Cache (clearing all of the history)
Emptying all of the Cache
Deleting all of the files in the Safari Favicon Cache folder on my Mac
When I did two, and then initially launched Safari, the correct favicon briefly displayed in the tab bar before switching back to the other one.
I am a little bit unsure of what to do here. Does anyone have any ideas? Do I need to add additional code? Any links to any examples or resources would be greatly appreciated. Also, as a side note, are there any links to documentation where I can read further about what all of the different rel="" do here?
Thanks.
you can try use this tool:
https://realfavicongenerator.net/
it's worked for me
I figured it out -
There are two different lines of HTML code required to make favicons display on Safari properly. Changing the line:
<link rel="icon" href="/images/favicon.ico?v=M44lzPylqQ">
will make the favicon display in the top search bar on Safari as well as on Google Chrome.
The favicon displayed on a Safari tab is managed differently. This requires the use of HTML code for the Apple mask-icon for Safari Pinned Tabs. Consequently, this requires the editing the following code below:
<link rel="mask-icon" href="{{ base_path }}/images/safari-pinned-tab.svg?v=M44lzPylqQ"
color="#000000">
Editing this line will allow for the favicon to be displayed on the Safari tab.
Note: Both lines are necessary for the favicon to display in both the Safari search bar and the Safari tabs.
First, check that there aren’t any other web pages on your site that are setting the favicon. If there aren’t it is just a little safari bug.
I have had a similar issue and it seems that safari will hold onto the favicon for extended periods of time even if the code is changed. Unfortunately, you may just have to wait.
For me, the problem was that Safari doesn't support SVG. I should have known not to trust W3schools when it said that Safari supports it (I've submitted a page correction). Based on https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7 which I found via https://caniuse.com/link-icon-svg, the correct method for having an SVG icon (in supported browsers) while still supporting old Safari users appears to be:
<link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
Unless you've already got an .ico file, in that case you might as well use that file instead of a PNG. Note that you must now use sizes=any to trick Chrome into doing the right thing and using the SVG which it supports.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
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?
The favicon does not work on some pages in IE.
But the favicon works on these pages as well in other browsers (tested in Firefox and Chrome).
Pages not showing the favicon in IE: link - favicon error in IE
Pages showing the favicon in IE: link - favicon works
You have tagged the question with the "doctype" tag. This is a clue of what might be happening...
I am confident that the issue is related to the malformed HTML (or XHTML) tags in the document which IE fails to render the favicon. I myself already had lots of "unrelated" issues due to malformed contents. I suppose, in this case, the document which fails to render the favicon is triggering a kind-of "quirks mode" in IE.
Unfortunately, there are so many issues with both documents which turns difficult to find out what exactly is the one triggering the specific IE "quirks mode" which causes the favicon problem.
The document where favicon works raises 61 errors and 3 warnings in the W3C markup validation service.
The document where favicon does not work in IE raises 98 errors and 25 warnings in the W3C markup validation service.
So, probably it is one of these additional 37 errors and 22 warnings at the failing favicon document which makes IE too much confused and incapable of parsing the thing as a whole.
I have not dived in the errors and warnings, because they are too many. But I'm sure that if the validation passed, favicon would be appearing at both pages.
IE doesn't show the favicons images of those of don't have type="image/x-icon".
I think the best thing to do is convert them to another format.
If you are displaying the icons manually then you could download each, convert it with an image program, and upload it to your site.
As said on this article:
Internet Explorer sees only the server MIME of the ICO file, otherwise
it ignores the file.
Try using this:
<!-- For IE6+ -->
<link rel="shortcut icon" href="path/to/favicon.ico" type="image/vnd.microsoft.icon">
From what i can see you are using
<link href="http://images1.content-ug.com/uniguru-cont/img/ug_favicon.ico" rel="shortcut icon" type="image/x-icon"/>
I want to ask you to follow a couple of steps in order to troubleshot you through your problem.
Copy your current favicon from this address
Rename it
Put it on the same directory as your problematic pages
Link the renamed favicon from the pages that have this problem by using the format as below (put the rel attribute first):
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
Lastly if all the above doesn't resolve your problem, then just remove the type from the link (even though i really don't think this will do any change)
<link rel="shortcut icon" href="favicon.ico" >
Hope this solves your problem
Here are a couple of things that I discovered while attempting to find answers for your problem.
Make sure the favicon.ico is a valid icon file. There are bad ico files out there that either are not true icons or they are just corrupted from a bad converter program. So Remake favicon.ico first and for most.
Make sure the file name is favicon.ico and located in the root directory for easy default purposes.
Internet Explorer will not show/display an icon if it is on your local harddrive. It needs to be on the internet. That is just IE not specific to other browsers.
Internet Explorer also don't like to display if you do not use www before your domain name.
You may also want to clear cache as well to make sure you aren't looking at your old temp files.
I hope this helps you out a bit.
The problem is the broken object/embed tags. Remove the markup below and the favicon should start working on that page (at least it did in my tests on IE9).
<object ...>
<embed class="u_v" type="application/x-shockwave-flash" ...>
</object>
You should have no need for that markup anyway, since the script immediately below it will generate the appropriate embed code for you.
Use this is all browser sported:
<link rel="shortcut icon" href="img/favicon.ico">
try this inner head tag.
Make the icon's file name as 'favicon.ico'
Keep the icon in root directory
No need to include like <link rel="" .... />. By default it will render the icon which named 'favicon.ico'.
IE caches the favicon. Try going to Internet Options and delete the browsing history there.
Try adding both these lines,may be this will work
<link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
<link rel="icon" type="image/x-icon" href="favicon.ico">
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. :)
I have "Googled" this quite a bit in the past hour.
I am working on a new website, and I've never used favicons before (I always forget about them). So, the first place I looked was Google, and the first result that came up was this one:
How To Add A Favicon To Your Site (W3.org)
And after trying out the first two options, and re-uploading the files to the server I have found that neither of the snippets of code on that page listed above work for me. I have double-checked that all references to the favicon are correct and that all files are in the right places. I have even tried using a .PNG file instead of an actual icon (.ico), which I have seen in use on other sites.
Then, I went back to Google and looked at a few more sites, and tried the code in those tutorials. It worked! Well, kind of... It worked in Flock web browser, FireFox, and Chrome. But it didn't work in Internet Explorer 9, 8, 7, or 6.
I then came over here to S/O, and "View Source"'d the homepage and used their favicon code and that still didn't work!
Here's the latest piece of code that I have now:
<link rel="shortcut icon" href="http://mywebsite.com/favicon.ico">
What is the most reliable way of ensuring my Favicon displays in every browser?
Updates
Tried Bookmarking the page - Didn't work.
Favicons are really annoying to recieve because they cache. Try using another computer and navigating to domain.com/favico.(png/ico)
Check the permissions to your .ico/.png file.
I had the same problem once. So I went to http://my-url/my-favicon.ico and I got "Permission Denied" error.
I did chmod 644 to my-favicon.ico and it worked. :)
Here is code
<link rel="icon" type="image/x-icon" href="images/favicon.ico" />
For more detail about favicon please check