Utilia
Categories ▾
Language: en ▾

Favicon Generator

Create favicon.ico, PNG icons, the apple-touch-icon and site.webmanifest from one image or an emoji, with ready-to-paste HTML tags. ZIP download, no upload.

Source

Fit
site.webmanifest

How to create a favicon

  1. Under Source, choose Image or Text or emoji. - Image: drop a PNG, JPG, WebP or SVG. A square logo of at least 512 × 512 px works best. Choose Whole image to fit it inside the icon, or Fill and crop to cover the square. - Text or emoji: type a letter, initials or an emoji, then pick the Font, Bold and Text color.
  2. Set the Background color, or tick Transparent background. Choose a Shape (Square, Rounded or Circle) and a Padding (%) to leave space around the content.
  3. Optionally open site.webmanifest to enter the App name (web manifest), Short name, Theme color and the Folder URL of the icons (keep / if the files go at the root of your site).
  4. Click Generate favicons. The icons appear at their real size, next to a mock browser tab. After that, every change updates them instantly.
  5. Click Download ZIP, upload the files to your site, then Copy tags and paste them inside the <head> of your pages.

What’s in the ZIP

File Size Used by
favicon.ico 16, 32 and 48 px Browser tabs, bookmarks, old browsers, Windows
favicon-16x16.png 16 × 16 Browser tabs
favicon-32x32.png 32 × 32 Tabs on high-density screens, taskbar shortcuts
apple-touch-icon.png 180 × 180 iPhone and iPad home screen
android-chrome-192x192.png 192 × 192 Android home screen (web manifest)
android-chrome-512x512.png 512 × 512 Install splash screens (web manifest)
site.webmanifest — Name, colors and icons of an installable site
favicon-tags.html — The HTML tags, for reference

The ICO file holds three PNG images, a format that Windows (since Vista) and every current browser read. The apple-touch-icon is always saved on a solid background, because iOS shows transparent pixels as black; with a transparent background, white is used.

The HTML tags

The generated tags look like this (with your folder URL):

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Browsers also request /favicon.ico automatically at the root of your domain, so keeping it there helps even on pages without the tags.

Design tips

  • Keep it simple. At 16 × 16 px, detail disappears. A single letter, a bold symbol or the simplest version of your logo reads best.
  • Check the preview at real size. The 16 px icon in the mock tab is what visitors actually see.
  • Mind dark mode. A dark logo on a transparent background can vanish in dark browser themes; a colored background or a small padding helps.
  • Emoji look different on each system, because each platform draws emoji in its own style. The PNG files keep the look of your device.

Frequently asked questions

Which sizes does a favicon need?

In practice: a favicon.ico with 16, 32 and 48 px, a 180 px apple-touch-icon and 192 and 512 px PNGs for the web manifest. This tool creates all of them from one source.

Can I use an SVG logo?

Yes. SVG files are drawn at high resolution before the icons are made. The SVG is displayed as a plain image, so its scripts never run.

How do I make an emoji favicon?

Choose Text or emoji, type or paste the emoji, choose a background or keep it transparent, and generate. The result is a real PNG and ICO, so it works in every browser.

Why doesn't my new favicon show up?

Browsers cache favicons aggressively. Reload with the cache cleared, open the site in a private window, or add a version to the URL, such as /favicon.ico?v=2.

Is my image uploaded?

No. The icons, the ZIP and the manifest are created in your browser; nothing leaves your device.

Related tools