favicon.ico
A compact fallback containing 16, 32, and 48 px versions for browser tabs and bookmarks.
Make the favicon.
Get back to the website.
Turn one logo or image into the handful of icon files a normal website actually needs—plus the HTML to wire them up.
Drop in a logo or square-ish image
PNG, JPG, WebP, or SVG · 15 MB max
Transparent PNG or SVG usually gives the cleanest result.01
Fit the tiny square
180 px
48 px
32 px
16 px
If it still reads at 16 px, you have a favicon—not a tiny poster.
Fit
Cover fills the square. Contain keeps the whole logo visible.
Background
Quick reality check:
Browsers may display a favicon inside a circle, rounded square, or plain square. Keep important artwork away from the edge.
Browsers may display a favicon inside a circle, rounded square, or plain square. Keep important artwork away from the edge.
Files
Start with the ICO. Add the touch and app icons when the project needs them.
Copy-paste HTML
Put the downloaded files at your site root, then add this inside <head>.
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
The practical set
What each file is for.
32px PNG
A crisp modern browser icon with transparency when you need it.
180 & 512px
Useful for touch shortcuts, installable web apps, and higher-resolution surfaces.
Tiny answers
Favicon questions.
What should I download first?
Start with favicon.ico. Add favicon-32.png and apple-touch-icon.png for a complete modern setup.
Should my icon be transparent?
Transparency works well for a simple logo. A solid background is safer when the mark needs contrast at very small sizes.
Is my logo uploaded?
No. Resizing and ICO packaging happen locally in your browser.