Live browser tab preview
The real favicon problem usually appears at 16x16 and 32x32. This page updates the current tab favicon and shows light and dark tab previews so you can check clarity before downloading.
Favicon Generator
Favicon Generator with Live Preview — Create ICO, PNG & Apple Touch Icons
Upload a logo or image, preview it in the browser tab and small icon sizes, then adjust zoom, position, background color, and spacing before downloading a complete favicon package.
Live editor
Drag the image to reposition it and use zoom to control the icon size.
Upload an image to preview the favicon canvas.
Online Favicon Generator: Preview First, Download When It Looks Right
This favicon generator turns a logo, brand mark, or product image into website icons. Upload an image to create a quick default result, or adjust the icon size, position, background, and spacing before downloading so the browser tab icon does not look too small, blurry, or hard to see.
Fine-tune after upload
If the logo has too much whitespace, the subject is too small, or the transparent background is hard to read, adjust zoom, position, and background color without going back to design software.
Complete favicon package
The download includes favicon.ico, common PNG sizes, Apple Touch Icon, Android Chrome icons, site.webmanifest, and HTML tags for your website head.
Use cases
Use this tool when adding a website icon to a personal site, SaaS product, blog, landing page, or browser extension page.
White logo visibility
White logos and white-background icons can look gray or weak inside a browser tab. Preview on light and dark tabs before choosing a background or enlarging the subject.
Small-size clarity check
Favicons are usually displayed at very small sizes. Check 16x16, 32x32, and 48x48 previews before downloading to reduce blur, tiny subjects, and lost details.
Confirm before development setup
You do not need to copy files into a project and restart a local app just to inspect the favicon. Upload, adjust, preview, then download the package when it looks right.
What Is a Favicon?
A favicon (short for "favorite icon") is the small icon displayed in a browser tab, bookmark bar, and history list. It helps users identify your website at a glance among multiple open tabs. Most websites use a 16x16 or 32x32 icon, but modern platforms also need larger sizes for mobile home screens, taskbars, and browser start pages.
Favicon Sizes You Need for Every Platform
Different platforms and devices require different favicon sizes. The table below shows the most common sizes this tool generates.
favicon.ico
favicon.ico — 16x16 and 32x32 combined. Used by legacy browsers, IE, and some search engines.
favicon-16x16.png
favicon-16x16.png — The smallest PNG size. Used by modern browsers when ICO is not available.
favicon-32x32.png
favicon-32x32.png — The default PNG favicon. Most desktop browsers use this size.
favicon-48x48.png
favicon-48x48.png — Extra clarity for high-density displays.
apple-touch-icon.png
apple-touch-icon.png (180x180) — Used by iOS Safari when users add your site to the home screen.
android-chrome-192x192.png
android-chrome-192x192.png — Used by Android Chrome for the home screen icon.
android-chrome-512x512.png
android-chrome-512x512.png — Used by Android Chrome for the splash screen on Progressive Web Apps.
How to Install Your Favicon
After downloading your favicon package, place the files in your website root or public folder and add the HTML tags to your page head. The package includes ready-to-use HTML link tags.
Next.js
Next.js: Place the favicon.ico, PNG files, and site.webmanifest in the /public folder. Next.js automatically serves favicon.ico from the root.
WordPress
WordPress: Go to Appearance → Customize → Site Identity and upload your favicon. Or install a favicon plugin and upload the package files.
Static HTML
Static HTML: Copy the generated HTML link tags into the <head> section of your HTML file and place the icon files at your site root.
Frequently Asked Questions
Common questions about favicon generation, PNG to ICO conversion, browser tab previews, and website setup.
What files does this favicon generator create?
The download includes favicon.ico, favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, HTML tags, and a README file.
Can I convert PNG to favicon.ico?
Yes. Upload a PNG, JPG, WebP, or AVIF image and the tool generates favicon.ico in your browser, along with common PNG icon sizes.
Why does favicon live preview matter?
A favicon is often shown at 16x16 or 32x32, where a logo can become too small, blurry, or hard to read. Live preview helps you check the result before downloading.
Does the current browser tab favicon really change?
Yes. After upload, the page temporarily replaces the current tab favicon so you can inspect the real browser result. It does not modify your website files.
Where should I place the generated favicon files?
Usually, place favicon.ico, PNG icons, and site.webmanifest in your website public or root folder, then add the HTML tags from the package to your page head. The exact folder name depends on your framework.
Are my images uploaded to a server?
No. Image reading, preview, resizing, ICO generation, and ZIP packaging happen locally in your browser.
Should I use a transparent or solid background?
Use transparency if the logo is readable on both light and dark tabs. If the icon is too faint or the edge is unclear, choose white, black, or a custom background.
Can I upload a non-square image?
Yes. Non-square images can use Show full or Fill canvas mode, then you can adjust zoom and position. For the cleanest result, use a clear image with a centered subject.
Related Tools
After generating a favicon, you may also want to prepare website images, social previews, or image formats.