Icons
How to Create a Favicon.ico From Any PNG Image
Published: July 8, 2025 · 4 min read
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
- Prepare a square PNG image (ideally 256×256 or larger).
- Open a browser-based PNG to ICO converter.
- Upload your PNG.
- Select which sizes to include.
- 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.