Favicon Generator

Create a complete favicon package from an image, letter or emoji: favicon.ico, PNG sizes, Apple touch icon, web manifest and HTML code – as a ZIP, right in your browser.

Runs locally in your browser
Shape

Preview

My website

App details for the manifest

Contents: favicon.ico, favicon.svg, favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, head.html

Upload the files to the root of your website and paste this code into the head section of your pages.

Everything is generated in your browser. Your image is not uploaded.

About this tool

A favicon is the small icon browsers show next to the page title in tabs, bookmarks and history. Smartphones use larger versions when a website is added to the home screen. To look sharp everywhere, a website needs several sizes and formats today.

This generator creates the complete package from an image or from a letter or emoji with your own colors and shape: a favicon.ico with 16, 32 and 48 pixels, PNG files up to 512 pixels, the Apple touch icon (180 px), a site.webmanifest for Android and installable web apps, and the matching HTML code. Text icons also get a favicon.svg that stays crisp at any size.

Everything is generated in your browser; your image is not uploaded. To convert or resize other images, use the Image Converter & Compressor.

How it works

  1. Choose “Letter / emoji” as the source or upload an image – ideally square with clear shapes.
  2. Adjust colors, shape and padding and check the preview at actual size.
  3. Optionally enter a name and theme color for the web manifest.
  4. Download the ZIP, put the files in the root of your website and paste the HTML code into the head section.

Frequently asked questions

Which favicon sizes do I really need?

For current browsers, a favicon.ico (or 32 px PNG), an SVG favicon, the 180 px Apple touch icon and 192 and 512 px icons in the web manifest for Android/PWA are enough. These are exactly the files in the package.

Why is my favicon hard to recognize at 16 pixels?

At 16 × 16 pixels fine details and text get lost. Use a simple motif with strong contrast, such as a single letter or a simplified logo, and check the preview at actual size. You can check the contrast of your colors with the Color Converter & Contrast Checker.

Why does my new favicon not show up?

Browsers cache favicons stubbornly. Reload the page with an empty cache or open it in a private window. Also check that the files are really in the root folder and the HTML code is in the head section.

Do emojis look the same everywhere?

No, emojis are drawn with the system font. The PNG and ICO files store the emoji as it looks on your device, while the favicon.svg shows the emoji design installed on each device.