The tiny icon in a browser tab, bookmark and history list is the favicon. A good one makes your site look finished and easier to spot among a dozen open tabs.
What a favicon actually is
Traditionally it lives at /favicon.ico, and .ico is a container that holds several sizes in one file — commonly 16×16, 32×32 and 48×48. The browser picks whichever fits the spot (tab, bookmark, taskbar). That is why a real .ico beats a lone PNG: one file stays crisp at every size.
Start from a square image
- Use a square source, ideally 256×256 or larger. Non-square images get cropped or letterboxed.
- Keep it simple — at 16px, fine detail vanishes. A single letter, mark or bold shape reads best.
- A PNG with a transparent background works well.
Make the .ico — nothing uploaded
Your logo is your brand; there is no need to send it to an unknown server. This runs entirely in your browser:
- PNG to ICO / Favicon generator — drop a PNG and get a multi-size
favicon.ico.
Add it to your site
Put favicon.ico in your site root and reference it in the page head:
<link rel="icon" href="/favicon.ico" sizes="any">Modern browsers also accept a PNG icon, and many sites ship both. If the icon does not update, hard-refresh — browsers cache favicons aggressively.
Need a scalable logo instead of a fixed-size icon? See How to convert PNG to SVG.