This point is tricky because some browsers are smart enough to process a PNG picture correctly,Įven when it was wrongly renamed with an ICO extension.Īn ICO file can contain several pictures and Microsoft recommends to put 16x16, 32x32 and 48x48 versions of the icon in favicon.ico.įor example, IE will use the 16x16 version for the address bar, and the 32x32 for a task bar shortcut. The ICO format is different of the PNG format. favicon.icoĪlthough all desktop browsers can deal with this icon, it is primarily for older version of IE. In order to get the best results across desktop browsers (Windows/IE, MacOS/Safari, etc.), you need to combine both types of icons. The favicon is supported by several files: Desktop browsers and Apple iOS do not support non-square icons. Long, comprehensive answerįavicon must be square. Full disclosure: I'm the author of this site. To generate the favicon, for many reasons explained below, I advise you to use this favicon generator. The favicon is supposed to be a set of 16x16, 32x32 and 48x48 pictures in ICO format. Full disclosure: I am the author of this site. The generator can also be implemented as a WordPress plugin. TLDR: This favicon generator can generate all these files at once. Look at this favicon pictures list for a complete reference.
Some other platforms look for PNG files with various resolutions, like the 96x96 picture for Google TV or the 228x228 picture for Opera Coast.
Safari for Mac OS X El Capitan introduces an SVG icon for pinned tabs. 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. Upscaling from ultra low resolution has a noticeable effect so better stick to 32x32 as the smallest baseline.įor IE, Microsoft recommends 16x16, 32x32 and 48x48 packed in the favicon.ico file.įor iOS, Apple recommends specific file names and resolutions, at most 180x180 for latest devices running iOS 8.Īndroid Chrome primarily uses a manifest and also relies on the Apple touch icon. 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).
All current browsers and devices support 32x32 icons. 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.
0 kommentar(er)
