DevToolPal
EN

Favicon Generator

Make a favicon from text, an emoji or your logo: favicon.ico, PNG sizes, Apple touch icon, web manifest and HTML tags in one ZIP.

Runs locally, never uploaded

Options

Source
Shape

Preview

HTML for <head>

What this tool does

The Favicon Generator turns a letter, an emoji or your logo into every icon a modern website needs. It renders the icon at each size, packs favicon.ico, writes a web app manifest, and gives you the <link> tags to paste into your page’s <head>. Download everything as one ZIP.

Starting from text is the fastest way to get a clean icon: type one to three characters or an emoji, choose colors, a font and a shape (square, rounded or circle). Text icons also get a scalable favicon.svg, which stays sharp at every size and on high-density screens.

How to use it

  1. Choose Text or Image as the source. For an image, press Choose image… and pick a square PNG, SVG or JPG.
  2. Set the Shape, and turn Fill background on to put the icon on a colored tile, or off to keep it transparent.
  3. Enter your Site name: it is the label under the icon when someone adds your site to a phone’s home screen, written to site.webmanifest (Android) and the apple-mobile-web-app-title tag (iOS). Then set the Icon folder where you will upload the files, usually /.
  4. Check the preview: the 16 px icon is what people see in a browser tab.
  5. Press Download ZIP, upload the files to your site, and paste the HTML into <head>.

Example

The default settings produce these tags:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="apple-mobile-web-app-title" content="My Site">

Tips

  • Browsers cache favicons aggressively. After replacing an icon, open the page in a private window to see the change.
  • iOS ignores transparency in the Apple touch icon and fills it with black, so keep the background filled for a clean home-screen icon.

FAQ

› Which files do I get?

favicon.ico (16, 32 and 48 px), PNG icons at 16, 32 and 48 px, a 180 px Apple touch icon, 192 and 512 px Android icons, site.webmanifest, the HTML tags, and favicon.svg when you start from text.

› Is my logo uploaded anywhere?

No. The image is read and resized in your browser with a canvas; the ZIP is built on your device too.

› What image works best?

A square PNG or SVG of at least 512 × 512 px with a transparent background. Simple, bold shapes stay readable at 16 px; fine detail and thin text do not.

› Do I still need favicon.ico?

Yes, for older browsers and for tools that request /favicon.ico directly. Modern browsers use the PNG or SVG links in the HTML.