Images & Design

Favicon Generator

Drop in your logo and get every icon a modern website needs — favicon.ico, PNG favicons, Apple touch icon, Android/PWA icons and site.webmanifest — plus the HTML to paste.

Source image

#ffffff

Fills every icon when transparency is off. The Apple touch icon always uses it, because iPhones show transparent areas as black. Also used as the manifest theme colour.

Shown under the home-screen icon (max 12 characters).

Generated icons

Upload an image to see all six sizes here.

HTML for your <head>

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" />
<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" />

Put the files in your site's root folder — next to index.html, or in public/ for Next.js and Vite.

site.webmanifestupdates live

{
  "name": "My Website",
  "short_name": "Website",
  "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",
  "start_url": "/"
}

  • Complete set, one zip

    Six PNG sizes, a multi-size favicon.ico and site.webmanifest, ready to drop into your site.

  • Padding & background

    Keep transparency or add a solid colour, and add breathing room so your logo isn't cramped.

  • Copy-paste HTML

    The exact <link> tags for your <head>, matching the file names in the download.

Free favicon generator

A favicon is the small icon in browser tabs, bookmarks and search results. Phones also use larger versions when someone adds your site to their home screen. This tool creates every size from one image, right in your browser.

What you get

  • favicon.ico with 16, 32 and 48 px images inside — the classic file browsers look for.
  • favicon-16x16.png, favicon-32x32.png, favicon-48x48.png for browser tabs.
  • apple-touch-icon.png (180×180) for iPhone and iPad home screens.
  • android-chrome-192x192.png and 512x512.png for Android and installable web apps (PWAs).
  • site.webmanifest with your app name and theme colour.

How to add it to your site

  1. Upload a square logo, ideally 512×512 px or larger (SVG or PNG works best).
  2. Adjust padding and background, then tap “Download all (.zip)”.
  3. Unzip the files into your site's root (or public/ folder).
  4. Paste the HTML snippet inside your page's <head>.

Browsers cache favicons aggressively — if you don't see the new icon, open the site in a private window or clear the cache.

Private by design. Everything runs in your browser — nothing you enter is uploaded or stored by AISeekho.

More free tools