Favicon Sizes And Code Cheat Sheet - 2022 Edition

October - 2021

Sizes Of .png Files To Make

  • 16x16
  • 32x32
  • 70x70
  • 96x96
  • 128x128
  • 152x152
  • 167x167
  • 180x180
  • 196x196
  • 228x228
  • 270x270
  • 310x310

Link Tags To Place In <head>

<link rel="icon" type="image/png" sizes="16x16" href="/favicons/16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicons/96x96.png" />
<link rel="icon" type="image/png" sizes="128x128" href="/favicons/128x128.png" />
<link rel="icon" type="image/png" sizes="196x196" href="/favicons/196x196.png" />
<link rel="icon" type="image/png" sizes="228x228" href="/favicons/228x228.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/favicons/152x152.png" />
<link rel="apple-touch-icon-precomposed" sizes="167x167" href="/favicons/167x167.png" />
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/favicons/180x180.png" />

A /browserconfig.xml for Windows

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/favicons/70x70.png"/>
      <square70x70logo src="/favicons/270x270.png"/>
      <square70x70logo src="/favicons/310x310.png"/>
      <TileColor>#ffffff</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Notes

  • These sizes are from this page but consolidated and with all the prose removed to make it easier to get the full picture.
  • The examples all use a /favicons directory at the root of the site, but any path can be used including external CDNs
  • The /browserconfig.xml is listed as being necessary for Windows 10's UI.
  • There's also a 310x150 listed for windows. Not sure where that's for, but I'm sticking with just the square ones myself for the sake of simplicity
  • Yes. I'm posting this in Nov. 2021 but titling it 2022. It's close enough and if car manufacturers can do it, so can I.