The essentials: favicon.ico (16, 32, 48) for browsers, favicon-32x32.png and 16x16.png, apple-touch-icon.png (180) for iOS, and android-chrome 192/512 for PWAs. This tool generates all of them.
Carregando ferramenta… / Loading tool…
Generate a multi-resolution favicon.ico and the full PNG set from a single image, with a ready HTML snippet.
A favicon.ico at the site root used to be enough. Today, a site needs a set of icons: the browser tab wants 16 and 32 px, iOS wants the 180 px apple-touch-icon for the home screen, and a PWA (installable web app) wants 192 and 512 px PNGs described in a web manifest. Forgetting a format leaves a blurry or generic icon in some context. This tool generates the whole set at once from a single image, the multi-resolution favicon.ico, the PNGs, the site.webmanifest and the ready-to-paste HTML snippet for the <head>. Everything is processed in your browser; the image is not sent to any server.
There is no single favicon: there is a set, because each platform uses the icon differently. The 16 and 32 px PNGs appear in the browser tab and bookmarks. The apple-touch-icon (180 px) is what the iPhone uses when you add the site to the home screen. The 192 and 512 px PNGs are for PWAs and Android, described in the manifest.
The favicon.ico still matters as a universal fallback, old browsers and some contexts fetch it automatically at the root. That is why the tool generates them all: covering the set avoids the blurry icon (when a size is missing and the browser rescales another) or the generic square (when nothing is found).
The ICO format is special: it can embed several resolutions (16, 32, 48 px) inside a single file. So the system or browser picks the right-sized version for each context, a small tab uses the 16, a larger shortcut uses the 48, keeping sharpness without on-the-fly rescaling.
About framing: since favicons are square, a square image avoids cropping. In Cover mode, a rectangular image is cropped to the center to fit the square; in Contain mode, it is fit whole, with padding around it. Rounded corners and a background color help adapt a logo to the icon format.
The site.webmanifest is a small JSON file that describes the site as an app: name, colors and the icon list (the 192 and 512 PNGs). It is what lets you "install" the PWA and show a proper icon on the home screen instead of a page screenshot. The tool already generates this file referencing the correct PNGs.
The HTML snippet ties it together: these are the <link> and <meta> tags pointing to the favicon.ico, the PNGs, the apple-touch-icon and the manifest. Just paste it into your site's <head>. Without the snippet, the files exist but the browser does not know where to look, pasting the references is the step that activates the set.
Paste the code into your HTML and the tool shows up on your page, without J-Kit's navigation and ads. It still runs in the browser of whoever visits your site.
<iframe
src="https://jkit.tools/embed/en-US/favicon-generator"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Favicon Generator"
></iframe>The essentials: favicon.ico (16, 32, 48) for browsers, favicon-32x32.png and 16x16.png, apple-touch-icon.png (180) for iOS, and android-chrome 192/512 for PWAs. This tool generates all of them.
Generation happens entirely in your browser. No image is sent to any server.