MakerBox

Favicon Generator

Make a favicon from a picture or from letters: favicon.ico, an SVG, PNG fallbacks, a Windows tile, a manifest and the tags — free, no upload, in your browser.

Drop your logo or picture here, or click to browse

The tags that go in your page
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

🔒 Built in your browser — never uploaded. You get favicon.ico (16/32/48), a favicon.svg, 16/32 PNG fallbacks, apple-touch & PWA PNGs, a Windows tile with browserconfig.xml, a site.webmanifest, plus the HTML snippet to paste into your <head>.

Generate a complete favicon set

Start from a picture or from letters. Drop in any image, square or not, drag the square over the part you want and zoom it in or out to crop; or switch to From letters and type one to four characters — pick the typeface, the letter and shape colours, and a square, rounded or circular tile. Either way you can add breathing room and a background colour, and see exactly how it reads at 16, 32, 48 and 180px against a light and a dark tab. Show it in this tab puts the icon on this very page, so you can look at it in your own tab strip before you download anything, and put the real one back with the same button.

What you download

A ready-to-use package: a multi-size favicon.ico (16, 32 and 48px), a favicon.svg, favicon-16x16.png and favicon-32x32.png fallbacks, an apple-touch-icon.png (180px), PWA icons (192 and 512px), a mstile-150x150.png with the browserconfig.xml that points Windows at it, a site.webmanifest that declares the PWA icons so browsers can use them for Add-to-Home-Screen, and the HTML snippet. That snippet is also on the page, in a block you can copy without opening the ZIP — as plain HTML, as JSX for React, or as the metadata export Next.js App Router wants instead of tags. Everything is rendered in your browser — your image is never uploaded.

Frequently asked questions

What is in the download?

A ZIP with favicon.ico (16/32/48), favicon.svg, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, icon-192.png, icon-512.png, mstile-150x150.png, browserconfig.xml, site.webmanifest and a snippet.html with the tags to add to your <head>.

What image should I use?

Any image works. It opens with your whole picture inside the square, so a logo that is already square needs no adjusting; for a wide photo, drag the square over the part you want and zoom until only that part is left. Whatever you pick, check the 16px preview — fine detail disappears at that size.

Can I make a favicon without an image?

Yes. Switch to "From letters" and type one to four characters — initials, a monogram, a Hangul syllable. Choose a sans-serif, serif or monospace face, the letter colour, the tile colour and whether the tile is a square, a rounded square or a circle. Everything after that is the same as for a picture: crop, breathing room, previews and the same ZIP.

Is the favicon.svg real vector art?

It is when you make the icon from letters: the file is a shape and a <text> element, so it stays sharp at any size. When you start from a picture it is not, and cannot be — a browser has no way to trace a photograph into curves — so the SVG carries the 512px PNG inside it. It is still a valid file for <link rel="icon" type="image/svg+xml">, it just is not resolution-independent.

Can I copy the HTML tags without unzipping?

Yes. The tags are printed on the page under the download button with their own copy button, and the Framework menu switches them between plain HTML, JSX for React (self-closing tags), and the Next.js App Router metadata export. The theme colour you pick is carried into all three.