Upload a square image, click Generate Favicon Package, then download the ZIP. The generator creates favicon.ico, PNG favicon sizes, Apple touch icon, Android Chrome icons, manifest, and HTML code from one source image. For best results, start with a 512x512 px or larger logo.
Free Favicon Generator for ICO, PNG, and SVG Icons
Turn one image into a complete favicon package. Get favicon.ico, PNG icons, Apple touch icons, Android Chrome icons, a web manifest, and HTML code.
What This Favicon Generator Creates
A favicon is not just one tiny image anymore. Browsers, pinned tabs, bookmarks, mobile home screens, and Android launchers may all request different files. This favicon generator creates the common production set from one source image so you do not have to export each size manually.
| Output file | Size or content | Where it is used |
|---|---|---|
| favicon.ico | 16x16, 32x32, 48x48 | Classic browser fallback and root /favicon.ico detection |
| favicon-16x16.png | 16x16 | Browser tabs and compact UI |
| favicon-32x32.png | 32x32 | High-DPI tabs and bookmarks |
| apple-touch-icon.png | 180x180 | iPhone and iPad home screen shortcuts |
| android-chrome-192x192.png | 192x192 | Android Chrome and web app manifests |
| android-chrome-512x512.png | 512x512 | High-resolution Android and PWA icons |
| manifest.json | Web app metadata | Progressive web app icon references |
| HTML snippet | <link> tags | Copy into your page <head> |
The tool accepts PNG, JPG, SVG, WebP, and GIF uploads. For the cleanest result, start with a square image at 512x512 px or larger. A logo with a transparent background usually works better than a full photograph because favicons are often displayed at only 16x16 or 32x32 pixels.
Uploaded files are processed on the backend and deleted within 24 hours.
How to Make a Favicon Step by Step
1
Step 1: Prepare a simple source image
Use a square logo, mark, letter, or symbol. If your source is not square, crop it first so the important shape stays centered. A 512x512 px or 1024x1024 px source gives the generator enough detail to create smaller favicon sizes without upscaling.
2
Step 2: Upload your image
Drag your file into the upload area or click Choose Image. You can make favicon files from PNG, JPG, SVG, WebP, or GIF. PNG and SVG are usually the best choices for logos because they keep edges sharp and can preserve transparency.
3
Step 3: Generate the favicon package
Click Generate Favicon Package. The tool creates a ZIP with the favicon.ico file, PNG icon sizes, Apple touch icon, Android Chrome icons, manifest, and HTML snippet.
4
Step 4: Download and install
Download the ZIP, upload the generated files to your website, and copy the HTML snippet into the <head> of your page. If your site already has an old favicon, clear the browser cache or add a version query such as ?v=2 to force browsers to fetch the new file.
PNG to Favicon, SVG to Favicon, and ICO Output
Different source formats create slightly different results. The best choice depends on what kind of artwork you are starting from.
| Source format | Best for | Notes |
|---|---|---|
| PNG | Logos with transparency | Best all-around source for a favicon from PNG |
| SVG | Vector logos and simple marks | Good for crisp edges; the generator exports raster favicon sizes |
| JPG | Photos or non-transparent artwork | Works, but backgrounds become part of the icon |
| WebP | Optimized web images | Useful if your original asset is already in WebP |
| GIF | Simple animated or legacy assets | The generated favicon package is designed for practical static favicon files |
SVG to favicon
Many designers start with vector artwork. SVG is ideal when your logo uses clean paths, flat colors, and simple geometry. Once uploaded, this SVG to favicon generator exports the browser-ready raster files your site actually needs, including favicon.ico and PNG sizes.
PNG to favicon
PNG is the most common source format for site owners. Use a transparent PNG if you want the favicon shape to sit cleanly on light and dark browser UI. If you only need a single Windows-style ICO file rather than the full website package, you can also use /png-to-ico.
Favicon.ico generator
The generated favicon.ico contains 16x16, 32x32, and 48x48 images in one file. That matters because older browsers and many web servers still look for /favicon.ico automatically, even when you also provide modern PNG and manifest links.
How to Add Favicon in HTML
After generating your favicon package, upload the files to your site's public root or static assets folder. Then place the generated HTML snippet inside the <head> section of your document.
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">If your website uses a framework, put these files in the folder that serves static public assets:
| Platform | Common location |
|---|---|
| Plain HTML site | Website root, next to index.html |
| Next.js | public/ |
| Vite or React | public/ |
| WordPress | Theme assets folder or site root, depending on setup |
| Shopify | Theme assets, then reference the asset URL |
The exact paths can vary by project, so match the href values to where the files are actually hosted. A 404 on any favicon file usually means the path is wrong, not that the icon package is broken.
Tips for a Sharp Website Favicon
🔍
Keep the design readable at 16x16
At browser-tab size, fine text, gradients, thin strokes, and detailed photos usually disappear. A simple shape, one letter, or a high-contrast logo mark will be easier to recognize than a full brand lockup.
◐
Use transparency intentionally
A transparent background helps your favicon sit naturally in browser tabs, bookmarks, and mobile shortcut views. If your source image has a white square behind it, that square will usually remain visible in the generated files.
◑
Test light and dark browser themes
Favicons appear in many UI colors. A dark icon can vanish in a dark tab bar; a pale icon can look weak on light backgrounds. If your logo depends on one color, consider adding a subtle outline or using a bolder version for favicon use.
↙
Do not judge only at zoomed-in size
Always preview the icon at actual 16x16 and 32x32 sizes. A design that looks polished at 512x512 can become visual noise when reduced. If the small version is unclear, simplify the source image before generating the final package.
Common Use Cases
New website launch
Generate the full package and add the HTML snippet before publishing
Rebranding
Replace all old favicon files, then update cache-busting versions
Blog or portfolio
Use a simple monogram or logo mark rather than a full wordmark
PWA or installable site
Keep the manifest and Android Chrome icons from the ZIP
iPhone home screen icon
Use the 180x180 Apple touch icon
App icon project
Use /app-icon-generator if you need full iOS and Android app-store icon sets
This page is best when you need a website favicon package. For native app projects with Xcode or Android Studio folders, the app icon generator is a better fit.
Frequently Asked Questions
To create favicon files for a website, prepare a simple square image, generate the favicon package, upload the files to your site's public folder, and place the generated <link> tags in your page <head>. Test the site in a browser tab after clearing cache.
This is a free favicon generator for creating common website icon files from one image. It supports PNG, JPG, SVG, WebP, and GIF uploads and gives you a ZIP package rather than only one small icon.
PNG is one of the best source formats for favicon generation because it supports transparency and sharp edges. Upload a transparent PNG logo to generate favicon.ico, 16x16 PNG, 32x32 PNG, Apple touch icon, Android Chrome icons, and a manifest.
Yes. Upload an SVG logo and the tool exports practical favicon files for browsers and devices. The generated package includes raster PNG sizes plus favicon.ico, which is useful because not every favicon context should rely on SVG alone.
The tool generates a favicon.ico file with 16x16, 32x32, and 48x48 sizes. Including favicon.ico is still useful because browsers, crawlers, and legacy systems often request /favicon.ico automatically.
Upload the generated files to your public website folder, then copy the favicon HTML snippet into the <head> of your page. At minimum, include favicon.ico, 16x16 PNG, 32x32 PNG, Apple touch icon, and manifest.json links if those files are present.
Use <link rel="icon" href="/favicon.ico"> for the ICO fallback, then add PNG and Apple touch icon links for modern devices. Make sure every href path matches the actual file location on your server.
A complete favicon HTML setup usually includes links for favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, and manifest.json. The generator provides a ready-to-copy snippet so you do not have to write those tags manually.
Use multiple sizes. The package includes 16x16 and 32x32 PNG files for browser UI, a multi-size favicon.ico with 16x16, 32x32, and 48x48, a 180x180 Apple touch icon, plus 192x192 and 512x512 Android icons. Starting from a 512x512 px source image or larger gives the cleanest downscaled results.