Using Chrome on my Retina MacBook Pro, I can't get the higher resolution (32x32) favicon on my blog to load first. When I first open the page (http://insofar.org), the 16x16 version is displayed and it is only on reload that the 32x32 shows up. As an alternative example, when loading Daring Fireball, its 32x32 favicon is loaded first. And yes, I cleared my cache.
In both cases, we're using the following tag in the head section:
<link rel="shortcut icon" href="/path/to/favicon.ico">
where favicon.ico contains both the 32x32 and 16x16 versions.
How can I force the 32x32 on Retina displays?
EDIT: I found that the issue is fixed in the latest Google Chrome Canary (v24.0.1300.0).
You should try Faviconer.com - designed for creating 16x16 and retina 32x32 favicon .ICO files. You can draw a new icon from scratch or you can upload any graphic image and convert it to .ICO format.
Here is the link - http://faviconer.com
For importation http://xiconeditor.com/ worked very well for me.
It creates ico with 16, 24, 32, 64 sizes.
I suggest to generate first your image with your editor in the different sizes then import each one in order to keep the quality.
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 no control over my site presentation icon. Browsers choose to show the menu button that I have in my header section. Or, when saved in bookmarks, my site is automatically represented by an ugly yellow square with a letter inside. Please show me the code I should write to have a picture/graphics of my own choice that will represent my site in browsers (when sharing the link, when saving to bookmarks). Please do not write about favicon code for tabs, this is not the question here. Thank you!
Diffrant browsers and platforms use diffrant resolutions/aspect ratio's and code for the icon image.
The reason why you get a stock browser icon and not your logo is probably due to you having a incorrect aspect ratio of your image and the wrong code for the platform your targeting. Please be more specific about what platform your targeting your icon for and I'm sure people can help more. But in any case I'll post the resolutions and code I know below.
16x16: browser favicon
32x32: taskbar shortcut icon
96x96: desktop shortcut icon (and Google/android TV)
128x128: Chrome Webstore icon
196x196: Android Chrome icon
228x228: Opera Coast icon
Here's a example of the code for browser favicon, taskbar and shortcut
<link rel="icon" type="image/png" href="https://yourwebsite.com/favicon-16x16.png" sizes="16x16">
Apple IOS (touch devides)
120x120: iPhone Retina (iOS 7)
180x180: iPhone 6 Plus (iOS 8+)
152x152: iPad Retina (iOS 7)
167x167: iPad Pro (iOS 8+)
Here's a example of the code targeting apple devices
<link rel="apple-touch-icon" sizes="180x180" href="yourLogo.png">
Windows Metro
Due to how the tile system works in microsoft metro UI used in windows you need the following resolutions 70x70, 270x270, 310x310 and 310x150
Code example, keep in mind that the following code should be posted in the root directory of your website with the name browserconfig.xml!!!
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="https://cdn.yourwebsite.com/mstile-70x70.png"/>
<square150x150logo src="https://cdn.yourwebsite.com/mstile-270x270.png"/>
<square310x310logo src="https://cdn.yourwebsite.com/mstile-310x310.png"/>
<wide310x150logo src="https://cdn.yourwebsite.com/mstile-310x150.png"/>
<TileColor>#2b5797</TileColor>
</tile>
</msapplication>
</browserconfig>
Set an og:image in the of your HTML like this:
<meta property="og:image" content="http://yoursite.com/ogp.jpg" />
This is part of the Open Graph Protocol, used by most sites.
more info on structuring og:image here
It seems chrome://favicon/ only allows me to get a 16x16 favicon, and it looks blurry in Retina screens. What if I want to get a 2x retina ready favicon?
These urls should work:
16px for retina: chrome://favicon/size/16#2x/http://www.apple.com/
48px: chrome://favicon/size/48/http://www.apple.com/
Notes:
Some versions of Chrome may always return a 16x16 icon (or a subpar stretched version).
Many (most?) sites provide only a 16x16 icon and there's nothing you can do about it.
The favicon cache gets an icon only when the corresponding web page is completely loaded.
Does anybody know how to show a larger favicon in the Google Chrome bookmarks on my mobiles devices, like this fd-favicon? (image)
My website supports the favicon sizes:
16x16
72x72
114x114
120x120
144x144
152x152
Image:
http://oi60.tinypic.com/1yl6ag.jpg
Thanks.
Google recommends to use the Apple touch icon and a 196x196 PNG icon. If you use both, Chrome will almost always use the Apple touch icon.
In other words, your HTML code should contain something like:
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
See Apple specs for more information on the Apple touch icon.
You can generate all pictures and HTML code with this favicon generator. Full disclosure: I'm the author of this site.
I have the damndest problem. A fairly simple webpage with an embedded png won't load on one particular device I've tested with. It's a Blackberry Curve 8520 running 4.6.1. The browser settings are all using the standard Blackbery Browser, e.g. not pointing to Firefox or IE identity.
I've tested it with a really simple cut down html page:
<html>
<head>
</head>
<body>
<img src="bblogo.png"/>
</body>
</html>
I know the above is technically html5, but that's not the problem it's just short hand included as an example.
The webpage is displayed with a red x for missing image. Yet the image will view fine if accessed directly, e.g. placing cursor over missing image and selecting Full Image from the blackberry menu.
This is the only device it happens on, other blackberries, iphones and 'droids have been fine. If I replace the image with a jpg it's fine. Other png formats are also broken (128 color 8bit png, 24bit no transparency, 24bit with transparency).
So what's going on here and is there a solution? Is it configuration on the local device or something the BES could be doing to the image when it's embedded in a page but not when it's served directly?
I'm trying to avoid jpgs due to color dithering issues on older mobile phones.
Any advice gratefully received, I'm a complete blackberry newbie so know very very little about the devices or their configuration. However from what I've read png support should be pretty solid.