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.
Related
When I load my website half of the page size is loading different than the other half. This only happen sometimes. This is ruining my website view.
I assume you're using webfonts to display text in fonts that aren't on your device. You see the sizes change when a similar looking font that exists on your device is swapped for the webfont when the download completes.
You see this "sometimes" based on caching and or speed of your connection to get and render the fonts.
I've been developing a mobile-biased web app which will have to load quickly on patchy 3G networks. As such I've been very economical with page weight. Now we're putting the finishing touches on the project I'm looking at adding a favicon, largely for the benefit of desktop users. Even though it will only be a few kilobytes I don't want this file to have any negative impact whatsoever on page loading, especially when it won't be much use to the majority of users.
If a user is using iOS safari, the Android Browser or Chrome on Android will the browser actually request the favicon, and if so is the favicon request deprioritized at all to make sure everything else loads first?
Just to clarify I'm talking about the favicon.ico file, not the apple-touch-icon mobile specific icons, which I assume to be loaded on demand (i.e. when you add a page to your home screen)
If you have a favicon.ico file with its declaration in the HTML code, iOS Safari and Android Chrome won't load it (tested on iPad Mini and Galaxy Nexus).
However, if you have Apple Touch icons, they will be loaded immediately by some browsers, not when the page is bookmarked or added to home screen:
iOS Safari waits for bookmark or add to home screen events. Good.
Android Chrome loads apple-touch-icon-152x152.png on page load. Arguable.
If network performance is a major issue to you, you should either study the behavior of various devices... or remove all the extra icons.
On this page, the images look fine on desktop but are white/not found on mobile devices. I have no idea why this is happening. I'm just calling an img tag but it says its not found on mobile even though it is there
I have checked your files, #MrVimes is correct your should finish your html which will help validate better on slower devices.
However the problem is purely down to size of the image. Chrome Dev tools shows me that they are massive in size, Enable emulator and select iPhone 5 and see what happens. It is just taking a long time to download.
Try using Picturefil.js to serve smaller images or make them smaller in your software application.
This was the picture I got from Google Dev Tools (which is free and amazing):
Also I noticed that your need to change the way the images are handled in CSS, if you open dev tools:
Position:center
Is not valid, maybe set it to relative or static depending on how you want your page structure to look.
I also saw you may want to update your header with this css:
z-index: 99999;
This will make your header appear on top, as the z-index changes the layers of the html elements (much like the fillings in a sandwhich)
sorry my friend but this is false COMPRESSSING THE IMAGES TO 50KB the big images won't appear because your cache browser is full you have to empty your history/cookies/cache of the browser
IOS DEVICE SUPPORT 32 MEGAPIXEL SIZE OF IMAGE IN SAFARI
take a look here for maximum image size and resolution support Apple IOS developper
to delete your cache just go to "Setting=>Safari=>Cleare cache=>clear cache" and that's it
Note: Check the avaible space on your IOS DEVICE should be greater then 50MB
You have to Enjoy the technologie by let the images greater then 1.5mb and works in both of computers/devices
My Chrome Packaged App has 3 icon sizes for the moment: 16x16, 48x48 and 128x128. But I haven't find any information about a 256x256 icon for retina displays like Chromebook Pixel or rMBP.
I haven't these computers so I cannot test, did someone know if Chrome use a big icon format when you launch a Chrome Packaged App on a high-resolution display?
Thanks for your help.
If you put a 256x256 icon in your manifest, Chrome will make use of it wherever necessary. When Chrome creates icons for the app in the operating system's menu, it will store the full resolution icon, so it will be up to the operating system to decide when to use them.
To the best of my knowledge:
On Windows, you will hardly ever see it, but if you create a Desktop icon, then set the Desktop to show "Extra Large" icons, you will see it. (I don't know why anyone would ever do that.)
On Mac, the dock can be set to show a large icon when the user mouses over, and on a retina display it probably uses the 256x256 icon (but I haven't tested this).
On a Chromebook, I don't think the icons are ever shown big enough that the 256x256 icon would be useful, even on a high-res display. However, this may change in the future, so it is always good to supply an icon in as high resolution as possible.
So in summary, it is worthwhile making a 256x256 icon if it's not too much trouble, because it will be used in some situations. But an ordinary user will probably not see it very often.
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.