Favicon Generator

Create a complete set of favicons for your website from a single image. Generate sizes for all modern browsers and devices, including PNG icons and Apple Touch Icons, and download them in a convenient ZIP file.

Upload Source Image

Generated Favicons

Upload an image to generate favicons

What is a Favicon?

A favicon (short for "favorite icon") is a small icon that represents your website. It appears in various places, such as browser tabs, bookmark bars, and mobile home screens when a user saves your site. A consistent and professional favicon is a crucial part of your website's branding and user experience. It helps users quickly identify your site among many open tabs and reinforces your brand identity.

Why Do You Need Multiple Favicon Sizes?

Different devices, browsers, and platforms require different favicon sizes and formats for optimal display. For example:

  • Browser Tabs: Typically use a 16x16 or 32x32 pixel icon.
  • Apple Devices (iPhone/iPad): Use the apple-touch-icon.png (usually 180x180 pixels) when a user adds your site to their home screen.
  • Android Devices: Use higher-resolution PNG icons (like 192x192 and 512x512) for home screen shortcuts and for the web app manifest.

Creating all these sizes manually can be tedious. This tool automates the process entirely.

How to Use the Favicon Generator

  1. Upload Your Image: Click the "Upload Image" button and select your source image. For best results, use a square image that is at least 512x512 pixels. PNG format with transparency is ideal.
  2. Automatic Generation: The tool will instantly generate all the necessary favicon sizes based on your uploaded image. You will see a preview of each generated icon.
  3. Download: Click the "Download All as ZIP" button. This will download a single ZIP file containing all your favicon images, correctly named and ready for use.

How to Add Favicons to Your Website

After downloading the ZIP file, unzip it and place the images in the root directory of your website. Then, add the following code to the <head> section of your HTML files:

HTML
<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">
<meta name="theme-color" content="#ffffff">

For modern web apps, you should also create a site.webmanifest file in your root directory with the following content, which uses the larger icons for Android devices:

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

This tool simplifies a crucial step in website development, ensuring your site looks professional and is easily identifiable across all platforms.

Key sizes generated (at a glance)

  • 16×16 → favicon-16x16.png (browser tabs)
  • 32×32 → favicon-32x32.png (hi‑dpi tabs)
  • 48×48 → favicon-48x48.png (legacy/alternate contexts)
  • 180×180 → apple-touch-icon.png (iOS/iPadOS home screen)
  • 192×192 → android-chrome-192x192.png (PWA/Android shortcut)
  • 512×512 → android-chrome-512x512.png (PWA install icon)

Best practices for favicon, SEO, and branding

  • Use a square, high‑resolution source (≥1024×1024 PNG with transparency) for crisp results.
  • Keep the design simple and high‑contrast so it remains recognizable at 16×16.
  • Serve correct MIME types and file names exactly as referenced in HTML/manifest.
  • Add <meta name="theme-color"> to influence mobile UI and Lighthouse PWA scoring.
  • Provide a site.webmanifest with 192×192 and 512×512 icons for installable PWAs.
  • Consider a Safari pinned tab icon (mask-icon) for macOS (single‑color SVG works best).
  • Avoid only using .ico; modern browsers prefer PNG. Keep .ico only if needed for legacy.
  • Cache icons with long Cache-Control and change file names to bust cache on updates.
  • Document authorship and update cadence. This page lists maintainer and last_updated for trust.

Next.js / React snippet (quick add)

Add tags via next/head (or your custom _document.tsx):

JSX
import Head from 'next/head'

export default function MyPage() {
  return (
    <>
      <Head>
        <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" />
        <meta name="theme-color" content="#ffffff" />
        {/* Optional for Safari pinned tabs */}
        {/* <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" /> */}
      </Head>
      {/* … */}
    </>
  )
}

Common mistakes to avoid

  • Only providing one size (e.g., 16×16) and skipping touch/PWA icons.
  • Linking to files that aren’t actually deployed at those paths.
  • Supplying a non‑square image and expecting perfect cropping.
  • Using text‑heavy icons that blur at small sizes.
  • Forgetting to update caches after replacing icons.

FAQ

1) Do favicons impact SEO?
Indirectly. A correct favicon improves brand recognition and UX signals; PWA/touch icons help Lighthouse scores. Ensure valid links and manifest for best results.

2) Which sizes are required?
At minimum: 16×16 and 32×32 PNG, 180×180 Apple Touch, plus 192×192 and 512×512 in the manifest.

3) Should I still use .ico?
PNG is preferred by modern browsers. Keep .ico only for legacy support if your audience requires it.

4) Where do I put the files?
Place them at your site root (/public in Next.js) and reference with root‑relative URLs.

5) How do I bust cache?
Change file names (e.g., favicon-32x32.v2.png) or append query strings and update the links.

6) Can I use WebP?
Use PNG for maximum compatibility. WebP is fine for source upload; the generator outputs PNG.

7) What goes in site.webmanifest?
Name, short_name, icons (192 and 512), theme/background colors, and display mode. See the example above.

8) My icon looks blurry—why?
Likely low‑resolution source, poor contrast, or non‑square cropping. Start with ≥1024×1024 and simplify the design.

Related tools on ChangeBlogger

Related Tools

EXIF Viewer & Remover

ExifViewer

View and remove EXIF data from images for privacy.

Try Now

Image Editor

Image

Transform your images with powerful editing tools. Simple, fast, and secure image editing with brightness, contrast, saturation controls, filters, and format conversion.

Try Now

Image Format Converter

Image

Convert images between different formats like JPG, PNG, WebP, and more.

Try Now