home
NOTE: Under Construction - I'm in the middle of upgrading my site and lots of stuff is kinda broken. Please forgive the mess.

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 ``

Code
<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

Code
<?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.

═══ § ═══