Favicon generator.

Four things cover nearly every browser and device: favicon.ico for /favicon.ico requests and older browsers, favicon.svg for sharp tabs at any zoom, a 180-pixel apple-touch-icon.png for iPhones and iPads, and a web app manifest listing 192 and 512 pixel icons for Android and installs. This tool writes all of them, plus a maskable icon.

Browsers, feed readers and crawlers ask for /favicon.ico at the site's root whether or not a page links it, and Windows shortcuts and many bots read nothing else. One ICO with 16, 32 and 48 pixel frames answers all of them in a few kilobytes, so it stays in the set beside the SVG.

An icon drawn edge to edge with its content inside a central circle 80% as wide as the icon, the safe zone. Android crops it to its launcher's shape (a circle, a squircle, a rounded square) instead of shrinking the icon onto a white plate. The preview draws the safe zone over it.

Yes. A style rule inside the SVG with a prefers-color-scheme: dark media query recolors it when the browser is dark. The tool adds one when a letter favicon has no fill, since a dark letter on a transparent tab would vanish; a filled square reads on both themes as it is.

It shows the one your home page links with <link rel="icon">, if Googlebot can fetch it. Google asks for a square icon whose side is a multiple of 48 pixels; the ICO's 48-pixel frame and icon-192.png both qualify.

Switch the source to Image and drop an SVG, PNG, JPG or WebP. An SVG is drawn as vectors at every size and becomes favicon.svg as well; a bitmap should be at least 512 pixels square, or the large icons are enlarged from it.

Choose Next.js above the code. favicon.ico, icon.svg and apple-icon.png go in the app folder, where Next.js writes their link tags itself; the manifest becomes app/manifest.ts and the theme color goes in the layout's viewport export.

No. Each icon is drawn on a canvas in your browser, favicon.ico is packed by the page's own code and the ZIP is built on your device. The page sends nothing, and a dropped logo never leaves it.

No. The Favicon generator is free and opens without a sign-in, an account or an install.

Nothing. The Favicon generator holds your input in the page's memory, so closing or reloading the tab clears it, and it saves nothing in this browser.

Three PNG frames of 16, 32, 48 pixels, each drawn at its own size rather than shrunk from a big one, so the small ones stay crisp. They cover tabs on standard and 2× screens, bookmarks and the Windows taskbar.

4 system font stacks, sans, serif, mono, and rounded, each regular or bold, so nothing is fetched. The PNG and ICO files keep the letters as your system draws them; favicon.svg names the same stack, so each visitor's system draws it and it can differ slightly between a Mac, Windows and Android.

iOS shows transparent pixels in a touch icon as black and rounds the corners itself, so the 180-pixel apple-touch-icon.png is always a full square in the background color, with no radius. The tab icons follow the Fill and Radius settings.

It fills the whole 512-pixel square with the background and keeps the letter, emoji or image inside the central 80%, Android's safe zone, which the preview outlines. Raise the padding if a logo's corners matter.

Yes: type the folder in Served from, such as /icons/, and the link tags and the manifest's icon paths point there. The Next.js files ignore it, since icons in app/ are served from the root.

Closest to the Favicon generator: Web app manifest generator, PNG to ICO converter, SVG to ICO converter, Meta tag generator. Each opens on its own page, free and in the browser.

The Favicon generator is one of 14 in its group. The group's page, /tools/web, lists them all.

The tool is free. Its interface is built from shadcn.io's own components (Button, Input, Slider and the rest of the registry under /ui), which come in React, Vue, Svelte and Solid. Pro adds the blocks and templates for the product around it.