Skip to content
All tools

Favicon and app icons

One square image becomes every icon a site needs today — favicon.ico, the Apple touch icon, the manifest PNGs — with the HTML to paste into your pages.

Settings appear once you add a logo.

0%

Space around the artwork. 10% suits a logo that reaches its own edges.

Keep the background transparent The Apple icon is always filled in, because iOS shows transparency as black.

Used for the Apple icon, and everywhere else if transparency is off.

Done on your device No upload, no queue, no sign-up.

Bytes sent anywhere: 0 B

How to use it

Your logo goes into this browser tab, is drawn at every icon size on your device, and comes back as a full set of icons with the HTML. 0 bytes uploaded

  1. Add your file

    Drop in your logo. A square SVG or a PNG of 512 px or more gives the crispest result.

  2. Check the settings

    Add breathing room if the artwork runs to its own edges, and choose the color behind it.

  3. Save the result

    Save the files into the top folder of your site, then paste in the four lines of HTML shown with the result.

Why it doesn’t upload

A logo is usually the most carefully guarded image a company owns, and a favicon generator is a strange place to hand it over. Every icon here is drawn on your own device: the file is never sent, so there is no copy to delete afterwards.

How to check for yourself

Worth knowing

  • The artwork is centered on a square, never stretched. Crop it first with Resize Image if it should fill the icon edge to edge.
  • Detail disappears at 16 px. A full logo with words rarely survives; the initial or the mark usually does.
  • A copy of your SVG is passed through untouched when you start from one. Everything else is rendered as PNG.
  • The manifest is a starting point with placeholder names and colors. Edit it before you upload it.

Why so few files

Favicon generators grew during the years when every platform wanted its own size: Windows tiles, old iOS versions, Android Chrome at seven resolutions. Most of those browsers are gone, and the ones left read the manifest or scale a PNG themselves.

What remains is the short list this tool makes. Fewer files means fewer requests, fewer things to forget when you redesign, and a <head> that stays readable.

Questions

What files does a favicon actually need in 2026?

Four: favicon.ico (16/32/48, for old Windows browsers), favicon.svg where you have one, apple-touch-icon.png at 180 px for iPhone home screens, and icon-192/512.png named in a web manifest for Android and installable apps. That is the whole set; anything more is for browsers that no longer exist.

Where do the files go?

In the top folder of your website — the one that answers / — so the addresses look like https://yoursite.com/favicon.ico. Then paste the HTML into the <head> of every page. Browsers look for /favicon.ico even without the HTML, which is why that one keeps its name.

Why is my favicon not showing up?

Browsers cache favicons hard. Open the icon address directly (yoursite.com/favicon.ico) to confirm it is there, then reload the page ignoring the cache, or try a private window. Check the files sit in the top folder and not in a subfolder like /images/.

What size should the source image be?

An SVG is best, because every size is rendered fresh from it. Otherwise use a square PNG of 512 px or more. Smaller sources are enlarged, and enlarging never adds detail.

Why does my Apple icon have a black background?

iOS does not support transparency in home screen icons and fills it with black. This tool flattens the Apple icon onto your background color to avoid that, which is why that one file is never transparent.

Do I need a maskable icon?

Android crops icons to whatever shape the phone uses, and a maskable icon keeps the artwork inside the safe circle. The manifest here lists the 512 px icon as maskable, so add 10–20% breathing room if your logo runs to its edges.

Read more about this

Other tools