Skip to content

← All tools

Free online tool

Favicon generator

Drop in a logo (PNG, JPEG, WebP or SVG) or type a letter or an emoji, and get the files a website needs: six PNG sizes, a favicon.ico, the lines for your page's head and a site.webmanifest. Your picture is read by your browser only and is never uploaded.

1. Start from a picture or from letters

Anything beyond the first two characters is ignored. How an emoji looks depends on the fonts on your device.

Drawing: Ob

Space is filled with the background colour. At 22% or more, with an opaque square background, a square picture stays inside the 80% centre circle that the maskable-icon rule keeps visible. That is the published rule; it was not tested on real phones.

2. Your icons

Making icons…

3. Paste into your page's <head>

<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#22d3ee">

4. Save as site.webmanifest

Needs an opaque background, square corners and at least 22% space.

{
  "name": "My site",
  "short_name": "My site",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ],
  "theme_color": "#22d3ee",
  "background_color": "#22d3ee",
  "display": "standalone"
}

Put all the files in the root folder of your site so that the paths above work, or change the paths to match where you put them.

What this does not do

  • •It makes the standard set of files. It does not check how your site links to them, and browsers cache favicons hard, so a changed icon can take a while to show up.
  • •Small icons are scaled down from your picture by the browser. A detailed logo can turn to mush at 16 px. Letters or a simple shape work better, and you can check the 16 px preview above.
  • •The maskable option only follows the published safe-zone rule. Android launchers differ, and the icons were not tried on real devices.
  • •Animated images, HEIC and multi-layer files are not supported. SVG files are drawn by your browser, and an SVG that loads other files may draw incompletely.

How it works

  • •A picture that is not square is cropped to its centre square. Letters or an emoji are drawn in the middle of a coloured square. You can add space around the artwork and choose square, rounded or circular corners.
  • •Each size is drawn separately from your picture: 16, 32 and 48 px for browser tabs, 180 px for the iPhone home screen (apple-touch-icon), and 192 and 512 px for web app manifests.
  • •favicon.ico is written by this page. It holds the 16, 32 and 48 px images as PNG data inside the .ico container. The zip is written the same way, with the files stored as they are.
  • •The maskable option follows the published rule that the important part of the icon sits inside a circle of 80% of its width. It adds the space and the filled background that rule needs, but it was not tried on real Android phones.
  • •Put the files in the root folder of your site, paste the head lines into your pages and save the manifest as site.webmanifest. Browsers keep favicons in a cache for a long time, so a new icon may take a while to appear.

Questions

Which sizes do I actually need?
This page makes the usual set: a favicon.ico plus 16 and 32 px PNGs for tabs, 180 px for iPhones, and 192 and 512 px for web app manifests. The 48 px image is included in the .ico and also given as a PNG.
Why does my logo look blurry or messy at 16 px?
Sixteen pixels is about 256 dots in total, so fine lines and small text disappear. Use a simple shape, one or two letters, or a bold part of the logo. Check the 16 px preview on this page before you use it.
Can I use an SVG as the favicon directly?
Many browsers accept an SVG favicon, but not every place that shows your icon does, and iPhones expect a PNG for the home screen. This tool gives you PNG and ICO files that work everywhere; the SVG you drop in is used as the source picture.
Is my picture uploaded?
No. The picture is decoded and drawn in your browser, and the files are built there too. Nothing is sent anywhere or stored, and closing the page clears it.

Related