Favicon Generator
The only favicon tool that generates every format you actually need. Upload your logo and get ICO, SVG with dark mode support, Apple Touch Icon, Android icons, and a site.webmanifest — all in one ZIP with live previews.
Drop your logo or image here
PNG, JPG, SVG, WebP or GIF · Square images work best
Choose FileHow to create a complete favicon package
Upload your logo
Drop any PNG, JPG, SVG, or WebP. Square images are ideal. Non-square images are center-cropped automatically to keep the most important part.
Configure each format
Set background color and padding for Apple Touch and Android icons. Define your app name, theme color, and short name. Add a dark-mode variant if your logo is white.
Preview everywhere
Switch between Chrome tab (light/dark), Google Search result (light/dark), iOS home screen, and Android launcher. See exactly what users will see before you download anything.
Download the ZIP
One click gets you all 8 files plus a site.webmanifest and a README with copy-paste install code for HTML, Next.js, and React.
What files are in the ZIP and what each one does
Every favicon tool gives you a favicon.ico. This tool gives you everything. Here is exactly what you get and why each file matters.
Why you actually need 8 different favicon files
The web is a mess of competing standards and the favicon situation is a perfect example of that. Browsers, operating systems, and search engines all have their own ideas about what a favicon should look like and where to find it. The short version is that no single file satisfies all of them.
Your desktop browser tab wants a 16x16 or 32x32 PNG or ICO. Google Search wants a 96x96 PNG to show next to your result in the SERP. iPhone wants a 180x180 PNG specifically for when someone saves your site to their home screen. Android Chrome wants 192x192 and 512x512 for the PWA launcher and splash screen. And then there is the SVG, which modern browsers prefer because it scales perfectly to any size and can switch between light and dark mode.
Most tools give you one or two of these. This one gives you all of them in a single download, configured correctly, with a site.webmanifest that ties the Android icons together. That is what the full setup looks like.
SVG favicons and dark mode: the thing nobody explains properly
SVG favicons became mainstream around 2021 when Chrome added support. The reason people care about them is not the vector scaling — it is the dark mode support. An SVG file can contain CSS, which means you can put a media query inside it. The browser respects that media query when rendering the favicon.
So your favicon.svg can contain two images: one for light mode and one for dark mode. When the user switches their OS to dark mode, the browser automatically shows the dark version in the tab without you having to do anything. This is a genuinely useful feature if your logo is white or very light colored and would disappear into a dark browser tab.
The SVG this tool generates embeds your regular icon and your dark mode icon (either auto-inverted or from a file you upload), then switches between them using the media query. Safari does not support SVG favicons yet, but Safari uses the apple-touch-icon.png for home screen and falls back to ICO for the tab, so you are covered either way.
The Apple Touch Icon situation
iOS has been doing its own thing with icons since the iPhone was released in 2007 and it has not really changed. When someone saves your website to their iPhone home screen, iOS looks for a file called apple-touch-icon.png at 180x180 pixels. It then applies its own rounded corner mask and subtle shine effect.
The thing iOS does that catches people off guard is the transparency handling. If your logo has a transparent background, iOS fills those transparent areas with black before applying the mask. A white logo on transparent will become a white logo on a black rounded square. That is often not what you want. The fix is to add a background color in this tool. Set the background to your brand color and add some padding, and it will look like a proper app icon.
The apple-touch-icon is also used by iMessage and other iOS share previews, by Slack when someone pastes your URL, and by some email clients when displaying links. It is worth getting right even if nobody is explicitly saving your site as a home screen app.
site.webmanifest: what it actually does and why you need it
The Web App Manifest is a JSON file that describes your website as if it were an app. It tells browsers the app name, short name, what icons to use, what color the browser chrome should be, and how to display the site when opened as a PWA. Browsers that support PWAs use this file to create the installable app experience.
Even if you are not building a PWA, there are two reasons to include a webmanifest. First, Chrome and Edge on Android automatically look for it and will show an "Add to Home Screen" prompt if they find one with the right setup. This is free engagement you would otherwise miss. Second, many browsers request /site.webmanifest automatically. If the file does not exist, it generates a 404 error in your server logs and slightly slows page load for those browsers.
The manifest this tool generates includes the name, short name, theme color, background color, and both icon sizes. It sets the display mode to standalone (which hides the browser UI when opened as an installed PWA) and includes a maskable purpose on the 512x512 icon so Android can display it in any adaptive icon shape.
Why your favicon is not updating and how to actually fix it
Browser caching is aggressive for favicons. More aggressive than for any other asset on your site. Browsers often cache favicons for days or even weeks, and a normal page refresh does nothing to clear it. This is one of the most complained-about things in web development and it has been for twenty years.
The only reliable fix is a version query string on the favicon URL: favicon.ico?v=2. The browser sees a different URL and fetches fresh content. This is exactly what the version field in this tool does — when you enter a version, all the URLs in the generated HTML snippet include ?v=yourversion. Update the version whenever you change your favicon and browsers will pick up the new one without waiting for the cache to expire.
For immediate manual cache clearing: hard refresh with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac), clear your browser cache entirely, or open your site in an incognito window. On Chrome, you can also force-refresh the favicon specifically by opening the favicon URL directly and hitting hard refresh on that tab.
What makes a good favicon at 16x16 pixels
Sixteen pixels is not much. That is a 4x4 grid of 4-pixel blocks. If your logo has fine lines, thin text, or complex detail, it will turn into a blurry indistinct blob at that size. This is not a rendering issue. It is a physics issue. There are not enough pixels.
The favicons that work best at 16x16 are: a single bold letter in a high-contrast color, a simple geometric shape, or a very simple icon with thick lines and no small details. Think of the big tech logos — the Apple logo works because it is a simple silhouette. The Twitter bird works because it is a simple rounded shape with no fine detail. Google uses a single G.
If you have a complex wordmark as your logo, the right move is to create a separate simplified icon version specifically for favicon use. Use your brand's primary color as the background (via the padding option in this tool), put just the icon mark or first letter in the center, and make sure the contrast is high. That is what a professional favicon looks like.