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.
Ad slot — enable ads in public/ads.js · article-mid

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.