Advertisement
Free Favicon Generator: upload a logo and download a complete favicon package — ICO, PNG, SVG, Apple Touch and PWA icons, manifest and HTML — as one ZIP.
Create favicon assets for your website
Upload your logo
PNG, JPEG, WebP, or SVG · up to 10 MB
Click to browse, drag and drop, or paste
Browser favicons
favicon.ico and PNG sizes for tabs and bookmarks, plus an SVG favicon for vector sources.
Phone and PWA icons
Apple touch icon, Android icons, a maskable option, and a web manifest.
Real device preview
See your icon in a browser tab, search results, and on phone home screens first.
Favicon Generator builds a complete favicon package from a PNG, JPEG, WebP or SVG image. The source is uploaded to the server for rendering; the generated files are returned as one ZIP and are not presented as a client-only conversion. When your source is SVG, the package includes favicon.svg. The package can include 16/32/48 px favicons, a 180×180 Apple Touch icon, 192/512 px Android/PWA icons, Windows and Yandex assets, a site.webmanifest, optional safe-zone-padded maskable files, an HTML snippet, and a README.
What you get with Favicon Generator.
When your source is an SVG, favicon.svg ships as the primary icon — infinitely scalable and, in Chrome, Firefox, and Edge, able to switch between light and dark automatically.
Only the sizes browsers and platforms actually still use today — 16, 32, 48, 180, 192, 512 — no obsolete 64/96/128/256 px filler.
Maskable PWA icons are rendered as genuinely separate, safe-zone-padded files, not a cosmetic manifest flag — Android's adaptive icon mask never clips your artwork.
A correctly-flattened apple-touch-icon (180×180), Android/PWA icons with site.webmanifest, Windows tile with browserconfig.xml, and a Yandex browser icon.
A ready-to-use HTML snippet with every <link> and <meta> tag in the right order — SVG first, then ICO and PNG fallbacks. Paste into your <head> and done.
Upload a supported image, choose platforms, and download the generated package as one ZIP.
Follow these steps to get the best results.
PNG, JPEG, WebP, or SVG — an SVG source unlocks the primary favicon.svg output; any format works for the raster fallback set.
Select browser favicons, Apple touch icon, Android/PWA, Windows, or Yandex, then set a background and theme color.
Gets you real safe-zone-padded Android/PWA icons so adaptive launcher masks don't crop your logo after someone installs your site.
Extract the ZIP into your site's root, then paste favicon-tags.html into the <head> of every page — SVG, ICO, and PNG links are already in the right order.
Advertisement
Common questions about Favicon Generator.
A favicon is the small icon displayed in browser tabs, bookmarks, and search results next to your site name. The minimum required sizes are 16×16 px (browser tab) and 32×32 px (taskbar shortcut, and the minimum Google shows in search results). For the sharpest output across every generated size, upload a 512×512 px (or an SVG) source image.
As of 2026, an SVG favicon is the recommended primary icon: it scales to any size with no blur, and — in Chrome, Firefox, and Edge — a single file can embed a prefers-color-scheme media query to automatically show a light or dark version depending on the user's OS theme. Safari 14+ also renders SVG favicons, but as of April 2026 it does not apply the theme media query, always showing the light-mode version, which is why the ICO and PNG fallbacks are still included. An SVG favicon can only be produced from an SVG source — a raster PNG/JPEG/WebP can't be converted into one.
The ZIP includes favicon.svg (when your source is SVG), a multi-size favicon.ico (16, 32, 48 px), PNG files for each selected size, apple-touch-icon.png (180×180, always fully opaque), android-chrome-192x192.png and -512x512.png for PWA, site.webmanifest, browserconfig.xml for Microsoft tiles when Windows is selected, safe-zone-padded maskable PNGs when that option is on, a copy-paste HTML snippet, and a README with install instructions.
Android and other adaptive-icon launchers can crop a PWA icon into a circle, squircle, or rounded square. Only the inner ~80% of the icon is guaranteed not to be clipped by that mask. This tool renders the maskable option as its own, separately safe-zone-padded PNG files rather than reusing your regular icon with a different manifest label — a common shortcut that leads to real artwork being cropped after a user installs your site.
If an apple-touch-icon.png has transparency, iOS fills the transparent areas with white itself rather than leaving them see-through — which can look unintentional against a colored home-screen wallpaper. This tool always flattens the Apple touch icon onto your chosen background color (or white by default) so the result is exactly what was designed, not left to iOS's own fallback behavior.
Browser favicons: 16×16, 32×32, 48×48 (bundled into favicon.ico), plus favicon.svg when available. Apple iOS: 180×180. Android/PWA: 192×192 and 512×512. Microsoft tiles: 150×150. Yandex: 120×120. The older 64, 96, 128, and 256 px sizes some tutorials still mention are intentionally left out — those specific contexts moved to the PWA manifest icons years ago, and no current browser or OS still requests them by convention.
Unzip the package and copy every file into your website's root directory (e.g. /public in Next.js), keeping the filenames unchanged. Then paste the contents of favicon-tags.html into the <head> of every page — the SVG link comes first so modern browsers prefer it, with the ICO and PNG links right after as fallbacks.
An SVG with a simple, high-contrast mark gives you the primary favicon.svg plus the sharpest possible raster fallbacks at every size. If you only have a raster logo, a 512×512 px (or larger) PNG with a transparent background works well — avoid uploading anything smaller, since upscaling causes visibly blurry 16×16 and 32×32 tab icons.
Advertisement
Comments
Share feedback, ask questions, or help others use this tool.
Join the discussion
Sign in to comment, reply, and report inappropriate content.