Favicon Package Generator

Turn one image into the complete favicon package - every browser, Apple, Android and Windows file plus the HTML to paste. Want text or emoji favicons? Try the Favicon Generator.

Related Tools
Favicon Generator Favicon Resizer Favicon Checker Apple Touch Icon Android Icon Generator

How to generate a favicon package

  1. Add your logo. Drop a square PNG, SVG, JPG, WebP or GIF of at least 512 px. It stays on your device.
  2. Name your site. Under Extra files, type your site name and pick a theme colour - they go into the manifest and the Windows tiles.
  3. Check how it looks small. The preview shows the real 16 and 32 px favicons on light and dark tabs. Crop to square or add padding if needed.
  4. Download the package. Press Make my favicon package. Upload every file to your site root and paste favicon-html.txt into your <head>.

Already have a favicon.ico? Check what is inside with the Icons Analyzer.

What is in the favicon package

FileSizeUsed by
favicon.ico16, 32, 48 pxEvery browser, bookmarks, Windows shortcuts
favicon-16x16.png, favicon-32x32.png16 and 32 pxBrowser tabs
favicon-96x96.png96 pxGoogle search results, desktop shortcuts
apple-touch-icon.png180 pxiPhone and iPad home screen
android-chrome-192x192.png, -512x512.png192 and 512 pxAndroid home screen, PWA install
mstile-150x150.png, browserconfig.xml150 pxPinned sites in the Windows Start menu
site.webmanifest, favicon-html.txt-Name, icons and theme colour; the code for your <head>

SVG logos also get favicon.svg, and animated GIF or WebP files can add an animated favicon. Turn Windows tiles off under Extra files if you do not need them.

How to add the package to your website

  1. Unzip and upload every file to the root folder of your site, next to your home page.
  2. Paste the lines from favicon-html.txt into the <head> of every page (or your theme header).
  3. Hard-refresh with Ctrl+F5 - browsers keep old favicons for a long time.

WordPress? Upload the 512 px PNG under Appearance, Customize, Site Identity. Then test with the Favicon Checker.

Tips for a favicon people recognise

  • Use the symbol, not the name. Text turns into a smudge at 16 px.
  • Check dark tabs. A black logo vanishes on a dark tab - add a background colour or a rounded shape.
  • Need only some files? The Favicon Resizer makes just the sizes you pick.

Frequently Asked Questions

All the icon files a modern website needs in one ZIP: favicon.ico, PNG sizes, the Apple touch icon, Android icons, the web manifest, Windows tiles and the HTML that links them.

Only for pinned sites in the Windows Start menu, which few visitors use. It is harmless to include, and you can turn Windows tiles off under Extra files.

Square and at least 512 x 512 px - the largest Android icon. Every smaller file is made from it, step by step, so they stay sharp.

Yes, in favicon.ico and the PNGs. Only apple-touch-icon.png gets a solid background, because iPhones show transparency as black.

Upload every file to the root of your site, then paste the lines from favicon-html.txt into the <head> of your pages.

Yes - drop an animated GIF or WebP and keep Animated favicon on under Extra files. A tiny script plays it in every browser tab.

No. Every icon is made in your browser, on your device. Nothing is uploaded.

Upload the files, then run your site through the Favicon Checker. It lists every icon your pages point to and shows what is missing.

Guides & Tutorials

All 40 guides
Comparison ICO vs SVG: Which Icon Format Should You Use? Jun 2, 2025 · 4 min read Read Guide Old vs New ICO Files: Bitmap Icons, PNG Icons and Every Icon Type Explained Sep 28, 2026 · 7 min read Read Guide What Is an ICO File? How to Open, Create and Convert Icon Files Jun 2, 2025 · 4 min read Read