Does a favicon have to be 32x32 or 16x16

Question

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 72x72 PNG scale if linked to as a regular browser favicon  Or do I have to use a separate 16x16 or 32x32 image

User · Answer

May I remind everybody that the question was:

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 72x72 PNG scale if linked to as a regular browser favicon? Or do I have to use a separate 16x16 or 32x32 image?

The answer is: YES, that is possible! YES, it will be scaled. NO, you do not need a 'regular browser favicon'. Please look at this answer: https://stackoverflow.com/a/48646940/2397550

User · Answer

You can have multiple sizes of icons in the same file  I routinely create favicons   ico file  that are 48  32  and 16 pixels  You can add in any size image you want  The question is  will the iPhone use an ico file   ico also supports transparency  but I m not sure if it s an alpha channel like PNG  probably more like GIF where it s on or it s off

User · Answer

According to the Wikipedia Article on Favicon  Internet Explorer supports only the ICO format for favicons   I would stick with two different icons

User · Answer

The favicon doesn t have to be 16x16 or 32x32  You can create a favicon that is 80x80 or 100x100  just make sure that both values are the same size  and obviously don t make it too large or too small  choose a reasonable size

User · Answer

As I learned  no one of those several solutions are perfects  Using a favicon generator is indeed a good solution but their number is overwhelming and it s hard to choose  I d like to add that if you want your website to be PWA enabled  you need to provide also a 512x512 icon as stated by Google Devs       icons including a 192px and a 512px version   I didn t met a lot of favicon generators enforcing that criteria  firebase does  but there is a lot of things it doesn t do   So the solution must be a mix of many other solutions   I don t know  today at the begining of 2020 if providing a 16x16  32x32 still relevant  I guess it still matters in certain context like  for example  if your users still use IE for some reason  this stills happen in some privates companies which doesn t migrate to a newer browser for some reasons

User · Answer

You will need separate files for each resolution I am afraid  There is a really good article on campaign monitor describing how they created and implemented their icons for each iOS device too   http   www campaignmonitor com blog post 3234 designing-campaign-monitor-ios-icons

User · Answer

Actually  to make your favicon work in all browsers properly  you will have to add more than 10 files in the correct sizes and formats   My friend and I have created an App just for this  you can find it in faviconit com  We did this  so people don t have to create all these images and the correct tags by hand  create all of them used to annoy me a lot

User · Answer

I don t see any up to date info listed here  so here goes   To answer this question now  2 favicons will not do it if you want your icon to look great everywhere  See the sizes below   16 x 16     Standard size for browsers 24 x 24     IE9 pinned site size for user interface 32 x 32     IE new page tab  Windows 7  taskbar button  Safari Reading List sidebar 48 x 48     Windows site 57 x 57     iPod touch  iPhone up to 3G 60 x 60     iPhone touch up to iOS7 64 x 64     Windows site  Safari Reader List sidebar in HiDPI Retina 70 x 70     Win 8 1 Metro tile 72 x 72     iPad touch up to iOS6 76 x 76     iOS7 96 x 96     GoogleTV 114 x 114     iPhone retina touch up to iOS6 120 x 120     iPhone retina touch iOS7 128 x 128     Chrome Web Store app  Android 144 x 144     IE10 Metro tile for pinned site  iPad retina up to iOS6 150 x 150     Win 8 1 Metro tile 152 x 152     iPad retina touch iOS7 196 x 196     Android Chrome 310 x 150     Win 8 1 wide Metro tile 310 x 310     Win 8 1 Metro tile

User · Answer

I am not sure if how browsers scale large icons  but The W3C suggests the following1      The format for the image you have chosen must be 16x16 pixels or 32x32 pixels  using either 8-bit or 24-bit colors  The format of the image must be one of PNG  a W3C standard   GIF  or ICO      1 w3c org  How to Add a Favicon to your Site  Draft in development

User · Answer

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

[favicon] Does a favicon have to be 32x32 or 16x16?

Examples related to favicon