DEV Community

Michael Lip
Michael Lip

Posted on • Originally published at zovo.one

Favicon Formats in 2025: What You Actually Need to Ship

#webdev #design #beginners #programming

The favicon situation is a mess. It has been a mess for over a decade. You need an ICO file for legacy browsers, a 32x32 PNG for modern browsers, a 180x180 PNG for Apple devices, a 192x192 and 512x512 PNG for Android, and an SVG for browsers that support it. Or do you?

The requirements have simplified, and most guidance on the internet is outdated.

What you actually need in 2025

The minimal set that covers essentially all browsers and devices:

  1. favicon.ico (32x32): For legacy browsers and the browser tab. Place in the root of your site.
  2. apple-touch-icon.png (180x180): For iOS home screen bookmarks.
  3. favicon.svg: For modern browsers that support SVG favicons. Scales perfectly to any size.

That is it. Three files. Add these HTML tags:

<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">
Enter fullscreen mode Exit fullscreen mode

The SVG favicon is powerful because it can respond to dark mode:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #6C5CE7; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #00ff88; }
    }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>
Enter fullscreen mode Exit fullscreen mode

The ICO format

ICO files are containers that can hold multiple sizes of the same icon. Historically, you would embed 16x16, 32x32, and 48x48 versions. In 2025, a single 32x32 PNG inside an ICO container is sufficient.

The ICO format is essentially a BMP or PNG image with a special header. Most image tools can create them. The key is that it must be named favicon.ico and live at the root of your domain. Browsers have hardcoded this path since the early days of the web.

The conversion process

Starting from a source image (typically your logo as a PNG or SVG):

For ICO: Resize to 32x32 with high-quality scaling. If the source has transparency, preserve the alpha channel. Convert to ICO format.

For Apple Touch Icon: Resize to 180x180. Apple adds rounded corners and a slight shadow automatically, so do not include them in the image. Use a solid background color rather than transparency.

For SVG: If your logo is already SVG, you may need to simplify it (remove external references, inline styles, flatten transforms) for favicon use. If your source is raster, converting to SVG is not straightforward and you may skip this.

Common mistakes

Transparent backgrounds on Apple Touch Icon: iOS places a black background behind transparent icons, which usually looks terrible. Always use an opaque background.

Too much detail: At 16x16 or 32x32 pixels, fine details are invisible. The favicon should be a simplified version of your logo or a distinct symbol, not a scaled-down version of your full logo with text.

Not serving from root: Some frameworks serve static files from a subdirectory. The /favicon.ico path must resolve. Use a redirect or configure your server to serve it from root.

Caching: Browsers cache favicons aggressively. During development, append a query string (favicon.ico?v=2) or clear the favicon cache specifically.

The converter

For converting a source image into all three required favicon formats with proper sizing, I built a favicon converter that generates ICO, Apple Touch Icon, and SVG-ready files from a single upload.

I'm Michael Lip. I build free developer tools at zovo.one. 500+ tools, all private, all free.

Top comments (0)