What Is a Favicon?
A favicon is the small website icon shown in browser tabs, bookmarks, history lists, search surfaces and device shortcuts. A good favicon helps visitors recognize your site quickly, especially when many tabs are open. The ToolMint Favicon Generator turns one PNG, JPG, WebP or SVG source image into a practical favicon package with PNG icons, favicon.ico, Apple touch icon files, a web app manifest and copyable HTML.
Favicons are small, but they are not one single file anymore. Modern websites often need several icon sizes so browsers, phones and app-like experiences can pick the best file for each context.
How to Create a Favicon with ToolMint
- Upload a PNG, JPG, WebP or SVG image.
- Choose Contain if the full logo must remain visible, or Cover if the icon canvas should be filled.
- Adjust zoom, horizontal position, vertical position and padding.
- Pick transparent background or a solid background color.
- Choose square, rounded or circular corners.
- Edit the app name, short name, theme color and manifest background color.
- Click Generate favicons.
- Download individual files or the complete ZIP package.
- Add the generated HTML snippet to your page head.
Only one source image is needed at a time, and you can replace it without clearing the whole setup.
What Files the Generator Creates
| File | Size | Purpose |
|---|---|---|
| favicon-16x16.png | 16x16 | Small browser tab icon |
| favicon-32x32.png | 32x32 | Standard browser favicon |
| favicon-48x48.png | 48x48 | Desktop shortcut and fallback use |
| apple-touch-icon.png | 180x180 | iOS and iPadOS home-screen icon |
| android-chrome-192x192.png | 192x192 | Android and PWA icon |
| android-chrome-512x512.png | 512x512 | High-resolution PWA icon |
| favicon-192x192.png | 192x192 | General large PNG favicon |
| favicon-512x512.png | 512x512 | General large PNG favicon |
| favicon.ico | 16, 32 and 48 | Legacy and broad browser favicon support |
| site.webmanifest | JSON | Web app metadata and icon references |
The package also includes a text file with the HTML snippet and a short README with installation notes.
Favicon ICO vs PNG
ICO is an older icon container format. It can hold multiple icon sizes in one file, which is why many browsers still request /favicon.ico by default. PNG files are simpler, modern and easy to inspect, but they are separate files for each size.
| Format | Strength | Limitation |
|---|---|---|
| ICO | One file can contain several icon sizes | Less familiar to edit manually |
| PNG | Clear, modern, transparent and easy to preview | Requires separate files for separate sizes |
| SVG | Scalable source format | Not accepted everywhere as a favicon package replacement |
ToolMint creates a real ICO container with PNG-compressed icon data, not a PNG renamed to .ico.
Recommended Favicon Sizes
| Size | Common use | Notes |
|---|---|---|
| 16x16 | Browser tabs | Needs a very simple silhouette |
| 32x32 | Browser tabs and bookmarks | Most common visible favicon size |
| 48x48 | Desktop and fallback contexts | Useful in ICO files |
| 180x180 | Apple touch icon | iOS may apply its own rounding |
| 192x192 | Android home screen and PWA | Referenced by web manifests |
| 512x512 | PWA install prompts and stores | Keep detail clean at large sizes |
Start with a source image at least 512x512 when possible. SVG logos are especially useful because they can rasterize cleanly to every output size.
How to Prepare Your Logo or Image
Use a simple mark, not a full lockup with tiny text. A favicon is often displayed at 16 or 32 pixels, so fine details disappear quickly. If your logo includes both an icon and a wordmark, use the icon alone.
If your source image needs cleanup first, use Image Cropper to trim whitespace, Image Resizer to prepare a clean square source, or Image Format Converter to change a source file into a browser-friendly format.
Transparent vs Solid Backgrounds
Transparent favicons look clean when the icon shape is strong. Solid backgrounds are safer when the source is a thin mark, a photo, or a logo that needs contrast against browser UI.
| Background | Best for | Watch out for |
|---|---|---|
| Transparent | Simple logos and icons | Low contrast on some themes |
| White | Dark marks, documents and broad compatibility | Can look like a square tile |
| Brand color | Monograms and app-style icons | Needs enough contrast |
| Custom dark color | Light marks | May blend into dark browser UI |
JPG sources do not contain transparency, but you can still place them on a transparent or solid icon canvas depending on the treatment you choose.
Square, Rounded and Circular Favicons
ToolMint can apply square, rounded or circular masks to generated icon pixels. This is part of the exported images. It is not a browser-level CSS effect, and browsers may still apply their own rounding in some contexts.
Rounded corners can make a web app icon feel more polished. Circular output is useful for badges and profile-style marks. Square output is best when you want the browser or operating system to decide how the icon should be displayed.
Apple Touch Icons
Apple touch icons are used when someone saves a website to an iPhone or iPad home screen. The common size is 180x180. iOS may apply its own visual treatment, so keep important artwork away from the edges.
The generated apple-touch-icon.png is referenced by the HTML snippet. Upload it with the rest of your files and keep the filename unchanged unless you also edit the HTML.
Android and PWA Icons
Android and Progressive Web App surfaces use manifest icons such as 192x192 and 512x512. These files are referenced inside site.webmanifest, along with app name, short name, theme color, background color and display mode.
If you are building a PWA, keep your icon readable at both small and large sizes. A mark that works at 512 pixels can still fail at 32 pixels if it contains too much text or detail.
Understanding site.webmanifest
The web app manifest is a JSON file that tells browsers how a site should appear when installed or launched like an app. ToolMint generates a practical manifest with name, short_name, icons, theme_color, background_color and display: standalone.
The manifest does not replace normal favicon links. Use both the HTML snippet and the manifest file for broad coverage.
How to Add a Favicon to HTML
Add the generated tags inside the document <head>:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">
If you store assets in a subfolder, update the paths before publishing.
Favicon File Paths and Website Frameworks
For many static sites, upload the generated files to the website root. In frameworks such as Next.js, place them in the public directory so /favicon.ico, /favicon-32x32.png and /site.webmanifest resolve from the site root.
After installing the files, use the SEO Audit Hub to check whether important metadata and crawlable assets are in place. Favicons are only one part of a complete technical setup.
Why a New Favicon May Not Appear Immediately
Browsers aggressively cache favicons. Search engines and social platforms may cache them too. If your old favicon still appears, clear browser cache, test in a private window, confirm file paths, and wait for external systems to refresh.
| Problem | Likely cause | Fix |
|---|---|---|
| Old icon still shows | Browser cache | Clear cache or hard refresh |
| Icon missing on mobile | Apple touch icon not uploaded | Upload apple-touch-icon.png |
| PWA icon missing | Manifest path is wrong | Check /site.webmanifest and icon paths |
| Icon looks blurry | Source was too detailed or small | Use a simpler, larger source |
| Transparent icon disappears | Low contrast | Use a solid background or stronger mark |
Common Favicon Mistakes
The most common mistake is using a full logo with small text. At 16x16, text usually becomes unreadable. Another mistake is shipping only favicon.ico and skipping Apple or manifest icons. Modern devices use different files for different contexts.
Also avoid changing filenames without updating the HTML and manifest. If your icon files live in /assets/icons/, every generated path needs to match that folder.
Privacy and Browser-Based Processing
Your image is processed locally in your browser. ToolMint does not store your uploaded file.
The tool uses browser image decoding, canvas rendering, Blob downloads and local ZIP creation. It does not send filenames, image contents, SVG markup, embedded text or private metadata to analytics. Events only measure privacy-safe settings such as input format, fit mode, corner style and whether a package download happened.
Frequently Asked Questions
Is the ToolMint Favicon Generator free?
Yes. The Favicon Generator is free to use with no account, signup or watermark.
Are my images uploaded to a server?
No. Your image is processed locally in your browser. ToolMint does not store your uploaded file.
What image formats can I use?
You can upload PNG, JPG, JPEG, WebP or SVG files up to 10 MB.
Does the tool generate favicon.ico?
Yes. ToolMint generates a valid favicon.ico file with embedded 16x16, 32x32 and 48x48 PNG-compressed icon data.
What favicon sizes are included?
The package includes 16x16, 32x32, 48x48, 150x150, 180x180, 192x192 and 512x512 outputs, plus favicon.ico.
Can I create a transparent favicon?
Yes. Transparent background is available and remains transparent in PNG outputs and the ICO where supported.
Does the package include an Apple touch icon?
Yes. The package includes apple-touch-icon.png at 180x180 and the matching HTML tag.
Does the package include a web app manifest?
Yes. ToolMint generates site.webmanifest with app name, short name, icon references, theme color and background color.
How do I add the favicon files to my website?
Upload the generated files to your site root or public directory, then paste the generated HTML tags inside the page <head>.
Why does my old favicon still appear?
Favicons are heavily cached by browsers and search surfaces. Clear cache, verify paths and allow time for cached icons to refresh.
Related ToolMint Tools
Use SVG to PNG Converter when you need a transparent PNG from vector artwork before building favicons. Use Image Resizer, Image Cropper, Image Compressor and Image Format Converter to prepare source images. Use Open Graph Generator for social preview metadata after your brand icons are ready. Browse all utilities in the tools directory or the Image category, and request missing workflows through the request page.