A favicon is a small detail that has a big impact on branding and tab recognition. Most websites use a .ico file containing multiple sizes of the same icon.

What sizes do you actually need?

• 16×16 — Browser tab
• 32×32 — Windows taskbar, Mac Dock
• 48×48 — Windows file explorer, shortcuts
• 256×256 — High-DPI displays, Windows tiles

Most .ico files bundle several sizes together so browsers and operating systems can pick the best one.

Step-by-step: PNG to ICO

1. Prepare a square PNG image (ideally 256×256 or larger).
2. Open a browser-based PNG to ICO converter.
3. Upload your PNG.
4. Select which sizes to include.
5. Click Convert and download the .ico file.

Where to put favicon.ico

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

Place the file in your website's root directory.

Design tips

• Keep it simple — favicons are tiny.
• Use bold shapes and high contrast.
• Avoid thin lines and small text.
• Test on both light and dark browser chrome.
• Create a transparent PNG first then convert to .ico.