← Back to How-To Guides

How to Create a Favicon for Your Website (Free Generator)

2 min read •
Beginner Favicon Website Design HTML

A favicon is the small icon that appears in browser tabs, bookmarks, and search results next to your website name. It is a tiny detail that makes your site look professional and recognizable.

Creating one used to require Photoshop and manual resizing. Now you can generate all required sizes from a single image in seconds.

Create a Favicon Now

Use our free Favicon Generator:

  1. Upload any image (logo, icon, photo — square works best)
  2. The tool generates all required sizes automatically
  3. Download the complete favicon set (.ico + .png files)
  4. Add to your website

Everything happens in your browser — your image is not uploaded to any server.

What Sizes Do You Need?

Different browsers and devices require different sizes:

Size File Where It is Used
16×16 favicon.ico Browser tab (standard)
32×32 favicon.ico Browser tab (Retina/HiDPI)
48×48 favicon.ico Windows taskbar
180×180 apple-touch-icon.png iPhone/iPad home screen
192×192 icon-192.png Android Chrome
512×512 icon-512.png Android splash screen, PWA
150×150 mstile-150x150.png Windows tiles

Our Favicon Generator creates all of these from a single image.

How to Add Favicons to Your Website

Add these lines in the section of your HTML: 

<!-- Standard favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web App Manifest (for PWA) -->
<link rel="manifest" href="/site.webmanifest">

The webmanifest File

Create site.webmanifest in your root directory: 

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

Tips for Good Favicons

  • Start with a square image — non-square images get cropped or distorted
  • Keep it simple — at 16×16 pixels, details disappear. Use bold shapes and colors
  • Use your logo mark, not the full logo — the "G" from Google, not "Google"
  • Test at small sizes — zoom out to 16×16 and check if it is still recognizable
  • Use SVG if possible — modern browsers support SVG favicons that scale perfectly
  • High contrast — make sure it is visible on both light and dark browser themes

Favicon Formats

Format Support Best For
.ico All browsers Universal fallback
.png All modern browsers Specific sizes
.svg Modern browsers Scalable, small file
.gif Limited Animated favicons (not recommended)

Related Tools