Menu
I'd like to use a single image as both a regular favicon and iPhone/iPad friendly favicon.
Is this possible? Would an iPad-friendly 72×72 PNG scale if linked to as a regular browser favicon? Or do I have to use a separate 16×16 or 32×32 image?
676
Favicon images are small in size, only 16 pixels in height by 16 pixels in width, so there is not much space for complex designs. Still, a good favicon that is clean, simple and easily identifiable can provide a good visual indicator for visitors navigating to your site through their tabs or bookmarks.
A favicon is a little icon visible on the web browser tab, just before the page title. It is generally a logo with a smaller size. The size of a favicon is 16x16, since it also gets displayed next to the URL of your site in a browser's address bar.
The standard size for favicons is 16x16 pixels, but most designers start with 32x32 pixels to accommodate retina screens. This way, the larger favicons show up nicely on retina screens and can also be scaled down.
Open favicon. ico with the 32×32 icon. Create a new layer with a 16×16 size. Put the 16×16 version of an icon into this layer.
Update for 2020: Sticking to the original question of 16x16 versus 32x32 icons: the current recommendation should be to provide a 32x32 icon, skipping 16x16 entirely. All current browsers and devices support 32x32 icons. The icon will routinely be upscaled to as much as 192x192 depending on the environment (assuming there are no larger sizes available or the system didn't recognize them). Upscaling from ultra low resolution has a noticeable effect so better stick to 32x32 as the smallest baseline.
For IE, Microsoft recommends 16x16, 32x32 and 48x48 packed in the favicon.ico file.
For iOS, Apple recommends specific file names and resolutions, at most 180x180 for latest devices running iOS 8.
Android Chrome primarily uses a manifest and also relies on the Apple touch icon.
IE 10 on Windows 8.0 requires PNG pictures and a background color and IE 11 on Windows 8.1 and 10 accepts several PNG pictures declared in a dedicated XML file called browserconfig.xml.
Safari for Mac OS X El Capitan introduces an SVG icon for pinned tabs.
Some other platforms look for PNG files with various resolutions, like the 96x96 picture for Google TV or the 228x228 picture for Opera Coast.
Look at this favicon pictures list for a complete reference.
TLDR: This favicon generator can generate all these files at once. The generator can also be implemented as a WordPress plugin. Full disclosure: I am the author of this site.
79
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
