Free Favicon Generator

Create a favicon from your logo

Upload one logo and download a complete favicon package: favicon.ico, PNG icons, an Apple Touch Icon, 192×192 and 512×512 web app icons, and a web app manifest. The tool is free, requires no account and adds no watermark.

PNG, JPG, WebP and SVG sources all work. The generated files follow common browser, Apple and web app conventions; if your platform has specific icon requirements, check its documentation before publishing.

Common uses include browser tabs, bookmarks and history entries, iOS home-screen shortcuts, and icons referenced by a web app manifest.

Quick Answer

The Favicon Generator turns one logo (PNG, JPG, WebP or SVG) into a complete website favicon package: favicon.ico with browser frame sizes from 16 to 256 pixels, 16 and 32 pixel PNG icons, a 180 pixel Apple Touch Icon, 192 and 512 pixel web app icons, and site.webmanifest. Output is a single ZIP file.

Requirements

Supported input

PNG, JPG, WebP or SVG, up to 10 MB. A square source of at least 512×512 pixels gives the sharpest result at the smallest 16×16 browser size.

Output format

A single ZIP file containing favicon.ico (multi-size), 16 and 32 pixel PNGs, 180 pixel Apple Touch Icon, 192 and 512 pixel web app icons, plus site.webmanifest.

What it does not do

No preset styles (no rounded corners, no flat backgrounds). The generator preserves the source image; if you need a rounded or themed variant, prepare the source in a design tool first.

Favicon sizes explained

Short answer: 16×16 and 32×32 pixels are common for browser tabs. This generator also creates a 180×180 Apple Touch Icon plus 192×192 and 512×512 web app icons for platforms that use those assets.

The multi-size favicon.ico contains several browser-oriented sizes in one file. There is no single universal favicon rule for every platform, so link the files your website or platform asks for.

Favicon workflow: from upload to install

1. 1 Upload a logo. Choose a PNG, JPG, WebP or SVG file up to 10 MB.
2. 2 Generate the package. Create the ICO, PNG icons and web manifest.
3. 3 Preview the icons. Review the generated browser, Apple and web app sizes.
4. 4 Download the files. Save the complete favicon-package.zip.
5. 5 Install on your site. Copy the files to a public folder and link the relevant assets.

Output files guide

Every generated ZIP contains the seven files below. Publish the files your browser, CMS or framework supports, and keep their paths consistent with your HTML links.

Favicon Size Guide

Every size the generator produces, with the file it ships in and the platform that actually asks for it. The ICO is a multi-size container, so it carries 16, 24, 32, 48, 64, 128 and 256 pixel frames in one file. The separate PNGs cover the cases where a single-size file is requested by name.

Common favicon mistakes (source image)

Most favicon problems come from the source image or from browser caching. These are the issues that come up most often:

• Uploading a logo that is too small. A source below 512×512 pixels has to be enlarged to produce the 512×512 web app icon, and enlarging adds no detail — edges turn soft. Small sources also tend to lose whatever fine detail they have when scaled down to 16×16. Start from a sharp square image of at least 512×512 pixels.
• Using a photograph as a favicon. At 16×16 or 32×32 pixels a photo compresses into indistinct noise. Simple logos with one or two colors, strong contrast and a clear silhouette stay recognizable at tab size.
• Only generating favicon.ico. Modern browsers and mobile devices often request PNG icons as well: iOS looks for an Apple Touch Icon for home screen shortcuts, and web app manifests commonly reference the 192×192 and 512×512 PNGs. Linking only an ICO leaves those cases with a fallback or a blank icon.
• Not clearing the browser cache after replacing a favicon. Browsers cache favicon files, sometimes for a long time, so the old icon can keep showing after you deploy a new one. Hard-refresh, test in a private window, or add a version query string to the icon link (for example ?v=2).

Common favicon deployment mistakes

Even with a clean source, the icon may still not show up. The problems below are the ones that show up most often after the ZIP is downloaded and the files are deployed.

• Wrong file path or case mismatch. The href on the icon link must point at the file the server actually serves. Common mismatches: linking /Favicon.ico on a case-sensitive Linux host, or moving the files to /assets/icons/ while the link still points at /favicon.ico. Open the link directly in the browser — a 404 confirms the path is wrong.
• Unsupported format or MIME type. The browser checks the file's content type, not just the extension. A file served as image/x-icon is fine for an ICO; PNGs must be served as image/png; SVGs as image/svg+xml. Some static hosts default to application/octet-stream for unknown extensions — DevTools' Network tab will show the response type.
• Browser is showing a cached old favicon. Favicon cache lives outside the regular page cache, and most browsers do not revalidate it aggressively. The fastest fix is a hard refresh (Cmd/Ctrl + Shift + R), an incognito window, or a version query string on the href (for example /favicon.ico?v=2) so the browser treats it as a new resource.
• Missing web app manifest link. Web app contexts can discover the 192×192 and 512×512 icons when the page links a site.webmanifest that declares both files. The manifest link tag is shown in the developer examples below; without it, supporting browsers will not discover these manifest icons from the page.
• Source resolution is too low. The generator scales from whatever you upload. A 128×128 PNG cannot produce a sharp 512×512 — it is upscaled, and upscaling adds no real detail. Edges turn soft and the small 16×16 frame looks blurry. Aim for a square source of at least 512×512 pixels, ideally 1024×1024 pixels.

Favicon troubleshooting

Most favicon problems come down to caching, a wrong file path, or a missing manifest link. The four checks below resolve the cases that come up most often.

Favicon not showing up

Hard refresh the page (Cmd/Ctrl + Shift + R), open the page in a private window, or add a version query string to the icon link to force the browser to refetch the file. A static asset that is cached for hours will look like a "wrong" icon until the cache is invalidated.

<link rel="icon" href="/favicon.ico?v=2" sizes="any">

Wrong file path or 404 on the icon

Open the page in the browser, view source, and click the href on the favicon link. The browser should open the file directly. A 404 here means the path in the href does not match where the file is actually served from. Common mismatches: deploying under /assets/ while the link still points at /favicon.ico, or a case-sensitive host that does not match the file name.

Home-screen shortcut still shows an old icon

The linked apple-touch-icon.png is intended for the shortcut a user adds to an iPhone or iPad home screen. If the shortcut does not update, delete it and add it again after deploying the new file. This generator writes an opaque Apple Touch Icon on a white background, so it can look different from a transparent browser icon.

PWA install banner not appearing

A missing install option is not usually a favicon problem. Check that the page links a valid site.webmanifest, that both icon URLs return successfully, and that the site meets the current installation criteria of the browser you are testing. The Application tab in DevTools reports manifest and icon errors; browser installation rules can change independently of the generated files.

Browser and device compatibility

Each file in the package targets a different browser or device, which is why most sites link several of them. Where each one is commonly used:

favicon.ico

The traditional browser tab icon. Still requested by many browsers as a default when no other icon is linked, and typically used for Windows desktop shortcuts.

favicon-16x16.png / favicon-32x32.png

Supported by most modern browsers for tabs, bookmarks and history entries. The 32×32 version is commonly picked on high-DPI displays.

apple-touch-icon.png

Home screen shortcut icon on Apple devices (iPhone and iPad). This generator creates an opaque 180×180 PNG on a white background for a predictable home-screen result.

android-icon-192.png

A common 192×192 web app icon referenced through the generated manifest.

android-icon-512.png

A high-resolution 512×512 web app icon referenced through the generated manifest.

site.webmanifest

A JSON file that declares the two generated web app icon paths. Link it from the HTML head.

Icon selection is not identical across browsers — each picks from the icons you link based on its own rules. Shipping the full set covers the common cases without per-browser configuration.

How major browsers use favicon files

Browser icon selection depends on the linked files, declared sizes, platform and browser version. This overview stays intentionally conservative; test the deployed page in the browsers you support.

Chrome (desktop and Android)

Chrome supports linked ICO and PNG favicons and can request /favicon.ico as a fallback. Installable web app surfaces read their larger icons from the linked manifest rather than from the tab favicon alone.

Firefox (desktop)

Firefox supports linked ICO, PNG and SVG favicon formats. Declare explicit paths and sizes where applicable, and keep a PNG or ICO fallback if the site also needs to support older browser versions.

Safari (macOS and iOS)

Safari can use linked browser favicons on macOS. For an iPhone or iPad home-screen shortcut, publish apple-touch-icon.png and link it with rel="apple-touch-icon".

Microsoft Edge

Current Edge versions support linked ICO and PNG browser icons. Installed-site and web app surfaces can also use the 192×192 and 512×512 files declared in a web manifest.

Favicon format comparison

Websites can publish ICO, PNG or SVG browser favicons. This generator creates the ICO and PNG files listed below; it does not create favicon.svg. The comparison explains when a separately supplied SVG may still be useful.

ICO vs PNG vs SVG

Apple Touch Icon vs browser favicon

Browser favicons (ICO and PNG) appear in Chrome, Firefox, Safari, and Edge tabs and bookmarks. Apple Touch Icon is a separate 180x180 PNG used only when an iPhone or iPad user adds the site to the home screen. This generator writes that file on an opaque white background; shipping a separate Apple Touch Icon lets you review and control that surface independently from the transparent browser favicon.

Browser favicon vs PWA icon

A browser favicon lives at the site root and is referenced from the HTML <head>. Web app icons are declared in a manifest and can be used by supporting browsers when a site is installed. A common baseline is 192×192 and 512×512 PNG files plus a linked manifest; icon files alone do not make a site installable.

Favicon best practices

Use this checklist after generation. It focuses on the files this tool actually creates and avoids assumptions about one browser or framework.

• Start with a simple, high-resolution source. A square image of at least 512×512 pixels is a practical baseline for the largest generated PNG. Strong contrast and a clear silhouette are easier to recognize at 16×16 and 32×32 pixels.
• Link the files your website setup supports. ICO and PNG browser icons, the Apple Touch Icon, and manifest icons serve different contexts. Use explicit paths rather than assuming every browser will discover every file automatically.
• Review the Apple Touch Icon separately. This generator deliberately creates an opaque 180×180 image on a white background. Check that result before publishing if the source logo uses transparency or a light-colored mark.
• Keep manifest paths consistent. The generated manifest references /android-icon-192.png and /android-icon-512.png at the site root. Update those src values if you publish the files in a subdirectory.
• Verify the deployed URLs. Open each linked icon and the manifest directly, then test in a private window to reduce confusion from an older cached favicon.

Developer usage: HTML, React, Next.js and WordPress

The examples below assume the generated files are served from the site root. If you use a subdirectory, update both the link tags and the icon src paths inside site.webmanifest.

HTML

Copy the package files to the public site root, then add these tags to the document <head>.

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

React (Create React App or Vite)

Put all seven files in public/. CRA copies that directory to the build output; Vite serves it at the root. Add the links to public/index.html for CRA or index.html for Vite.

<!-- public/index.html (CRA) or index.html (Vite) -->
<head>
  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">
</head>

Next.js

Put the generated files in public/ and declare them in App Router metadata. Next.js serves files in public/ from the URL root.

// app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: "/favicon.ico", sizes: "any" },
      { url: "/favicon-16x16.png", type: "image/png", sizes: "16x16" },
      { url: "/favicon-32x32.png", type: "image/png", sizes: "32x32" },
    ],
    apple: "/apple-touch-icon.png",
  },
  manifest: "/site.webmanifest",
};

WordPress

The simplest route is to upload android-icon-512.png through WordPress's Site Icon setting; the location of that setting varies by WordPress version and theme. For a custom theme, copy the package to assets/icons/ and add explicit links in header.php.

<?php $icons = get_stylesheet_directory_uri() . "/assets/icons"; ?>
<link rel="icon" href="<?php echo esc_url($icons . "/favicon.ico"); ?>" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo esc_url($icons . "/favicon-32x32.png"); ?>">
<link rel="apple-touch-icon" href="<?php echo esc_url($icons . "/apple-touch-icon.png"); ?>">
<link rel="manifest" href="<?php echo esc_url($icons . "/site.webmanifest"); ?>">

Sources

Each factual claim on this page — the link rel="icon" syntax, the Apple Touch Icon size, the web app manifest structure, and the browser behaviour for favicon files — is sourced from the canonical documentation below.

• WHATWG HTML living standard - Link types: icon: https://html.spec.whatwg.org/multipage/links.html#rel-icon — Definition of the link rel="icon" syntax browsers use to fetch a favicon, including the sizes attribute.
• MDN - HTML attribute rel: icon: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel#icon — Browser behaviour for rel="icon", rel="apple-touch-icon" and the file types each value accepts.
• MDN - Web app manifest: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest — Reference for the web app manifest JSON file, including the icons array that browsers use for install prompts.
• Apple Developer - Configuring Web Applications: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html — Apple's documentation for the apple-touch-icon link relation and the iOS home screen icon size.