How to create a favicon (2026 guide)

Learn how to create a complete favicon for your website: which sizes you need, which files to generate, and how to add them to your <head> with the correct tags.

A favicon is the small icon shown in the browser tab, in bookmarks and in Google search results. A good favicon makes your site look professional and recognizable at a glance.

Which files you need in 2026

The modern minimum set is 3 files + a few tags:

favicon.ico — legacy compatibility (contains 16, 32 and 48 px).
favicon.svg — vector, scales to any size and supports dark mode.
apple-touch-icon.png (180×180) — for the iOS home screen.
icon-192.png and icon-512.png — PWA icons (Android/Chromium).

How to generate them

Prepare a square image at least 512×512 px (1024 is better), as a transparent PNG or SVG.
Upload it to AppIconGen, tweak the background and rounding, and select the Web / PWA platform.
Download the ZIP: the web/ folder has all the files plus the HTML snippet.

How to add them to your site

Copy the files to your site root and paste these tags inside <head>:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

That’s it — your favicon will show across every browser and device.