Not filling entire icon space.
website
The favicon on my website is squished. It only happens on browsers. It doesn't happen with the safari mask icon, windows 8/10 Tile icon, Android (Launcher) shortcut icon, or the iOS safari shortcut icon. Is there a way i can fix this?
this issue may appear when your computer browser is cached ...
click on CNTROL + F5 on key bored to make hard refresh and add this code to tag on your HTML PAGE assuming that your icon image on folder and img/icon/(your favicon name)
please resize your favicon to heiht : 16px and width 16px and paste the below code
<link rel="shortcut icon" type="image/x-icon" href="img/icon/favicon.png">
hope this works for you
See my annotations in this image from invoking iOS’s Add to Homescreen option https://i.stack.imgur.com/XNoVG.jpg
My notes simply illustrate what Ahmed already stated: you need to spend more time reworking the pixels in your favicon. Yes, it’s all about anti-aliasing and pushing pixels.
Related
The icon that displays on my iPhone XS (Safari) is incorrect. If I bookmark the site or add to favourites the new/correct image is displayed but if I click the 'tab' icon, where you see all open tabs it's a very old favicon.
The image that is displayed isn't my the hosting. I've even changed hosting provider recently so everything is fresh. I can only assume the previous icon is cached from the old site on my phone - but the same domain name.
I have cleared Safari's cache and in "Advanced" the "Website Data" but no matter what I do the icon won't change. I've tried adding ?v=2 to the URL to try and force a fresh download but no matter what, it won't display the image I'm specifying in the head.
I load my icons like this:
<link rel="apple-touch-icon" href="icon.png" sizes="192x192">
<link rel="shortcut icon" href="favicon.png" sizes="32x32">
Any ideas? The only thing I can think of is the device itself is storing aspects on websites but outside of Safari and the cache?
I had the same problem and found the following.... use the "+" in safari to go to your START PAGE, then delete ALL instances of that page, go to edit at the bottom and turn off favorites, then turn it back on. The favicon updated.
Interesting, with further research I found out it's a known issue for Safari IOS/IpadOS to cache favicons in a hidden location.
Safari has extremely aggressive favicon cache. I've seen it happen multiple times on large production websites that the favicon doesn't update for months.
source
It seems like MacOS has a folder that stores that data, but unfortunately that location is not accessible via mobile (to my knowledge).
Without giving you a fix for you issue, I hope that my answer might bring light on this cache issue, as I'm experiencing the same problem on my IPhone 13 pro 15.6.1
Kindest regards
I have the following in my index.html for getting favicon:
<link rel="icon" href="https://cdn-xyz.favicon.png" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="192x192" href="https://cdn-xyz.favicon-192.png" type="image/x-icon" />
The first link is to a 48x48 pixel image as I want the browser to use that make the network call faster.
The second link is to a 192x192 pixel in cases when the larger size image is needed (for example on iOS add to home screen).
The problem is that both these images are fetched at the start by Firefox (other browsers don't have this issue). Why is this and what can I do to prevent this?
Looking at Firefox DevTools Network tab, both favicon requests were initiated by FaviconLoader.jsm. Looking at the code, it seems that loadIcons() loads a rich icon and a tab icon, chosen by selectIcons.
The way selectIcons chooses the best tab icon and rich icon is the following:
The tab icon is the svg icon, the smallest icon larger than 16x16 (for normal dpi), or the ico file, in order of ascending preference.
The rich icon is the largest rich icon (ie. larger than 96x96).
In your case, the 48px icon is the tab icon, and the 192px icon is the rich icon, thus the two requests.
The rich icon is probably used by Firefox for the top sites icons on the new tab page.
I don't think you can prevent this, but favicons are usually fetched by the browser after the page has loaded, so it shouldn't affect your website's performance.
I used the following:
<link href="https://www.domain.com/apple-touch-icon.png" rel="apple-touch-icon" />
This works for adding a shortcut to the homescreen. However, when bookmarking the page, it defaults to the little compass icon. Is there an extra step to do this?
To clarify, the icon shows up everywhere, (i.e titlebar, i.e. favorites, etc), except the iphone bookmark.
Not difficult, you need a favicon.ico file and ftp that up to the site.
Have a look here http://www.favicon.cc/, or look for favicon.ico in google.
They are very easy to make using photoshop or preview.
Getting a weird behaviour for FontAwesome icon font.
Icons do show up on a page load, but when I'm flipping between the tabs and going back to the original page, icons might appear as white squares (not every icon, just some). When hovering mouse over them, they are back to normal display.
I'm loading the font via CDN:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
I guess white squares are from FontAwesome CSS, the browser having troubles to recognise the character:
.fa-facebook:before {
content: "\f09a";
}
I'm a bit lost why it is keep happening after switching tabs. The font seems to be loaded, as on the first load I can see the icons. Might it be a conflict with other CSS?
Need some suggestions where to look for a root cause.
I was brought to your question, because we have been experiencing the same thing on our site with the Symbolicons icon font.
After doing some research I found out that this happens due to a bug in Chrome. So the issue is not with Font Awesome and I don't think you can do anything for now to fix it. Guess we just have to wait for the fix to hit the stable Chrome version.
Links to the bug discussions:
Issue 336075: embedded fonts unload
Issue 336170: Wrong rendering of Webfonts when loading tabs in background
I was wondering if the icons in the address bar, which are showing the site's information, are called favicons or does it depend on the browser?
For example in Safari the favicon is diplayed in the address bar:
But not in Chrome and Firefox:
Chrome
Firefox
So what would you call these icons in Chrome and Firefox?
And third, is there a way to change these icons or do they just come with the browser defaults, when visiting sites?
The parts you've circled for Chrome and Firefox are not favicons, they are site information. The favicons for Chrome and Firefox are shown in the tab right at the top, with the title text next to them.
Favicons are decided upon by the site, not the browser. For instance, the favicon on this page can be viewed in the page source:
<link rel="shortcut icon" href="//cdn.sstatic.net/stackoverflow/img/favicon.ico">