Favicon 32x32 PNG: A Quick Guide to Small Web Icons

What is a favicon?

A favicon is a small icon that represents a website in browser tabs, bookmarks, and on mobile home screens. While many sites still rely on an .ico file, modern sites also use PNG, SVG, or other formats.

Why the 32x32 size?

The 32x32 pixel size is a common default for general-use icons. It looks crisp on standard displays and scales well for browser tabs and bookmarks. For higher-DPI screens, browsers may look for higher-resolution icons as well.

Note on browser support

Different browsers fetch different icon files depending on the link rel='icon' hints. Providing a 32x32 PNG covers many, but you may also supply additional sizes.

How to use a 32x32 PNG favicon

Place the file at your site's root or in a public directory, then reference it in your HTML: <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>

For broader compatibility, you can also provide a favicon.ico or additional PNG sizes: <link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'> <link rel='icon' href='/favicon.ico'>

Other sizes and formats

• 16x16: classic small icon for browsers and bookmarks
• 48x48, 64x64, etc: for high-DPI displays
• Apple touch icon: <link rel='apple-touch-icon' href='/apple-touch-icon.png'> for iOS homescreens
• SVG: scalable icons for modern sites

Best practices

• Keep the file size small (a few KB is common for a simple icon)
• Name files clearly (favicon-32x32.png)
• Test across devices and browsers to ensure visibility