Favicon Generator
Generate a complete favicon pack from any image — ICO, Apple Touch, Android Chrome, and PWA manifest icons. 100% client-side, no upload.
About this tool
Generate a complete favicon pack — favicon.ico, 16×16 and 32×32 PNGs, Apple Touch Icon (180×180), Android Chrome icons (192×192 and 512×512), and a PWA site.webmanifest — all from a single image. Runs entirely in your browser: no upload, no sign-up, no watermark.
How to use it
Quick steps to get the most out of this utility.
- 1
Upload your image
Drop a square or high-resolution image — ideally a logo or icon with transparent background. Your image stays local.
- 2
Review the output set
See all seven files that will be generated: five PNGs at different sizes, a favicon.ico, and a site.webmanifest.
- 3
Generate the favicon pack
Click "Generate Favicon Pack" and each size is rendered client-side using the Canvas API — no upload, no server.
- 4
Download and deploy
Download individual files or grab everything as a .zip. Place the files in your website root and add the link tags to your HTML.
What is a favicon and why does every website need one?
A favicon (short for "favorite icon") is the small icon that appears in browser tabs, bookmarks, search results, and mobile home screens. It is one of the most visible branding elements of any website — a 16×16 or 32×32 pixel square that users see dozens of times a day as they navigate between tabs. Without a favicon, your site shows a generic globe or blank document icon, which looks unprofessional and makes your tab harder to find. With a properly generated favicon pack, your brand appears consistently across every platform: desktop browsers (Chrome, Firefox, Safari, Edge), iOS home screens, Android Chrome, and even desktop shortcuts.
Modern browsers also expect a set of specific sizes beyond the traditional 16×16 favicon. Apple requires a 180×180 Apple Touch Icon for iOS home screen bookmarks. Android Chrome uses 192×192 and 512×512 icons for the PWA install banner. A proper site.webmanifest file ties these icons together and tells the browser that your site can be installed as a Progressive Web App. This tool generates the entire set — seven files total — from a single source image, using only your browser's Canvas API. No upload to a remote server, no watermark, and no sign-up: the entire pipeline runs on your device.
The seven files in a complete favicon pack
A production-ready favicon deployment needs more than a single favicon.ico. Here is every file this tool generates and its specific purpose:
| File | Size | Purpose |
|---|---|---|
| favicon-16x16.png | 16×16 | Standard browser tab favicon |
| favicon-32x32.png | 32×32 | HiDPI browser tab favicon |
| apple-touch-icon.png | 180×180 | iOS home screen icon (Add to Home Screen) |
| android-chrome-192x192.png | 192×192 | Android Chrome PWA icon (small) |
| android-chrome-512x512.png | 512×512 | Android PWA install banner & splash screen |
| favicon.ico | 16+32 | Legacy ICO container for bookmark icons and older browsers |
| site.webmanifest | — | PWA manifest defining app name, icons, and display mode |
How to deploy your favicon pack
Place all the generated PNG and ICO files in the root of your website (typically the public/ folder for Next.js or the root of your static/ directory). Then add the following link tags inside your <head>:
The favicon.ico should also be in the root directory as a fallback. Edit the site.webmanifest to replace the empty "name" field with your actual site name. Once deployed, run a hard refresh and check all your browsers, mobile devices, and PWA install prompts — your brand should now appear consistently everywhere.
Why no-upload matters for favicon generation
Most online favicon generators work by having you upload your logo or image to their server, where it is resized, converted, and packaged into the various icon formats. That may seem harmless, but you are handing over the highest-resolution version of your brand assets — often including the vector source — to a third party. They may cache it, watermark it, include it in their gallery, or use it without your consent. For businesses, this is an intellectual property risk. For personal projects, it is simply unnecessary.
This tool processes everything inside your browser's JavaScript runtime. The Canvas API renders each size, the PNG blobs are assembled directly in memory, and the ICO binary is constructed byte-by-byte using a DataView — no network call is ever made with your image data. The only bytes that leave your machine are the finished icon files streaming to your downloads folder. You get a complete, production-grade favicon pack without exposing your source art to anyone.
Common mistakes when setting up favicons
- Using a single favicon.ico: Modern browsers look for specific PNG sizes. Serving only an ICO file means missed HiDPI rendering and broken home screen icons.
- Missing the Apple Touch Icon: Without a 180×180 apple-touch-icon.png, iOS devices show a low-quality thumbnail when users add your site to their home screen.
- Wrong canvas ratio: Favicon and app icons must be square. If you drop a rectangular source image, the tool will stretch it — use a square logo or crop to a square first.
- Using a complex photograph: Favicons are tiny — 16×16 pixels is barely two characters wide. Simple, bold shapes and letters work best; detailed photos become illegible at small sizes.
- Forgetting the webmanifest: Without site.webmanifest, Android Chrome cannot present your site as an installable PWA, and you lose the install banner and splash screen features.
Frequently asked questions
Is my image uploaded to a server?+
No. The entire favicon generation runs in your browser using JavaScript Canvas APIs. Your image never leaves your device, never touches our servers, and is never logged or stored anywhere.
What image formats are supported?+
JPG, PNG, WebP, AVIF, GIF, BMP, and HEIC (iPhone photos). The tool auto-detects the format — just drop any image file.
What is the maximum file size?+
You can process images up to ~50 MB. Files over 25 MB will be slower, especially on mobile. For very large images, try resizing first with our Image Resizer.
Will this work on mobile?+
Yes, on modern iOS Safari and Chrome for Android. Very large images (>25 MB) may be slow on older devices due to memory constraints.
What sizes does the favicon pack include?+
The pack generates six files: favicon-16x16.png (16×16), favicon-32x32.png (32×32), apple-touch-icon.png (180×180), android-chrome-192x192.png (192×192), android-chrome-512x512.png (512×512), and favicon.ico (embedding both 16×16 and 32×32 PNGs in a single ICO container). Plus a site.webmanifest for PWA support.
What is favicon.ico and do I still need it?+
favicon.ico is the legacy format that browsers look for at the root of your domain (/favicon.ico). While modern HTML can load PNG favicons via a <link> tag, the .ico file provides a fallback for older browsers and is also used by some desktop shortcuts and bookmark icons. This tool builds a proper ICO binary containing both 16×16 and 32×32 PNG versions.
What is an Apple Touch Icon?+
Apple devices use a specific icon when a user adds your site to their home screen (Add to Home Screen). The required size is 180×180 pixels for iOS. The apple-touch-icon.png generated by this tool is the correct size and format — just place it in your site root and link it in your HTML head.
What is site.webmanifest and do I need it?+
A web manifest is a JSON file that tells browsers how to display your site when installed as a Progressive Web App (PWA). It defines the name, icons, theme color, and display mode. This tool generates a manifest with the Android Chrome icon references — you just need to fill in the "name" field with your site name.
Keep exploring
More utilities and reading from Toolisk.