↑↓ to move · Enter to open · Esc to close

Favicon Generator

Upload your logo, preferably as an SVG, and this favicon generator builds the whole set: favicon.ico, an SVG favicon that can change in dark mode, icons for iPhone and Android home screens, and site.webmanifest. You get one ZIP and the exact code to paste into your pages.

Your image is processed in your browser and never uploaded.
Built and reviewed by · Updated

Your logo

SVG gives the sharpest result. PNG, JPG, WebP, or AVIF work too, ideally 512 × 512 pixels or larger. Ctrl+V pastes.

    Browser icon

    Style

    Home screen icon

    iPhone and Android icon
    80

    At 80% or less the icons are also marked maskable for Android.

    The short name sits under the home screen icon. About 12 characters fit.

    Where the files go

    Relative to the root of your site. Leave / when the files go in the root, or type a folder such as /icons/.

    Adds ?v= to every address, so browsers drop an old cached favicon.

    Preview

    Your favicon preview will appear here
    1. Choose or drop your logo on the left
    2. Adjust the icon and the home screen settings
    3. Download the ZIP and follow the install steps

    How to use the Favicon Generator

    1. Add your logo by choosing, dropping, or pasting it. An SVG stays sharp at every size. For PNG or JPG, use at least 512 × 512 pixels.
    2. Under Browser icon, keep the image as it is, or put it on a colored square with rounded corners and a margin. Turn on Change it in dark mode if a dark logo disappears on a dark tab bar.
    3. Under Home screen icon, pick the background for the iPhone and Android icons, then type the app name and a short name.
    4. If the files will not sit in the root of your site, enter their folder, such as /icons/. Add a version number when you are replacing an older favicon.
    5. Check the tab, Google, and home screen previews, download the ZIP, and follow the install steps that appear under the tool.

    How it works

    Browsers, search engines, and phones each look for a different file, so the package holds seven of them:

    • favicon.ico stores 16, 32, and 48 px images. Browsers still ask for /favicon.ico when a page has no icon tags, for example when you open a PDF.
    • favicon.svg is the icon current Chrome, Edge, and Firefox put in the tab. An uploaded SVG is cleaned with SVGO and nested inside it, so it stays vector. A PNG or JPG source goes in as a 256 px PNG instead, which keeps the file small.
    • Dark mode lives inside favicon.svg. A prefers-color-scheme: dark rule swaps the background color and raises the brightness through an SVG filter. The ICO and PNG files keep the light look.
    • favicon-96x96.png is the PNG fallback. Google wants a favicon whose side is a multiple of 48 px, and 96 qualifies.
    • apple-touch-icon.png is 180 × 180, the size iOS uses on the home screen. iOS paints transparent pixels black, which is why the home screen icon sits on a background by default.
    • The 192 and 512 px icons are listed in site.webmanifest for Android and installable web apps.

    On a background, the art is scaled and centered:

    art = side × image size, with (side - art) ÷ 2 of margin on each edge.

    At 80 percent, the 180 px Apple icon gets 144 px of art and an 18 px margin. At 80 percent or less, the manifest lists the 192 and 512 px files a second time with purpose: maskable, since Android crops icons to a shape and only a centered circle 80 percent wide is sure to stay visible.

    Examples

    • The 64 × 64 sample SVG (a star on a blue circle) gives a vector favicon.svg of under 1 KB. The PNG icons are drawn from a 1024 px render, so even the 512 px icon has clean edges.
    • A 1254 × 1254 PNG logo goes into favicon.svg as a 256 px copy. Embedding the full image would make the SVG larger than 1 MB, and the browser downloads that file on every new visit.
    • An 800 × 400 wordmark is centered on a transparent 800 × 800 square, and the tool tells you it did that. A wide logo is hard to read at 16 px, so a single letter or symbol usually works better.
    • With the folder set to /icons/ and version 3, the first tag points to /icons/favicon-96x96.png?v=3, and the manifest icons get the same folder and version.

    Files in the favicon package

    FileSizeUsed by
    favicon.ico16, 32, and 48 pxOlder browsers, PDFs, and any request for /favicon.ico
    favicon.svgVector, or a 256 px PNG insideTabs in Chrome, Edge, and Firefox, with the dark mode version
    favicon-96x96.png96 × 96Browsers without SVG favicons and Google search results
    apple-touch-icon.png180 × 180iPhone and iPad home screens
    web-app-manifest-192x192.png192 × 192Android home screen
    web-app-manifest-512x512.png512 × 512Android splash screen and installed web apps
    site.webmanifestTextApp name, short name, theme color, and the two icons above

    Limitations

    • Raster images smaller than 48 × 48 pixels are refused. Under 512 px, the 192 and 512 px home screen icons are enlarged and look soft.
    • Only favicon.svg has a dark version. A browser that shows the PNG or ICO file always shows the light one.
    • The SVG cleaner removes scripts, event handlers, embedded HTML, and anything that loads another file. A style block that pulls in a web font is dropped, so turn text into paths before you upload.
    • A square logo that fills its whole box can lose its corners on Android at 80 percent. Lower the home screen image size to about 60 percent for that kind of logo.
    • Animated GIFs use their first frame only.
    • The tool does not inspect a live website. After installing, open your site and look at the tab.

    Frequently asked questions

    What size should a favicon be?

    Start from an SVG or an image of at least 512 × 512 pixels. Tabs show the icon at 16 or 32 pixels, but phones ask for 180, 192, and 512 pixel versions, and this tool makes all of them from the one image.

    Do I still need favicon.ico?

    Keep it. Current browsers use the SVG or PNG named in your head tags, but a page without those tags, a PDF opened in the browser, and many feed readers still request /favicon.ico from the root of the site.

    How do I make a favicon that changes in dark mode?

    Turn on Change it in dark mode and raise the brightness, or pick a darker background color. The tool writes both looks into favicon.svg with a prefers-color-scheme rule, and the browser picks one to match its theme.

    Why does my old favicon still show after I replaced it?

    Browsers cache favicons for a long time. Reload with Ctrl+F5, or set a version in step 4 so every address ends in ?v= and the browser has to fetch the new files.

    Where do the files go in a Next.js project?

    Put them in the public folder, then pick Next.js in the install steps and paste the metadata export into app/layout.tsx. Next.js serves everything in public from the root of the site.

    Is my logo uploaded anywhere?

    No. Reading the image, cleaning the SVG, resizing, and building the ZIP all happen in your browser, so the file never leaves your device.

    Often used together with Favicon Generator.

    • App Icon Generator

      Makes every iOS and Android app icon size from one 1024 px image and packs them in a ZIP.

    • SVG Optimizer

      Shrinks SVG files with SVGO and shows the before and after side by side.