How to Make a Favicon: PNG to ICO Guide

A favicon is the small icon in the browser tab, bookmarks and search results. A missing or broken favicon makes a site look unfinished, and Google now shows favicons next to mobile search results, so it directly affects clicks.

Why ICO and not just PNG?

Modern browsers accept PNG favicons, but the classic favicon.ico is still the safest bet: it is what browsers request by default at /favicon.ico, what old browsers and some tooling expect, and the ICO container can hold several resolutions in one file.

Make an ICO from your logo

  1. Prepare a square PNG of your logo, ideally 256×256 or larger, with transparency.
  2. Open the PNG to ICO converter and upload it.
  3. Press "Convert": the result is a 256×256 ICO (PNG-compressed, the modern Vista+ format that scales down cleanly).
  4. Drop the file in your site root as favicon.ico.

The HTML

For full coverage add to your <head>:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> (180×180 PNG for iOS)

Design tips

  • Test at 16×16: fine details disappear, bold simple shapes win.
  • Keep contrast against both light and dark browser themes.
  • Transparency looks better than a white box.

Do you actually need multiple sizes in one ICO?

A single 256×256 PNG-compressed ICO is enough for modern browsers, which scale it down cleanly for the tab and bookmark bar. Bundling extra sizes (16×16, 32×32, 48×48) inside the same ICO mainly helps older Windows software and the desktop taskbar, where a hand-tuned small icon looks sharper than one scaled down automatically. If your site is purely web-facing, the single 256×256 file is the simpler and equally effective choice.

Ad slot — enable ads in public/ads.js · article-mid

Common favicon mistakes

  • Forgetting the file entirely. Browsers request /favicon.ico automatically even without a link tag, so a missing file shows as a 404 in your server logs on every single page load.
  • Using a rectangular logo unmodified. A wide wordmark logo shrunk into a square favicon usually becomes unreadable; crop to just the icon mark or initials instead.
  • Skipping the apple-touch-icon. Without it, saving your site to an iPhone home screen falls back to a screenshot of the page instead of your icon.
  • Caching. Browsers cache favicons aggressively; after replacing the file, a hard refresh or a direct visit to the icon's URL is often needed to see the update.

Since browsers request /favicon.ico automatically on every page load whether or not you link to it, it's worth double-checking the file actually sits at your site's root rather than in a subfolder — a favicon placed anywhere else silently never gets picked up by that automatic request.