CODEWITHSUNDEEP
favicon
Indrajeet Singh
Indrajeet Singh

Reputation: 11

Why does the size of a favicon have to be 32x32 or 16x16? Can we give additional css/style to it?

I want just to know why the size of a favicon is like in 32*32 or 16*16 and also not more than size of 25kb?

Upvotes: 0

Views: 4426

Answers (1)

Cpt Kitkat
Cpt Kitkat

Reputation: 1402

Favicon doesn't necessarily have to be of 32*32 or 16*16. If you visit https://www.favicon-generator.org/ and upload an image it will make favicon with different pixel size for different devices. Same size favicon won't look great on all devices so you need to use different sie of favicons. Some of the examples of size of favicons are:

  • 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

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.

Upvotes: 2

Related Questions