Favicon Generator
Turn one logo or icon into a complete set of favicons in seconds. This free favicon generator runs entirely in your browser: drop in a single square image and download an ICO file, every PNG size modern browsers expect, an apple-touch-icon, a web app manifest, and the exact HTML snippet to paste into your site.
Nothing is uploaded to a server. Your image is processed locally on your device, so it never leaves your computer, and there are no watermarks, sign-ups, or limits on how many favicons you create.
Includes favicon.ico, PNG sizes (16–512px), apple-touch-icon, site.webmanifest, and ready-to-paste HTML. Upload icons to your site root (or adjust the path prefix). Files never leave your device.
How to use the favicon generator
Upload one logo or icon using the file picker above, ideally a square image at least 512×512 pixels. The tool generates every size for you and packages them together. Download the ZIP, unzip it into your website’s root folder, then copy the provided HTML snippet into the <head> of your pages. That single block tells every browser and device which icon to use, and you are done.
What a favicon actually is
A favicon is the small icon that represents your site in browser tabs, bookmarks, history lists, and search results. On phones it also becomes the icon people see when they save your site to their home screen. A clear, recognisable favicon makes your site easier to spot among dozens of open tabs and lends a professional, finished feel to even the simplest website.
The files modern sites need and where they go
A single favicon.ico is no longer enough. Browsers, Apple devices, and Android home screens each look for different files at different sizes. The table below shows the core set this tool produces and what each one is for. Place every file in your site’s root directory (the same folder as your homepage), unless your HTML snippet points somewhere else.
| File | Size | Purpose |
|---|---|---|
| favicon.ico | 16, 32, 48 px | Legacy and default browser tab icon |
| favicon-32×32.png | 32×32 px | Standard desktop browser tabs |
| favicon-16×16.png | 16×16 px | Smaller tab and bookmark displays |
| apple-touch-icon.png | 180×180 px | iOS home screen and Safari bookmarks |
| android-chrome-192×192.png | 192×192 px | Android home screen icon |
| android-chrome-512×512.png | 512×512 px | Splash screens and high-density displays |
| site.webmanifest | — | Tells Android/PWAs which icons and theme to use |
Choosing the best source image
Favicons are tiny, so detail is the enemy. Start with a square image of at least 512×512 pixels so every size downscales cleanly. A bold, simple mark, a single letter, a monogram, or a symbol reads far better than a full logo with text. Use strong contrast and a transparent or solid background, and check that your icon still looks clear at 16×16 pixels, because that is how most people will see it.
The HTML to add to your page <head>
Generating the files is only half the job — browsers will not find them until you reference them. Upload the files to your site’s root folder (the same level as your home page), then paste these tags inside the <head> of every page, or into your shared header template. If you keep the files in a sub-folder instead, adjust each href path to match.
| Tag | What it does |
|---|---|
<link rel="icon" href="/favicon.ico" sizes="32x32"> | Classic fallback for older browsers and for bookmarks |
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> | Crisp, scalable icon used by modern browsers |
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> | 180×180 icon for the iOS and iPadOS home screen |
<link rel="manifest" href="/site.webmanifest"> | Points to the manifest holding the 192px and 512px Android/PWA icons and theme colour |
SVG and dark-mode favicons
A single SVG favicon stays razor-sharp at any size and on high-density displays, which is why every current version of Chrome, Firefox, and Edge prefers it. Keep favicon.ico alongside it as a fallback, because browsers that do not support SVG favicons (older Safari and Internet Explorer) ignore the SVG and load the ICO instead.
An SVG can also adapt to the browser theme. Because it is just markup, you can embed a media query inside the file — @media (prefers-color-scheme: dark) { ... } in the SVG’s <style> block — to swap the fill colours so a dark logo flips to light when the user is in dark mode. One caveat: the Apple touch icon should be fully opaque with no transparency, because iOS places it on a tile and adds its own rounded corners, turning any transparent areas black.
Frequently asked questions
What size should a favicon be?
There is no single size. Browsers use 16 and 32 pixel icons in tabs, Apple devices want a 180 pixel apple-touch-icon, and Android home screens use 192 and 512 pixel versions. The best approach is to supply one high-resolution square source, at least 512 pixels, and let this generator produce every required size for you.
Do I still need a favicon.ico file?
Yes, it is still worth including. Older browsers and some tools request favicon.ico by default from your site root, and a multi-resolution ICO covers those cases reliably. Modern browsers prefer the PNG sizes referenced in your HTML, so including both the ICO and the PNGs gives you the widest compatibility.
What is the apple-touch-icon for?
When someone adds your website to the home screen on an iPhone or iPad, iOS uses the apple-touch-icon as the app-style icon. It is typically 180×180 pixels with no transparency, since Apple applies its own rounded corners. Without it, the device falls back to a blurry screenshot, so including this file makes your site look intentional.
Why isn’t my new favicon showing up?
Browsers cache favicons aggressively, so old icons can linger. After uploading the new files and HTML snippet, do a hard refresh, clear your browser cache, or open the page in a private window. It can also take time for search engines to update the icon they show. Confirming the files load directly at their URLs helps rule out path mistakes.
Where exactly do the favicon files go?
The simplest place is your site’s root directory, the same folder as your home page, because browsers automatically look for /favicon.ico there even with no link tag. If your platform or build tool outputs to a different folder, put the files there and update every href in your link tags to the matching path so the references still resolve.
Should I bother with an SVG favicon?
Yes, if you can. One SVG file replaces several PNG sizes, scales perfectly to any display without blurring, and is the only format that can react to dark mode. The only reason to also ship PNG and ICO versions is fallback support for older browsers and platforms like iOS that still expect raster icons, which is why generators output both.
How do I make a dark-mode favicon?
Open your favicon.svg in a text editor and add a <style> block with a @media (prefers-color-scheme: dark) rule that changes the fill colour of your shapes. Browsers that support SVG favicons then show the light version automatically when the user has dark mode enabled. The ICO and PNG fallbacks cannot do this, so design them to read well on either background.
What is the site.webmanifest file for?
It is a small JSON file that tells Android and Progressive Web Apps how to present your site when someone adds it to their home screen. It lists the 192px and 512px PNG icons, your site name and short name, and a theme colour. Without it, Android may fall back to a generic or low-resolution icon, so keep it linked from your <head>.