How to Create a Favicon (ICO) for Your Website

A favicon is the small icon that appears in browser tabs, bookmarks, and mobile home screens. Without one, your site shows a generic globe icon — a missed branding opportunity that takes 2 minutes to fix.

What Sizes Do You Need?

A single favicon.ico file is no longer enough. Modern browsers and devices expect multiple sizes:

File	Size	Used By
favicon.ico	16×16, 32×32, 48×48	Browser tabs, Windows taskbar
favicon-32.png	32×32	Standard browsers
favicon-16.png	16×16	Browser tabs (high-DPI)
apple-touch-icon.png	180×180	iOS home screen, Safari
android-chrome-192.png	192×192	Android home screen
android-chrome-512.png	512×512	Android splash screen

Generate All Sizes at Once

Use our Favicon Generator to upload any image and get all required sizes plus the HTML code — all processed in your browser, no upload needed.

How to Add a Favicon to Your HTML

Place the files in your site's root directory and add these tags to your <head>:

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

Web Manifest File

For Android, create a site.webmanifest file:

{
  "name": "Your Site Name",
  "short_name": "Site",
  "icons": [
    { "src": "/android-chrome-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

Design Tips for Favicons

Keep it simple — at 16×16 pixels, detail is invisible. Use 1–2 elements max
Use high contrast — thin lines and subtle colors disappear at small sizes
Start at 512×512 — design at the largest size, then scale down and adjust
Test on dark and light backgrounds — browser themes vary
Use SVG for modern browsers — sharp at any size, smaller file

SVG Favicons (Modern Approach)

SVG favicons are supported in all modern browsers and look crisp at any resolution:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

For dark mode support, you can use CSS media queries inside the SVG:

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    path { fill: #333; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="..."/>
</svg>

The Bottom Line

You need multiple sizes: ICO (16/32/48), PNG (16/32/180/192/512), and optionally SVG
Place files in your root directory and add link tags to your HTML head
Design at 512×512, then simplify for 16×16
SVG favicons are the future — use them with a PNG fallback
Test on both dark and light browser themes