Favicon Converter
📖 Complete Guide

How to Create a Favicon

A comprehensive, step-by-step guide to creating favicons for your website — from design to deployment.

Step 1: Design Your Icon

Your favicon is one of the most important visual elements of your brand on the web. Even though it's small, it's seen constantly — in browser tabs, bookmarks, and search results. Follow these design principles:

  • Keep it simple: At 16×16 pixels, fine details are lost. Use bold, recognizable shapes.
  • Use your brand: A simplified version of your logo, a letter, or an icon that represents your brand works best.
  • Consider backgrounds: Design for both light and dark browser themes. Test on both.
  • Use vectors: Design in SVG format in a tool like Figma, Illustrator, or Inkscape for maximum quality.
  • Test at small sizes: Preview your design at 16×16 and 32×32 before finalizing.

Step 2: Choose Your Sizes

Different platforms require different favicon sizes. Here's the complete set you should generate:

  • 16×16 — Standard browser tab icon (most important)
  • 32×32 — Retina/high-DPI browser tabs, Windows taskbar
  • 48×48 — Windows desktop/start menu icon
  • 64×64 — Larger Windows tiles
  • 180×180 — Apple Touch Icon (iOS home screen, Safari)
  • 192×192 — Android Chrome launcher, Google search results
  • 512×512 — PWA splash screen, Google PWA install prompt

Step 3: Convert to Favicon

Use our faviconverter to generate all the sizes you need:

  • Upload your SVG file or paste SVG code
  • Select the sizes you need (defaults include all standard sizes)
  • Click “Convert to Favicon”
  • Preview the results in a browser tab simulation
  • Download the complete favicon package

The conversion happens entirely in your browser — your files are never uploaded to any server.

Step 4: Add to Your Project

After downloading the favicon package, add the files to your project:

For HTML Websites

<!-- Add to your <head> section -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<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" />

For Next.js

See our detailed Next.js favicon guide for App Router metadata configuration and file-based setup.

For React (CRA / Vite)

Check our React favicon guide for step-by-step instructions with code examples.

Step 5: Test Your Favicon

After deployment, verify your favicon works correctly:

  • Open your site in multiple browsers (Chrome, Firefox, Safari, Edge)
  • Check the browser tab icon at normal and pinned tab sizes
  • Bookmark the page and verify the bookmark icon
  • On iOS, add to home screen and check the app icon
  • On Android, check the Chrome app switcher icon
  • Use Chrome DevTools > Application tab to inspect favicon configuration
  • Use Google's Rich Results Test to verify structured data

Step 6: Deploy

Your favicon files should be served from your site's root directory. Most hosting providers and frameworks serve files from the public/ directory at the root URL. Verify that/favicon.ico returns your ICO file after deployment.

Favicon Formats Explained

ICO Format

The ICO (Icon) format is a container that holds multiple PNG images at different resolutions. It's the most widely supported favicon format, working in all browsers including older versions of Internet Explorer. An ICO file can contain 16×16, 32×32, and 48×48 variants in a single file.

PNG Format

Modern browsers support PNG favicons via <link> tags. PNGs offer better compression and quality than BMP-based ICOs. Use PNG link tags alongside ICO for the best experience.

SVG Format

The newest favicon format — supported in Chrome, Firefox, and Edge. SVG favicons scale perfectly and can be specified with: <link rel="icon" type="image/svg+xml" href="/favicon.svg">

Common Mistakes

  • Only providing one size: Browsers need different sizes for different contexts
  • Forgetting Apple Touch Icon: iOS users who bookmark your site won't see your custom icon
  • Too much detail: Complex favicons look like blobs at 16×16 pixels
  • No web manifest: PWA features and Android install prompts require it
  • Using bitmap source: Low-resolution source images produce blurry favicons

Get Started

Ready to create your favicon? Our faviconverter makes it easy — generate all the sizes and formats you need from a single SVG file, completely free and private.