DEV3 Technologies home

Design tool

Favicon Generator

Turn a logo or a few letters into a full favicon set: ICO, PNG sizes, Apple touch icon, web manifest and the HTML tags. Download everything as a zip.

Free, no sign-up. Runs in your browser; nothing is uploaded.

Source

Create from
Shape

Site details

Previews

  • Browser tab (16)
  • Browser tab (32)
  • Windows shortcut (48)
  • Apple touch icon (180)
  • Android (192)
  • Android / PWA (512)

HTML for your <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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#2563eb">

site.webmanifest

{
  "name": "My Site",
  "short_name": "My Site",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#2563eb",
  "background_color": "#2563eb",
  "display": "standalone"
}

How to use the favicon generator

What a complete favicon set contains

A modern site needs more than one file. Browsers, phones and operating systems each ask for their own icon:

  • favicon.ico is the classic file in the site root. It holds 16, 32 and 48 pixel images, so older browsers and Windows pick the size they need.
  • favicon-16x16.png and favicon-32x32.png are used by current browsers in tabs and bookmarks.
  • apple-touch-icon.png (180 pixels) is what iPhones and iPads use when someone adds your site to the home screen.
  • android-chrome 192 and 512 are referenced from the web manifest for Android and installable web apps.

Start from the right artwork

  1. Use a square image of at least 512 pixels. Larger is better because the tool scales down.
  2. Keep it simple. Thin lines and small text vanish at 16 pixels. A single bold shape or one to three letters works best.
  3. If your logo is wide, choose Contain to keep it whole, or Cover to crop to the centre.
  4. Transparent PNG and SVG logos keep their transparency. Switch on a background colour if the mark disappears on dark browser themes.

Letters instead of a logo

No logo yet? Type one to three letters, pick a background and text colour, and a shape: square, rounded or circle. Bold weights read best at small sizes, and strong contrast between letters and background matters more than style.

Install it

  1. Download the zip and upload the files to the root of your website.
  2. Paste the head snippet into every page, or into your layout file.
  3. Save the manifest text as site.webmanifest next to the icons.
  4. Clear your browser cache or open a private window to check. Browsers cache favicons for a long time, so an old icon can linger.

Quick checks

  • Open /favicon.ico directly in the browser to confirm it loads.
  • Look at the 16 pixel preview: if you cannot read the shape there, simplify the artwork.
  • Test on a phone by adding the page to the home screen.

Frequently asked questions

Which favicon sizes do I actually need?

A favicon.ico (16, 32 and 48 pixels inside one file), a 180 pixel apple-touch-icon.png for iPhones and iPads, and 192 and 512 pixel PNGs for Android and installable web apps. The set this tool exports covers all of them.

Where do I put the files?

Upload them to the root of your site so they are served from /favicon.ico, /apple-touch-icon.png and so on, then paste the generated link tags into the head of every page, or into your shared layout or template.

Why does my small favicon look blurry?

Detailed logos shrink badly to 16 pixels. Use a simple mark, one or two letters, or a version of your logo with thick shapes and no text. Choosing Contain keeps the whole logo visible; Cover crops it to fill the square.

Can I use an SVG logo?

Yes. The SVG is drawn onto a canvas at each size, so you get crisp PNGs. SVGs with no width and height attributes are treated as 512 pixels square.

Is my image uploaded?

No. Every icon is drawn and packaged inside your browser. Nothing leaves your device.