Free · .ico + PWA + manifest

Generate every favicon your site needs.

From an uploaded image or just your brand initials — full .ico, apple-touch-icon, Android, and PWA sizes. Ships with the <link> snippet and a site.webmanifest you can paste in.

your-app.com
Your favicon rendered at 14×14 like a real browser tab.

Source

Up to 2 characters are actually rendered. Emoji works.

Background color

neutral
stone
zinc
slate
gray
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose

Text color

Corner radius

22%

Favicon ZIP

favicon.ico · 16/32/180/192/512/144 PNG · manifest · install snippet

Install snippet

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

Paste inside your <head>.

— What ships

Every surface Google, Apple, and Microsoft want

FilePurpose
favicon.icoLegacy / IE + Edge fallback (contains 16, 32, 48)
favicon-16.pngBrowser tab (small)
favicon-32.pngBrowser tab (retina)
apple-touch-icon.png (180)iOS home-screen + Safari pinned tabs
android-chrome-192.pngChrome Android home-screen
android-chrome-512.pngPWA install icon
mstile-144.pngWindows tile
site.webmanifestPWA metadata: name, icons, theme color
— How it works

Four steps

  1. 1

    Pick a source

    Two characters of text, or a square image — PNG, JPEG, WebP, or SVG.

  2. 2

    Pick a background color

    Full Tailwind palette; text color auto-contrasts for legibility.

  3. 3

    Dial the corner radius

    Square, rounded, iOS squircle, or full circle.

  4. 4

    Download the ZIP

    favicon.ico (multi-size), every PNG, and a copy-paste <link> snippet + site.webmanifest.

— Questions

Frequently asked

What's inside the ZIP?+

favicon.ico (embedded 16/32/48), favicon-16.png, favicon-32.png, apple-touch-icon.png (180), android-chrome-192.png, android-chrome-512.png, mstile-144.png, install-instructions.html (<link> snippet), and site.webmanifest.

Why a multi-size .ico?+

Windows and older browsers request different sizes depending on the surface (tab, pinned tab, taskbar). A single .ico containing 16/32/48 covers every case without the browser interpolating. Modern browsers also honor PNG icons declared via <link>, so you get both.

Is it safe to generate a favicon from text?+

Yes — it's a perfectly fine placeholder for early-stage projects. When you eventually brand properly, regenerate from an image.

Where do I install the files?+

Drop the ZIP contents into your site's /public (Next.js, Remix, Astro) or /static (Nuxt, Gatsby) directory, then paste the HTML snippet inside your <head>.

— More free tools

Keep building

App icon maker

Design an iOS or Android app icon from 150+ Tabler icons and the full Tailwind palette.

SVG optimizer

Paste or drop an SVG to strip metadata, minify paths, and optionally convert to React JSX.

— Shipping to the App Store?

Translating screenshots into every locale is what lokal was built for. Upload once, ship to every store.

Explore lokal