How to Create a Favicon for Your Website for Free (16×16 to 512×512)

What sizes you actually need

A properly implemented favicon package covers multiple sizes:

At minimum, a 32×32 .ico or .png file handles most browsers. Add the Apple Touch Icon (180×180) and Android icons (192×512) if mobile bookmarking matters for your site.

How to generate a favicon free

1. Open the free favicon generator
2. Upload your logo, icon, or any image — PNG works best; SVG is ideal
3. The tool generates all required sizes automatically
4. Download the favicon package
5. Place the files in your website's root directory
6. Add the HTML tags to your <head>

The HTML you need in your head tag

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

The site.webmanifest file declares your 192×192 and 512×512 icons for Android. A basic one looks like:

{
"icons": [
  { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
  { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

What makes a good favicon design

A favicon is displayed at very small sizes — 16×16 pixels in most browser tabs. Design principles for small sizes:

• Simple shapes only: complex logos with text do not read at 16px. Extract one letter, a symbol, or a simplified mark from your full logo.
• High contrast: the favicon appears on both light (most browsers) and dark mode tabs. Test it on both.
• No thin lines: lines under 2px disappear or become blurry at small sizes. Use bold, thick shapes.
• Transparent background: export with a transparent background so it looks natural on any tab color.

ICO vs PNG vs SVG for favicons

• .ico format: the original favicon format, contains multiple sizes in one file. Still recommended for the root /favicon.ico for maximum compatibility — old browsers and some tools specifically look for this file.
• PNG: the modern standard for sized favicon links. Clear, widely supported, and easy to generate.
• SVG favicon: supported by most modern browsers (rel="icon" type="image/svg+xml"). Scales perfectly to any size. You can compose a clean squircle or framed vector mark in SVG Nexus's Icon Badge Generator (and see our guide on designing framed SVG app badges), then use it alongside PNG fallbacks.

Testing your favicon

After adding the favicon, test it:

• Open your site in an incognito window (cache won't serve the old favicon)
• Check the browser tab — the 32×32 icon should appear
• Bookmark the page — check the bookmark icon
• On an iPhone: add to Home Screen — the 180×180 Apple Touch Icon appears

Summary

Generate a complete favicon package with the free favicon generator — no account. Use a simple, high-contrast mark at small sizes. Provide at minimum 16×16, 32×32, and 180×180 sizes. Add a /favicon.ico in the root for maximum backward compatibility.