Otaku Dojo Tools
English

Favicon Generator

The Favicon Generator turns one image (ideally a square PNG or SVG) into every icon a website needs: a favicon.ico containing 16, 32 and 48 px images, 16 and 32 px PNGs, a 180 px Apple Touch Icon, 192 and 512 px Android / PWA icons and a site.webmanifest, along with HTML tags to paste into your <head>. Everything is generated in your browser — the image is never uploaded.

  • Free
  • No sign-up
  • Runs in your browser
Options
Choose or drop files to start

    How to use the Favicon Generator

    1. Enter your site name (used in site.webmanifest) and choose a background color and padding if needed.
    2. Drop your logo into the dashed box — a square PNG or SVG of 512×512 or larger works best.
    3. Press "Download all" and put the files in your site's root folder.
    4. Copy the HTML tags below and paste them into your page's <head>.

    Examples

    Generated files and HTML

    Input
    logo.png (512×512, transparent)
    Output
    favicon.ico, favicon-16x16.png, favicon-32x32.png,
apple-touch-icon.png, android-chrome-192x192.png,
android-chrome-512x512.png, site.webmanifest

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

    Which icons does a website need?

    favicon.icoShown in browser tabs, bookmarks and Google search results (Google recommends at least 48×48)
    apple-touch-icon.pngUsed when adding to the iPhone / iPad home screen; 180×180. iOS shows transparency as black, so it is always filled with your background color
    android-chrome-192 / 512Android home screen and PWA install icons, referenced from site.webmanifest

    Specs & key facts

    Outputfavicon.ico (16/32/48), 16 / 32 PNG, Apple Touch Icon 180, Android 192 / 512, site.webmanifest
    InputPNG, SVG, JPG, WebP (square, 512×512+ recommended)
    Non-square imagesCentered and scaled with transparent margins
    OptionsBackground color, 10% padding, site name
    ExtrasReady-to-paste <head> HTML tags
    PrivacyGenerated in your browser; never uploaded

    FAQ

    I changed my favicon but the browser shows the old one. Why?

    Browsers cache favicons aggressively. Add a version to the URL (for example /favicon.ico?v=2) or clear the cache and reopen the page.

    Will Google show my favicon in search results?

    Yes, if your home page has a <link rel="icon">, the icon is at least 48×48 and Googlebot can crawl it. New icons can take a few days to appear.

    Why is the Apple Touch Icon filled with a color?

    iOS renders transparent areas as black, so the 180×180 Apple Touch Icon is always filled with the background color you choose.

    Can I use an SVG favicon?

    Modern browsers support SVG favicons, but Safari and some older browsers do not, so also provide the favicon.ico and PNGs generated here.