Upload one image and generate a complete favicon package — ICO, PNG, Apple Touch Icon, Android Chrome icons, site.webmanifest, and ready-to-copy HTML code. All in your browser.
🎨
Drop your logo or icon here
or click to browse · JPG, PNG, WebP, SVG · Square image recommended
What Is a Favicon?
A favicon is the small icon displayed in browser tabs, bookmarks, history, and mobile home screens. It helps users identify your website at a glance. Modern websites need multiple favicon sizes and formats to look great across all browsers, operating systems, and devices.
Complete Favicon Files Explained
favicon.ico — A multi-size ICO file containing 16×16, 32×32, and 48×48 pixel icons. Required for legacy browser support and Windows taskbar icons.
favicon-16x16.png & favicon-32x32.png — Standard PNG favicons used by modern browsers for bookmark bars and browser tabs.
apple-touch-icon.png — A 180×180 pixel PNG used by iOS Safari when users add your site to their home screen.
android-chrome-192x192.png & android-chrome-512x512.png — PNG icons used by Android Chrome for home screen shortcuts and PWA splash screens.
site.webmanifest — A JSON file that tells browsers about your web app, including icon paths, theme color, and display mode.
How to Add Favicons to Your Website
1. Download the ZIP and extract all files to your website's root directory. 2. Copy the HTML code snippet and paste it into the <head> section of every page. 3. Deploy your site and test by checking the browser tab icon. Most browsers also auto-detect favicon.ico in the root directory.
Recommended Source Image
For best results, use a square image of at least 512×512 pixels. PNG format with a transparent background is ideal. Simple designs with bold shapes and high contrast look best — complex photos become unrecognizable at small sizes like 16×16.
Frequently Asked Questions
What files does a complete favicon package include?▸
A complete package includes favicon.ico (multi-size for legacy browsers), favicon-16x16.png and favicon-32x32.png for modern browsers, apple-touch-icon.png (180×180) for iOS, android-chrome-192x192.png and android-chrome-512x512.png for Android, and site.webmanifest for PWA support — 7 files total.
What is apple-touch-icon.png?▸
It is a 180×180 pixel PNG image used by iOS Safari when a user adds your website to their home screen. Without it, iOS takes a screenshot of your page instead. Place it in your site root directory and reference it with a link tag in your HTML head.
What is site.webmanifest?▸
site.webmanifest is a JSON file that provides metadata about your web application to the browser. It defines icon paths, theme colors, and display mode for Progressive Web Apps (PWAs). Browsers use it to configure the home screen icon and splash screen on Android devices.
What HTML code do I need for favicons?▸
You need four link tags in your HTML head: one for apple-touch-icon (180×180), one for favicon-32x32.png, one for favicon-16x16.png, and one for the web manifest. Our tool generates the exact HTML snippet you can copy and paste directly.
What is the best source image size for a favicon?▸
Use a square image of at least 512×512 pixels. PNG with a transparent background works best. Simple designs with bold shapes and high contrast render well at small sizes. Avoid photos or complex illustrations as they become unrecognizable at 16×16 pixels.
Do I need both ICO and PNG favicons?▸
Yes, for maximum compatibility. The ICO format is needed for older browsers, Internet Explorer, and the Windows taskbar. PNG favicons are used by modern browsers like Chrome, Firefox, and Safari. Including both ensures your favicon displays correctly everywhere.
Is this favicon generator free to use?▸
Yes, completely free with no limits, no watermarks, and no sign-up required. All processing happens entirely in your browser. Your images are never uploaded to any server, ensuring complete privacy and instant results.
Can I use a photograph as my favicon?▸
Technically yes, but simple icons and logos work much better. Photographs lose detail when scaled to 16×16 or 32×32 pixels and become hard to recognize. For best results, use a simple graphic with bold shapes, minimal detail, and high contrast colors.