Favicon Generator
Upload any image and generate PNG favicons at 16×16, 32×32, 48×48, and 180×180 pixels.
Favicon generator takes any uploaded image and produces PNG files at 16×16, 32×32, 48×48, and 180×180 pixels in one click. The 180×180 output also serves as the Apple Touch Icon for iOS home screen bookmarks. All resizing uses the browser Canvas API. No file is uploaded to any server. Download each size individually.
Drop an image here or click to upload
JPG, PNG, WebP, SVG — up to 5 MB
Square images work best for favicons
Your image stays in your browser and is never uploaded to any server.
Frequently Asked Questions
- What size should a favicon be?
- Browsers display favicons at 16×16 pixels in tabs and 32×32 in bookmarks. A 48×48 size suits higher-DPI displays on Windows. Apple devices use 180×180 (apple-touch-icon) for home screen bookmarks on iPhones and iPads. Generate all four sizes from one source image using this tool.
- How do I add a favicon to my website?
- Place the PNG files in your site root. Add these tags in the HTML head: <link rel="icon" href="/favicon-32x32.png" sizes="32x32">, <link rel="icon" href="/favicon-16x16.png" sizes="16x16">, and <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Next.js, Astro, and most frameworks handle this automatically via a favicons config.
- What image format is best for a favicon source?
- Use a PNG or SVG with a transparent background and a simple, recognisable design. Favicons are tiny, so complex artwork loses all detail at 16×16. A single letter, simple icon, or geometric shape works best. Avoid text with more than 2 characters at small sizes.
- Does favicon.ico still work in modern browsers?
- Yes. All browsers support favicon.ico, but PNG favicons are now preferred because they support transparency and the sizes attribute. For maximum compatibility, provide both formats: ICO for legacy browsers and PNG for modern ones.
- What is the Apple Touch Icon?
- Saving your site as an iPhone or iPad home screen shortcut causes iOS to use the apple-touch-icon as the thumbnail. The recommended size is 180×180 pixels. Without an apple-touch-icon, iOS captures a screenshot of your page, which looks poor.
What is a favicon?
A favicon is a small image identifying a website in browser tabs, bookmark lists, and history entries. Every major browser shows it in the tab bar next to the page title. Without a favicon, browsers show a generic globe or blank square.
Modern web apps also need larger favicon variants for browser bookmarks, desktop shortcuts, and mobile home screen icons. A full favicon set covers 16×16, 32×32, 48×48, and 180×180 pixels.
How the favicon generator works
Upload any image using the file picker. The tool loads it into an HTML Image element and draws scaled copies onto Canvas elements at each target size. Each Canvas is exported as a PNG using toDataURL. Download links appear for all four sizes immediately.
All resizing happens in the browser. No image is uploaded to any server. The tool works offline after the page loads.
Designing a good favicon
At 16×16 pixels, a favicon has only 256 pixels total. Complex logos, multi-word text, and detailed illustrations become unreadable at that size. Effective favicons use a single letter, a simple monogram, a bold geometric shape, or a recognisable icon.
High contrast is critical. A dark icon on a light background remains visible in both light and dark browser themes. Avoid mid-tones that wash out on grey tabs.
When a brand logo has a complex wordmark, use just the first letter or the logomark for the favicon. Most major brands follow this approach. Amazon uses the "a" letter mark. Facebook uses "f". Google uses a coloured "G".
Adding favicons to your website
- Place PNG files in your public root directory. Name them favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, and apple-touch-icon.png for easy identification.
- Add link tags in the HTML head element: <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">.
- For Next.js 13 and above, place a file named icon.png in the app directory. Next.js auto-generates the favicon metadata.
- For legacy browser support, convert the 32×32 PNG to an ICO file and place it at /favicon.ico. Browsers without PNG favicon support will fall back to ICO automatically.