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?
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">
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've been banging my head against the wall for hours now trying to get this favicon to work. My site is hosted on Bluehost and I uploaded a favicon.ico file to the public_html folder. It always just shows the default Bluehost logo in both Safari and Chrome. I included the following in the header after all the meta tags:
<link rel="icon" href="favicon.ico" />
<link rel="shortcut icon" href="favicon.ico" />
Have tried icon sizes 16x16 and 32x32, always named favicon.ico, and also tried putting href="http://www.mydomainname.com/favicon.ico" in the tag. I am always clearing the cache before trying to load the site.
If I inspect the page source in Chrome, I see the link for the favicon, and the page source page in Chrome shows the favicon correctly. When I click on the favicon link then try to load the site, the favicon I want flashes briefly before going back to the default Bluehost one.
In case it matters, I just migrated the site from Wordpress and deleted all the "wp" files, but maybe something is left that's screwing it up. Anyone have any other ideas?
I'm not sure if that gets cleared from the cache when you clear the browser cache but what you can try is adding a cache-buster to the path. ex: favicon.ico?ver=20130212
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