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