TodayTools

Favicon generator

Give your shop or portfolio site a small, sharp icon people recognise.

PrivateNo uploadsRuns in your browser

Donate
Source
Weight
Background presets
Shape

Optional. Shown under the icon when someone adds your site to a phone home screen.

or one PNG:

My site
Tab 16 px
Tab 32 px (HiDPI)
iPhone 180 px
Android maskable

Head snippet

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0d9488">
A cup of latte with heart art

For the small business

Your cafe logo in every browser tab.

The house latte. The same cup shape sits in the tab.

BeforeA blank grey tab

With sdevYour logo, every size

  • A barista pouring coffee into a filter

    The morning pour

    Regulars spot the site in a row of tabs.

  • A coffee jug and cup on a concrete table

    The new website

    A sharp little icon on every phone.

How to make a favicon

  1. Choose a source

    Drop a logo (PNG, SVG or JPG), or type a letter or two, or pick an emoji. Set the background colour or keep it transparent, choose square, rounded or circle, and add padding if the shape touches the edges.

  2. Check the previews

    The tab, iPhone and Android previews show the icon at real sizes. If the 16 px version turns to mush, simplify the shape or increase contrast.

  3. Download the package

    One zip holds favicon.ico, every PNG size, site.webmanifest and a README with the HTML. Copy the head snippet and put the files in the root of your site.

Good to know

  • The zip contains favicon.ico (16, 32 and 48 px inside), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, maskable-icon-512x512.png, site.webmanifest and a README with the HTML.
  • Put the files in the site root so /favicon.ico works without any HTML: browsers and many apps request that path directly.
  • Apple touch icons cannot be transparent; iOS fills the gaps with black. The generator uses white behind a transparent icon there and keeps transparency everywhere else.
  • Text icons fit the letters to the box automatically. One or two letters read best; four is the maximum and only works with a wide font.
  • Fonts other than Inter are downloaded when you pick them; the previews redraw once the font has arrived.
  • An SVG logo is passed through as favicon.svg. Give it a viewBox and it will stay sharp on every screen.
  • Ctrl+C (Cmd+C on a Mac) with nothing selected copies the HTML snippet.

Where people use it

  • A new website

    Turn your logo into every icon size a browser and phone needs, in one zip.

  • No logo yet

    Make a clean icon from two letters or an emoji and a colour.

  • Add to home screen

    Get Android icons and a manifest so the site looks right when saved on a phone.

  • Share preview picture

    Next, make the picture that shows when your link is shared.

    OG image generator

Why this one

You get every file and the HTML snippet together, so the icon works in browsers, on phones and on home screens without extra steps.

  • favicon.ico, PNG sizes, Android icons and a manifest in one zip.
  • Copy the HTML lines to paste into your page.
  • Start from an image, text or an emoji.
  • Runs in your browser.

What you can change

  • Image, text or emoji
  • Background colour and shape
  • Font and letter colour

People find this page by searching

  • favicon generator
  • favicon.ico generator
  • convert png to ico
  • favicon from text
  • emoji favicon
  • apple touch icon generator
  • favicon for website
  • web manifest icons
Cite this tool
  • APA
    sdev.in. (n.d.). Favicon generator [Web tool]. https://www.sdev.in/tools/favicon-generator
  • MLA
    "Favicon generator." sdev.in, https://www.sdev.in/tools/favicon-generator.
  • Chicago
    sdev.in. "Favicon generator." https://www.sdev.in/tools/favicon-generator.
  • BibTeX
    @misc{sdev-favicon-generator,
  title = {Favicon generator},
  author = {{sdev.in}},
  howpublished = {\url{https://www.sdev.in/tools/favicon-generator}},
  note = {Web tool}
}

Questions people ask

Which favicon files do I actually need?

favicon.ico for old browsers and Windows shortcuts, a 32 px PNG for browser tabs, apple-touch-icon.png (180 px) for iPhone home screens, and 192 and 512 px PNGs in a web manifest for Android and installable web apps. This tool makes all of them, plus a maskable 512 px icon for Android's adaptive shapes.

Should I use an SVG favicon?

Yes, alongside the PNGs. Every current browser except Safari prefers the SVG, which stays sharp at any size and can adapt to dark mode. Drop an SVG file here and it is included as favicon.svg with the right link tag.

What size should the source image be?

At least 512×512 px, square, with the subject filling most of it. Icons are shrunk to 16 px in tabs, so simple shapes and one or two colours read best; thin lines and small text vanish.

What is a maskable icon?

Android shows app icons in a circle, squircle or rounded square chosen by the device. A maskable icon has a full-bleed background with the content inside the middle 80%, so nothing important gets cut off. The generator pads it for you.

Is my logo uploaded?

No. The icons are drawn on a canvas in your browser and zipped there too. Nothing is sent to a server.

Donate