A favicon (short for "favorite icon") is the small image that appears in the browser tab next to your page title, in bookmarks, and on mobile home screens. Modern browsers support multiple favicon sizes for different contexts.

Why do I need so many favicon sizes?

Different devices and contexts need different sizes. Browsers use 16×16 and 32×32 for tabs. iOS uses 180×180 for the home screen icon. Android uses 192×192 and 512×512 for home screen and splash screens. The .ico file provides a single container format that older browsers and Windows taskbars still prefer.

What image should I use as input?

A square image gives best results — a logo or icon on a transparent background (PNG) is ideal. The tool will fill any transparent areas with the background color you choose. Avoid using a rectangular photo as your favicon; it will be center-cropped to a square at small sizes.

What is site.webmanifest?

The Web App Manifest is a JSON file that tells browsers about your web app — its name, icons, and display mode. It is required for the Android icons to work correctly and enables "Add to Home Screen" prompts on Android Chrome.

How do I install the favicon on my website?

Download the ZIP, copy all files to your website root (the same folder as index.html), then paste the HTML snippet into the of every page.

Favicon Generator — Complete Package

Upload any image and get every favicon file a modern website needs — browser tabs, iOS home screen, Android icons, and a web manifest — all in one ZIP, ready to drop into your project root.

For best results, use a square logo or icon with a transparent background (PNG or SVG). The tool fills transparency with your chosen background color.

Drop your image here

or click to browse

JPGPNGWebPAVIFGIFHEICSVGTIFFTGAHDRPDF

⌘Vpaste·Enterbrowse

What every favicon file is for

File	Size	Used by
favicon.ico	32×32	Legacy browsers, Windows taskbar
favicon-16x16.png	16×16	Browser tab (small)
favicon-32x32.png	32×32	Browser tab, retina displays
apple-touch-icon.png	180×180	iOS / iPadOS home screen
android-chrome-192x192.png	192×192	Android home screen
android-chrome-512x512.png	512×512	Android splash screen / PWA
site.webmanifest	JSON	Android Chrome, PWA install

Also try

Image to Base64 — embed images inline in HTML, CSS, or JSON →

Frequently Asked Questions

What is a favicon?: A favicon (short for "favorite icon") is the small image that appears in the browser tab next to your page title, in bookmarks, and on mobile home screens. Modern browsers support multiple favicon sizes for different contexts.
Why do I need so many favicon sizes?: Different devices and contexts need different sizes. Browsers use 16×16 and 32×32 for tabs. iOS uses 180×180 for the home screen icon. Android uses 192×192 and 512×512 for home screen and splash screens. The .ico file provides a single container format that older browsers and Windows taskbars still prefer.
What image should I use as input?: A square image gives best results — a logo or icon on a transparent background (PNG) is ideal. The tool will fill any transparent areas with the background color you choose. Avoid using a rectangular photo as your favicon; it will be center-cropped to a square at small sizes.
What is site.webmanifest?: The Web App Manifest is a JSON file that tells browsers about your web app — its name, icons, and display mode. It is required for the Android icons to work correctly and enables "Add to Home Screen" prompts on Android Chrome.
How do I install the favicon on my website?: Download the ZIP, copy all files to your website root (the same folder as index.html), then paste the HTML snippet into the <head> of every page.