Uncertain about optimal favicon sizes

General Web Dev
1

Hello,
I have the following for a website:

  <!-- Favicon -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="manifest" href="/manifest.json">

My favicon.ico is 48x48px in size, and I think that is the one that gets loaded by default, right? However, I’m not sure if 48x48 is the correct size. I believe the favicon should actually be 16x16 pixels. Should I remove this

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

and make the favicon.ico 16x16 instead? And add a new 48x48 beside the existing 32x32, like so:

  <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="shortcut icon" href="/favicon.ico">  <!-- keep this 16x16 -->

What do you think? Any suggestions are appreciated.

2

The “standards” are unclear. MDN references wikipedia of all places, so even they consider it a throwaway.

  • 16x16 is supposedly the browser “standard” but some say 32x32
  • Android uses multiples of 48x48
  • Apple uses different sizes (go figure). iPhones are 180x180, iPads are 167x167 (150x150 for pre-retina) iPads

Your 48x48 should be OK since it’s a multiple of 16, so it should be able to scale it easily enough…

1 Like
3

Thank you. Indeed, as you say, it is quite unclear. I searched the internet and remained quite confused. In the end, I found out that Apple has published their requirements on their website, but regarding the other sizes, I will go with 48x48.

1 Like