best-practices10 min read

Free Favicon Generator: How to Create Favicons for Every Platform

Generate favicons for all platforms — browser tabs, Google results, iOS, Android, and PWAs. Free tool included. Covers every size, format, and implementation step.

March 14, 2026

favicon generatorfree faviconcreate faviconfavicon creatorgenerate faviconfavicon makerfavicon from imagefavicon all sizes

You need a favicon. Not just a blurry 16x16 ICO file from 2010 — a complete set of icons for every browser, device, and platform your visitors use. That means 7+ files in 3+ formats, plus the HTML and manifest code to tie it all together.

You can spend an hour resizing images in Photoshop and googling which sizes go where. Or you can upload one image to a favicon generator and get everything in 10 seconds.

This guide covers both approaches — plus the technical details you need to get favicons right.

What You Need: The Complete Favicon Set

Gone are the days of dropping a single favicon.ico in your root directory. Here's what modern websites require:

Required Files (2026)

| File | Dimensions | Format | Used By | |------|-----------|--------|---------| | favicon.ico | 16×16 + 32×32 + 48×48 | ICO (multi-size) | Legacy browsers, fallback | | favicon.svg | Scalable | SVG | Modern browsers (Chrome 80+, Firefox 41+, Safari 12+) | | favicon-16x16.png | 16×16 | PNG | Explicit fallback | | favicon-32x32.png | 32×32 | PNG | Retina browser tabs | | apple-touch-icon.png | 180×180 | PNG | iOS home screen, Safari | | android-chrome-192x192.png | 192×192 | PNG | Android home screen, PWA | | android-chrome-512x512.png | 512×512 | PNG | Android splash screen, PWA install prompt |

Supporting Files

| File | Purpose | |------|---------| | site.webmanifest | PWA config — points to Android icons | | browserconfig.xml | Windows tiles (Edge, IE legacy) | | HTML <link> tags | Tells browsers where to find each icon |

Total: 7 image files + 2 config files + HTML snippet. That's a lot of manual work — which is exactly why favicon generators exist.

Using WebScore's Free Favicon Generator

The fastest path from "I have a logo" to "my favicons are deployed":

Step 1: Prepare Your Source Image

Start with the highest resolution version of your icon. Ideal specs:

Format: PNG (transparent background) or SVG
Minimum size: 512×512 pixels (larger is better for downscaling)
Square aspect ratio — non-square images will be cropped or distorted
Simple design — text and fine details disappear at 16px

If your logo is complex, create a simplified icon version. Many brands use just the first letter or a symbol mark for their favicon.

Step 2: Upload and Generate

Go to the Favicon Generator
Upload your image (PNG, JPG, SVG, or WebP — up to 2 MB)
Enter your app/site name (used in the web manifest)
Click Generate Favicons

The generator creates all 7 required image files, plus your HTML code, site.webmanifest, and browserconfig.xml — all in under 10 seconds.

Step 3: Preview and Download

Before downloading, preview how your favicon looks in three contexts:

Browser tab — 16px view with your page title
Google search results — how it appears next to your URL
Phone home screen — iOS/Android app-like icon

If something looks off, go back and adjust your source image. Common issues:

Too much detail → looks like a blob at 16px
Low contrast → invisible against dark browser themes
Transparent background on Apple Touch Icon → shows as black on iOS

Step 4: Deploy

Download all files as a ZIP and:

Extract to your website's root directory (/public/ in Next.js, root in static sites)
Add the HTML snippet inside your <head> tag
Upload site.webmanifest to your root directory
Clear your browser cache and verify the favicon loads

That's it. Your favicon now works across every browser and device.

Creating Favicons Manually

If you prefer full control, here's how to create each file:

Multi-Size ICO File

The ICO format is a container — one file, multiple resolutions. You need 16×16, 32×32, and 48×48 inside it.

Using ImageMagick (command line):

# From a source PNG
convert source-512.png -resize 16x16 icon-16.png
convert source-512.png -resize 32x32 icon-32.png
convert source-512.png -resize 48x48 icon-48.png
convert icon-16.png icon-32.png icon-48.png favicon.ico

Using GIMP (free GUI):

Open your source image
Scale to 48×48 (Image → Scale Image)
Export as .ico
In the export dialog, check "16×16" and "32×32" to include multiple sizes

PNG Favicons

Simple resizing from your source:

convert source-512.png -resize 16x16 favicon-16x16.png
convert source-512.png -resize 32x32 favicon-32x32.png
convert source-512.png -resize 180x180 apple-touch-icon.png
convert source-512.png -resize 192x192 android-chrome-192x192.png
# 512x512 is usually your source, just rename/copy
cp source-512.png android-chrome-512x512.png

SVG Favicon

If your logo exists as SVG, use it directly. SVG favicons have key advantages:

Perfect at any size (vector, not raster)
Tiny file size (usually 1-5 KB)
Supports dark mode via CSS media query

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    rect { fill: #10b981; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #34d399; }
    }
  </style>
  <rect width="100" height="100" rx="20"/>
  <text x="50" y="68" font-size="55" text-anchor="middle"
        fill="white" font-family="system-ui, sans-serif" font-weight="700">W</text>
</svg>

Apple Touch Icon Specifics

iOS applies its own visual effects to home screen icons:

Rounded corners are added automatically — don't add them in your image
No transparency — use a solid background color. Transparent icons get a black or white background
No gloss — iOS stopped adding the glossy overlay years ago
180×180 is the current recommended size (serves all modern iPhones)

HTML Implementation

Basic Implementation

<head>
  <!-- Favicon -->
  <link rel="icon" href="/favicon.ico" sizes="48x48">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
  <link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">
</head>

Next.js App Router

In Next.js 13+, place favicon files in the /app directory or /public and configure in your root layout:

// app/layout.tsx
export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico', sizes: '48x48' },
      { url: '/favicon.svg', type: 'image/svg+xml' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
    ],
    apple: [
      { url: '/apple-touch-icon.png', sizes: '180x180' },
    ],
  },
  manifest: '/site.webmanifest',
};

WordPress

Upload favicon files to your theme directory, then add to functions.php:

function custom_favicon() {
    echo '<link rel="icon" href="' . get_template_directory_uri() . '/favicon.ico" sizes="48x48">';
    echo '<link rel="icon" href="' . get_template_directory_uri() . '/favicon.svg" type="image/svg+xml">';
    echo '<link rel="apple-touch-icon" href="' . get_template_directory_uri() . '/apple-touch-icon.png">';
}
add_action('wp_head', 'custom_favicon');

Or use the built-in Site Icon feature under Appearance → Customize → Site Identity.

Static HTML

Just add the link tags to every page's <head> and place files in your root directory.

Framework-Specific Tips

Gatsby

Place favicon files in /static/. Gatsby copies them to the root during build.

Vite / Create React App

Place in /public/. Update index.html with the link tags.

Hugo

Place in /static/. Add link tags to your base template in /layouts/partials/head.html.

Shopify

Go to Online Store → Themes → Customize → Theme Settings → Favicon. Shopify handles the rest, but only supports a single image — for full control, edit your theme's layout/theme.liquid.

Testing Your Favicons

After deploying, verify everything works:

Quick Manual Check

Open your site in Chrome, Firefox, and Safari
Check the browser tab icon
Bookmark the page and check the bookmark icon
On iPhone: share → Add to Home Screen → check the icon
On Android: Chrome menu → Add to Home Screen → check the icon

Automated Check

Run your URL through WebScore's Favicon Checker. It tests:

Whether /favicon.ico exists and returns 200
All formats present (ICO, PNG, SVG)
Apple Touch Icon detection
All detected sizes
Missing format warnings
Preview across browser tab, Google results, and mobile home screen

This catches issues you'd miss in manual testing — like a missing 32×32 PNG that only affects retina displays.

Favicon Design Tips

Do:

Use 1-2 brand colors maximum
Use a simplified version of your logo (icon mark, not full logo)
Ensure it's recognizable at 16×16
Test against both light and dark backgrounds
Use solid shapes over outlines (outlines disappear at small sizes)

Don't:

Include text (illegible at 16px)
Use gradients (muddy at small sizes)
Use thin lines (invisible at 16px)
Copy your full logo (too detailed)
Use more than 3 colors (simplify)

Pro tip: Create your favicon at 16×16 first, then scale up. This forces you to simplify. It's much easier to add detail when scaling up than to remove it when scaling down.

Common Problems and Fixes

Favicon not updating after deploying new one: Browser caches favicons aggressively. Clear cache, or append a query string: favicon.ico?v=2.

Favicon looks blurry on retina displays: Your ICO file only contains 16×16. Add 32×32 and 48×48 versions, and ensure you have the favicon-32x32.png link tag.

Favicon missing in Google search results: Google caches favicons independently. After adding a proper favicon, it can take days to weeks for Google to pick it up. Ensure your favicon URL isn't blocked by robots.txt.

iOS home screen shows a screenshot instead of your icon: You're missing apple-touch-icon.png. Add the 180×180 PNG and the <link rel="apple-touch-icon"> tag.

Favicon shows on homepage but not other pages: You're using a relative path (favicon.ico instead of /favicon.ico). Always use absolute paths starting with /.

Generate Your Favicons Now

Skip the manual work. Upload your logo to the WebScore Favicon Generator and get every file you need in 10 seconds — all sizes, all formats, with the HTML code ready to paste.

Already have favicons? Run your site through the Favicon Checker to make sure nothing is missing.

Generate favicons free →

best-practices

Scan Your Website Now

Get a comprehensive analysis of your website's performance, SEO, security, and more.