Modern Favicon Generator

Turn any image, text, or emoji into a complete, SEO‑ready favicon bundle — free — favicon.ico, SVG favicon, Apple Touch Icon, and Android/PWA icons — in one click. No signup, no watermark, and your images never leave your browser.

100% free
Private — nothing is uploaded
All 2026 sizes in one ZIP
Live previews

1 · Design your icon

Drop an image here, click to browse, or paste

PNG, JPG, SVG, WebP or GIF · square works best

Background

Transparent

Padding 8%

Corner radius 18%

App name & PWA options (optional)

These fill in the site.webmanifest, which Android and other platforms read when someone installs your site to their home screen. Safe to skip for a normal website — you can edit the file later.

App name

Your site or product's full name — shown on the install prompt and splash screen.

Short name

Shown under the home-screen icon — aim for 12 characters or fewer.

Theme colour

Include theme-color meta tag

Tints the browser and app chrome around your site — usually your brand colour.

Dark-mode SVG favicon (swaps colours on dark browser themes — text & emoji modes) Also include 16×16 and 32×32 PNGs (legacy)

2 · Preview & download

Upload an image or type some text to see live previews of your favicon in a browser tab, Google search results, and on iOS & Android home screens.

3 · Install on your site

Download the bundle above and unzip it.
Copy every file into your website's root folder — the same folder as your homepage (public/ in most frameworks) — so they load from /favicon.ico.
Paste these tags into the <head> of every page:

Using an AI coding assistant? and paste it into Claude Code, Cursor or Copilot after unzipping into your project — it places the files and adds the tags for you. The same steps ship in the ZIP as AI-INSTRUCTIONS.txt.

View the complete installation guide →

Why use this favicon generator?

Most favicon tools upload your image to a server, bury you in outdated icon sizes, or make you click through five pages of platform settings. This one doesn't.

100% private

Everything runs in your browser with the Canvas API. Your logo is never uploaded to any server — safe for unreleased brands and confidential work.

One step, one ZIP

No multi-page wizards, no email walls, no watermarks. Design, preview, download. Done in under a minute.

Don't spend AI tokens on this

Asking a chatbot to draw and resize a favicon set burns tokens on work a browser does deterministically, for free, in seconds. If an AI assistant is building your site, hand it the finished bundle instead — every download includes ready-made install instructions it can follow.

The 2026 bundle — nothing more

Only the files modern browsers actually use: favicon.ico, SVG, Apple Touch Icon, and PWA icons with a proper maskable variant. No 30-file bloat, no Windows-tile relics.

Real-context previews

See your favicon in light and dark browser tabs, a Google search result, and iOS & Android home screens before you download.

Image, text or emoji

Convert PNG, JPG, SVG, WebP or GIF — or generate a favicon from your initials or any emoji, with fonts, colours, padding and rounded corners.

Maskable icons done right

Android adaptive icons get a dedicated maskable 512×512 with your artwork inside the safe zone, so it survives circle, squircle and rounded-square masks.

Dark-mode SVG favicons

Text and emoji favicons ship as an SVG with a prefers-color-scheme media query, so your icon stays legible on dark browser themes — something no mainstream generator offers.

What is a favicon?

A favicon (short for "favourite icon") is the small icon that represents a website in browser tabs, bookmarks, browsing history, and next to your site's name in Google search results. It is one of the most visible parts of your brand: it appears every time someone opens your site in a tab, saves it, or finds it in search.

Favicons started in 1999 as a single 16×16 favicon.ico file in Internet Explorer 5. Today, "favicon" really means a small bundle of icons: the classic ICO file, a scalable SVG, a 180×180 Apple Touch Icon for iOS home screens, and 192×192/512×512 PNG icons referenced by a web app manifest for Android and progressive web apps.

Favicon sizes: the complete guide (updated 2026)

A favicon.ico should contain 16×16, 32×32 and 48×48 pixel versions. Beyond the ICO, each platform requests a specific size. This is every size that matters in 2026 — and it's exactly what this generator produces:

File	Size	Used by
`favicon.ico`	16×16, 32×32, 48×48	Browser tabs, bookmarks, Windows shortcuts. Browsers and Google request `/favicon.ico` automatically even without a link tag.
`favicon.svg`	Any (vector)	Modern browsers (Chrome, Edge, Firefox, Safari). One sharp file for every resolution; can adapt to dark mode.
`favicon-96x96.png`	96×96	High-DPI tabs, bookmarks and desktop shortcuts. Also comfortably exceeds Google Search's minimum favicon size of 48×48.
`apple-touch-icon.png`	180×180	iOS & iPadOS home screen icon. Must be opaque — iOS renders transparency as black. One 180×180 file covers all current Apple devices; the old 57/72/114/144 sizes are obsolete.
`web-app-manifest-192x192.png`	192×192	Android home screen icon, referenced from `site.webmanifest`.
`web-app-manifest-512x512.png`	512×512	Android splash screen and PWA install prompt.
`web-app-manifest-maskable-512x512.png`	512×512 (maskable)	Android adaptive icons. Artwork sits inside the central 80% safe zone so any mask shape (circle, squircle) works.
`site.webmanifest`	—	JSON manifest referencing the PWA icons, app name and theme colour.

What you don't need any more

Older generators still produce dozens of PNG sizes (57×57 to 152×152 Apple icons), browserconfig.xml, and Windows 8 tile images. Modern browsers ignore them — they just bloat your site root. The eight files above cover every current browser, device and search engine.

How to add a favicon to your website

Generate the bundle with the tool above and unzip it.
Copy all files into your site's root folder, so they're reachable at https://yoursite.com/favicon.ico. Keeping favicon.ico at the root matters: browsers and Google's crawler request that exact path automatically.
Paste the link tags (also included in the ZIP's README) into the <head> of every page:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Or let an AI assistant install it for you

Every downloaded bundle includes AI-INSTRUCTIONS.txt — the install procedure written for AI coding tools. Two ways to use it:

In a coding agent (Claude Code, Cursor, Copilot): unzip the bundle into your project and say "follow AI-INSTRUCTIONS.txt". It knows where the files go for plain HTML, Next.js, Vite, Astro, SvelteKit, Rails, Laravel and Django, replaces any old favicon tags, and verifies the result.
In a chat: click Copy AI install prompt in the generator above and paste it — the prompt carries your exact file list and link tags.

WordPress

Go to Appearance → Customize → Site Identity → Site Icon and upload the 512×512 PNG from the bundle — WordPress generates the rest. For full control (SVG favicon, maskable icons), upload the bundle files to your site root via FTP and add the link tags to your theme's header.php or with a header-scripts plugin.

Shopify, Squarespace, Wix

Each has a favicon upload field in its design settings (Shopify: Theme settings → Favicon; Squarespace: Design → Browser Icon; Wix: Settings → Favicon). Upload the favicon-96x96.png or 512×512 PNG from the bundle — these platforms resize it for you.

React, Next.js and other frameworks

Put the bundle files in your public/ folder. In Next.js (App Router) you can instead drop favicon.ico, icon.svg and apple-icon.png into the app/ directory and Next.js generates the tags automatically. In plain React (Vite/CRA), add the link tags to index.html.

Favicon not showing? How to fix it

Favicons are cached more aggressively than almost anything else in the browser. If your new favicon isn't showing:

Check the file is live: open yoursite.com/favicon.ico directly in the address bar. A 404 means the file isn't in your root folder.
Hard-refresh: Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac).
Bust the cache: change the link tag to /favicon.ico?v=2 — the query string forces browsers to re-download it.
Check the path: use root-relative paths (/favicon.ico, not favicon.ico) so icons resolve on every page.
Google Search: Google refreshes favicons on its own schedule — typically days to a couple of weeks after recrawling your homepage. You can nudge it by requesting reindexing of your homepage in Search Console.

Free favicon tools

The same private, in-browser generator, tuned for specific jobs:

Favicon FAQ

What size should a favicon be?

A favicon.ico file should contain 16×16, 32×32, and 48×48 pixel versions. You also need a 180×180 apple-touch-icon.png for iOS, and 192×192 plus 512×512 PNG icons for Android and PWAs. Google Search requires a favicon of at least 48×48 pixels. An SVG favicon covers every other size on modern browsers.

Which favicon files do I actually need in 2026?

The modern minimal set is: favicon.ico (16/32/48px), an SVG favicon, apple-touch-icon.png (180×180), two web app manifest icons (192×192 and 512×512, plus a maskable 512×512), and a site.webmanifest file. You do not need dozens of PNG sizes or Windows tile files any more.

How do I convert a PNG to ICO?

Upload your PNG to the generator above and click Download — it converts the PNG to a multi-size favicon.ico (16×16, 32×32 and 48×48) directly in your browser, along with every other icon size your site needs. Nothing is uploaded to a server.

Can a favicon be transparent?

Yes. ICO, PNG and SVG favicons all support full alpha transparency, and this generator preserves it — a transparent background is the default. Note that iOS home-screen icons do not support transparency, so the generator automatically fills the apple-touch-icon with a solid background.

How do I make a favicon from an emoji or text?

Choose the Emoji or Text tab, type any emoji or up to four characters, pick a font, colour and background, and download. The generator renders the glyph into every required icon size and also produces a scalable SVG favicon.

Is this favicon generator really free and private?

Yes. It is completely free, with no signup, no watermark and no usage limits. It runs 100% in your browser using the Canvas API — your images are never uploaded to any server, which also makes it safe for confidential logos.

Why is my favicon not showing or not updating?

Browsers cache favicons aggressively. First check the file is reachable at yoursite.com/favicon.ico, then hard-refresh (Ctrl+Shift+R or Cmd+Shift+R), or add a version query like /favicon.ico?v=2 to the link tag. Google Search can take days to weeks to refresh a favicon after you update it. See the troubleshooting guide above.

Does a favicon affect SEO?

Indirectly, yes. Google shows your favicon next to your result in mobile and desktop search, and a clear icon improves click-through rate. Google requires the favicon to be at least 48×48 pixels, in a supported format, and reachable by its crawler.