A favicon is the little picture in the browser tab, the bookmark list and the history menu, and it is also the icon people see when they add your site to a phone's home screen. Each of those places wants a different size and sometimes a different file. This generator takes one image, a logo or a mark in PNG, JPG, WebP or SVG, and produces the whole set at once, together with a web app manifest and the HTML tags that point to the files.
You preview every size as you adjust padding, corner rounding and background, then download everything as one ZIP. The icons are drawn by your browser, and your logo is never uploaded.
Which files a favicon set contains
favicon.ico is the classic file browsers look for at the root of a site. The one made here holds three images, 16, 32 and 48 pixels, stored as PNG inside the ICO container, which every current browser and Windows since Vista can read. Alongside it come ten PNG files: favicon-16x16, 32x32, 48x48, 64x64, 96x96, 128x128 and 256x256, apple-touch-icon.png at 180 pixels for iPhone and iPad home screens, and android-chrome-192x192 and 512x512 for Android and installable web apps.
site.webmanifest is a small JSON file that tells Android and Chromium-based browsers the app's name, short name, theme colour, background colour and the two Android icons, with display set to standalone. The last file, favicon-tags.html, holds the link and meta tags for your page's head.
When you need a favicon generator
Launching a new website
Without a favicon, browsers show a generic globe or a blank page icon and the tab is harder to find among twenty others. Generating the set takes a minute and makes the site look finished.
Rebranding or replacing a blurry icon
Old sites often have a single 16 pixel favicon.ico that looks fuzzy on high-density screens. A fresh set from a large logo gives crisp icons at every size, including the 180 pixel Apple icon.
Web apps and dashboards people install
Internal tools, PWAs and documentation sites added to a home screen need the 192 and 512 pixel icons and a manifest. Fill in the app name and theme colour and both are produced for you.
How the icons are made
Your image is decoded in the browser, at up to 2,048 pixels on its longest side; an SVG is rendered at 1,024 pixels on its longest side first. Each icon is then drawn on its own square canvas. Whole image fits the full picture inside the square and leaves the rest empty, while Fill and crop fills the square with the centre of the picture. Padding adds a margin of up to 30 percent, Rounded corners clips the square to a rounded shape up to a full circle, and you can keep the background transparent or fill it with a colour.
Small sizes are produced by halving the image step by step rather than in a single jump, which keeps the 16 and 32 pixel icons smooth instead of jagged. The manifest is built from App name, Short name and Theme colour; the app name starts as your file name, and the background colour is your chosen fill, or white when the background is transparent.
Come usare questo strumento
- Drop a square logo of 512 pixels or more on the box above, or click to choose a PNG, JPG, WebP or SVG.
- Pick Whole image or Fill and crop, then set Padding, Rounded corners and the background.
- Fill in App name, Short name and Theme colour for the web app manifest.
- Press Download all (ZIP) for the full set, or Download favicon.ico for just the ICO file.
- Upload the files to your site's root folder and paste the HTML tags into the head of your pages.
Limitations
- No SVG favicon or dark-mode variant is produced; every icon is a PNG or the ICO file.
- The HTML tags assume the files sit at the root of your domain. Change the paths if you put them in a subfolder.
- Icons are not marked as maskable, so Android may place them on a white circle or square.
- Fine text and thin lines in a logo disappear at 16 pixels. A simplified mark or a single letter reads better at that size.