That little icon in the browser tab is a favicon, and a good one makes your site look finished and easy to find among a wall of tabs. Here’s what it needs to be and how to make one in a minute.
What a favicon actually is
A favicon is a small, square icon browsers show in tabs, bookmarks, history, and on the home screen. The traditional file is favicon.ico — an .ico container that can hold several sizes at once so the browser picks the sharpest for each place it appears.
The two things that make a favicon look good:
- Square and simple. It’s often rendered at 16×16, so fine detail turns to mush. A bold letter, monogram, or simple mark reads best.
- Multiple sizes in one file. 16, 32, and 48 px cover tabs, bookmarks, and shortcuts.
Turn your logo into a favicon
The PNG to ICO converter builds a proper multi-size .ico from your image, right in the browser:
- Start from a square version of your logo, ideally 256×256 or larger.
- Open PNG to ICO and drop it in.
- The tool renders 16/32/48 px versions and packs them into one
.ico. - Download
favicon.icoand drop it in your site’s root.
Working from a different format? There’s also SVG to ICO (great for crisp vector logos), JPG to ICO, and WebP to ICO.
Add it to your site
Put favicon.ico at your site root and browsers will find it automatically. For best coverage, also add these to your <head>:
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />The SVG version stays razor-sharp on modern browsers; the .ico is the universal fallback; the Apple touch icon covers iOS home screens.
Tip: If your logo is detailed, make a simplified version just for the favicon — a single letter or symbol beats a shrunken full logo every time.
The bottom line
A favicon should be a square, simple mark packed into a multi-size .ico. Start from a clean high-res image, convert it in your browser, drop the file in your site root, and your tab looks the part.