ByteTips.

Guide

How to Create a Favicon for Your Website

One square source image, four sizes, three link tags: 16 and 32px for tabs, 180px for Apple touch icons, 192 and 512px for PWAs.

October 17, 2026 · 5 min read · Shayan

Short answer: start from one square source image and export it at 16x16 and 32x32 for browser tabs, 180x180 for Apple touch icons, and 192x192 plus 512x512 if you ship a PWA. Link the files in your HTML head and keep a favicon.ico at your site root. That covers nearly every browser and device with three link tags.

The sizes you actually need

  • 16x16 and 32x32 — browser tabs and bookmarks. The 32px version covers high-density displays.
  • 180x180 — apple-touch-icon.png, used when someone adds your site to their iOS home screen.
  • 192x192 and 512x512 — referenced from your web app manifest for installable PWAs.
  • favicon.ico at the site root — browsers still request this file automatically, so ship it even when you link everything explicitly.

ICO vs PNG vs SVG

ICO is a container format that can hold several sizes in one file, which is why favicon.ico remains the safest default for tabs. PNG is the right choice for the apple-touch-icon and the PWA icons — it is universally supported and easy to generate. SVG scales infinitely and stays tiny for simple marks, but not every browser supports SVG favicons, so always ship a PNG or ICO fallback alongside it.

The minimal HTML

Place the files at your site root and add this to your <head>:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

The traps

  • Aggressive caching: browsers hold onto favicons for weeks. After an update, bump a query string (/favicon.ico?v=2) so visitors actually see the new icon.
  • Transparency on apple-touch-icon: iOS fills transparent areas with black. Export the 180x180 with a solid background.
  • Detail that dies at 16px: a full logo becomes a smudge in a tab. Design for the smallest size first — one bold shape, high contrast, no text.
  • Missing root favicon.ico: browsers request /favicon.ico on their own. If it is not there, you get 404 noise in your server logs.
  • SVG-only setups: fine where supported, but without a PNG or ICO fallback some visitors get no icon at all.

Try it

Upload your logo to the Favicon Generator — it exports every size plus the HTML snippet, all in your browser with nothing uploaded.

More guides