DanfioSearch tools/

Type a tool name, a pinyin spelling or a synonym - both languages are searched.

Favicon Generator

Global tools

The little icon in a browser tab is asked for by every browser, on every page load, and it is the one image a website needs in a dozen different sizes. Most generators solve that by uploading your logo - often the only clean copy of a brand mark you have - to somebody else’s server.

Favicon Generator - Danfio

https://danfio.com/tools/favicon-generator/ - printed from this page

Drag & drop a file here, or .

Everything is processed in your browser - nothing is uploaded.

    One square-ish picture, at least 512 px on its short side - the pack contains a 1024 px icon, and scaling up cannot add detail - up to 25 MB. It is read and scaled in this browser tab and never uploaded.

    Drag & drop a file here, or .

    Everything is processed in your browser - nothing is uploaded.

      A version of the mark drawn for dark browser themes - light strokes on transparency, usually. Upload one and the pack gains favicon-16x16-dark.png and favicon-32x32-dark.png, which a browser in dark mode uses instead of the ones above. Leave it blank and every tab shows the same icon.

      Written into site.webmanifest as the full name.

      Used on home screens where space is tight, and to name the zip.

      Six hexadecimal digits, used for the browser UI around an installed web app.

      A transparent logo can vanish against a dark browser theme; a solid background avoids that.

      Only used by the dark-mode tab icons, and only when a dark-mode logo is uploaded. The light-mode files keep the background above.

      Even breathing room, as a share of the icon. 0% fills the icon edge to edge.

      The largest square is cut out first; this decides where that square sits.

      Results update as you type. Nothing leaves your device.

      Icon pack plan

      15 files

      A rounded icon at 16, 32, 48, 150, 180, 192, 512, 1024 px, plus favicon.ico, a web manifest, browserconfig.xml and a zip holding all of it.

      Icon sizes
      11 PNG + .ico
      Source needed
      512 px or more
      Background
      transparent
      Padding
      6%

      What you get when you add a logo

      1. The largest square of your logo is cut out, so a wide logo does not arrive squashed.
      2. That square is scaled down to 16, 32, 48, 150, 180, 192, 512, 1024 px - never up, because interpolation cannot add detail - and masked into a rounded shape.
      3. favicon.ico holds the 16, 32 and 48 px icons in one file, which is what browser tabs, bookmarks and desktop shortcuts read.
      4. The apple-touch-icon and android-chrome files are flat, opaque squares: iOS and Android put their own shape behind a home-screen icon, so the shape above is only drawn for the browser tabs that see it.
      5. site.webmanifest names the 192, 512 and 1024 px icons, plus two maskable ones that survive an Android launcher crop, for Android and installed web apps.
      6. Upload a second logo drawn for dark browser themes and two more files appear - favicon-16x16-dark.png and favicon-32x32-dark.png - linked with media="(prefers-color-scheme: dark)".
      7. Everything is zipped into one download, together with the <head> lines to paste into your page, browserconfig.xml included.
      The plan above is what the settings will do; the icons themselves are drawn from your logo in this tab, and nothing is uploaded.

      This page makes the whole set in the tab you already have open: a square crop, the sizes browsers actually ask for, a real multi-size .ico, the web manifest, the few lines to paste into your page head, and all of it zipped together. Nothing is uploaded, and the icon you see in the preview is the icon that was written.

      About this favicon generator

      Tabs, bookmarks, home screens and installed web apps all ask the same logo for a different size, and a single large image scaled down by the browser comes out blurry or aliased. This page builds the whole set from one square crop: a real multi-size .ico, the PNG sizes browsers request, an iOS icon, a 1024 px copy for stores, two maskable icons, a Windows tile, the web manifest, browserconfig.xml and the head lines.

      The method is to sharpen each size down properly rather than let the browser do it: the mark is cropped to its largest centered square, the corners are faded with sub-pixel coverage, and favicon.ico is written as a container holding 16, 32 and 48 px PNGs. Two groups are drawn differently on purpose: the browser icons keep the shape you chose, while the apple-touch-icon and android-chrome files are flat opaque squares, because iOS and Android apply their own mask and would turn a transparent corner into a black or white one. No account is required and nothing is uploaded, so a brand mark stays your own file.

      An optional second upload covers dark mode, and it is the same arithmetic with a different source: two extra tab icons linked with prefers-color-scheme, so a browser in dark mode shows a mark that was drawn for it. Two steps remain manual, and the results panel says so: the files have to be copied to your site root and the head lines pasted into the page. Browsers also cache favicons for days, so a hard reload or a fresh private window is the only way to see a replacement immediately. What this page does is produce the files and the exact snippet.

      How this favicon generator works

      Why one image is never enough

      A browser tab is about 16 pixels square, a bookmark bar 32, a desktop shortcut 48, an iPhone home screen 180, and an installed web app wants 192, 512 and 1024 for splash screens and stores. Handing a browser a single 1024 px image and letting it scale down gives a blurry or aliased result, because browsers scale icons with whatever filter they have at the moment - so the conventional answer is to ship each size already sharpened down properly.

      favicon.ico is a container, not an image: one file can hold the 16, 32 and 48 px icons and the browser picks the one it needs. This page writes exactly that, with each size stored as a PNG inside the container - which is what Windows Vista and everything newer reads, and what keeps a 48 px icon crisp on a high-density display.

      Favicons are also square. A wide logo is cropped to its largest centered square first, and the crop anchor decides which part survives - center for most marks, left or right for a wordmark whose first letter carries the identity.

      Shape, padding and the background problem

      Modern browser tabs use a rounded or circular icon, and hiding the corners is done here by fading alpha at the edge with sub-pixel coverage rather than a hard cut - which is the difference between a circle that looks round at 16 pixels and one that looks broken.

      Padding is the other half of readability: a mark that touches the edge of its icon looks cramped in a tab, and 5-10% of breathing room is usually what fixes it. Padding is even on all sides, as a share of the icon, and it is drawn in the background color you chose - or left transparent, if you asked for that.

      There is a second shape decision that is not yours to make: iOS and Android mask a home-screen icon themselves. iOS puts the 180 px picture on a black square and an Android launcher crops its icon to whatever shape it likes, so a transparent corner in those files does not arrive as a rounded corner at all - it arrives as a black or white one. The icons written for those two platforms are therefore always flat, opaque squares, painted in the background you chose, or in the theme color when you kept transparency. The shape setting is about the browser icons, which a browser draws on its own background.

      Transparency is the trap. It looks right on a light browser theme and disappears on a dark one, so a mark with thin dark lines on nothing usually wants a solid background. The preview panel shows the 48 px icon as it will really appear, which is the only way to judge it.

      What you have to do by hand

      Two things cannot be done from here, and the results panel says so: the files have to be copied to the root of your site, and the <link> lines have to go into the <head> of your pages. The manifest file and the snippet are both generated for you, so it is a copy and a paste rather than a research project.

      Browsers cache favicons aggressively - often for days, sometimes across a whole profile. After replacing one, a hard reload or a fresh private window is the only way to see the new icon immediately, and that is a browser behavior rather than a bug in the file you just made.

      The manifest: names, theme color, and the files it points at

      site.webmanifest is plain JSON that ties a full site name, a short name for crowded home screens and a theme color - the hex value that colors the browser UI around an installed web app - to the 192, 512 and 1024 px icons by the names this page wrote, plus two maskable copies and a start_url so the installed app opens at your front page rather than whichever deep link was open when it was installed. The desktop names the manifest and the manifest names the icons; that chain is what makes an installed web app show a sharp icon.

      The fields you type land here, beside the sizes they describe. Leave them blank and the defaults come out; fill them in and the zip contains a manifest ready to paste alongside the <link> lines the page also prints.

      Dark mode, and the places a site gets installed

      A tab is drawn on the browser’s own background, which is light or dark depending on the theme, so a mark tuned for white can vanish at night. Upload a second logo drawn for dark themes and the pack gains favicon-16x16-dark.png and favicon-32x32-dark.png, linked with media="(prefers-color-scheme: dark)". A browser that does not understand that attribute falls back to the light pair, so nothing breaks in the ones that do not.

      The same download covers the two places a page is installed rather than opened: browserconfig.xml beside mstile-150x150.png for a tile pinned to the Windows Start menu, and a manifest naming the 192, 512 and 1024 px icons, plus two maskable copies whose artwork is pushed inside the circle an Android launcher may crop to.

      Worked examples

      Each example below was run through the calculator on this page when the site was built, so the numbers match what you see when you enter the same inputs.

      A square logo with rounded corners

      Site name: Danfio · Short name: danfio · Icon shape: Rounded corners (the modern default) · Behind the logo: Keep transparency as it is · Padding around the mark: 6 %

      Icon pack plan

      15 files

      A rounded icon at 16, 32, 48, 150, 180, 192, 512, 1024 px, plus favicon.ico, a web manifest, browserconfig.xml and a zip holding all of it.

      Icon sizes: 11 PNG + .ico · Source needed: 512 px or more · Background: transparent · Padding: 6%

      The modern default: the logo keeps its own background, the corners are rounded, and 6% padding keeps the mark off the edge of a browser tab.

      A dark wordmark that needs a solid background

      Site name: My site · Short name: mysite · Icon shape: Square (a plain square icon) · Behind the logo: White · Padding around the mark: 10 %

      Icon pack plan

      15 files

      A square icon at 16, 32, 48, 150, 180, 192, 512, 1024 px, plus favicon.ico, a web manifest, browserconfig.xml and a zip holding all of it.

      Icon sizes: 11 PNG + .ico · Source needed: 512 px or more · Background: white · Padding: 10%

      Dark lines on transparency vanish in a dark browser theme; a white background with generous padding makes the same logo readable in both themes.

      A circular app icon

      Site name: My app · Short name: app · Icon shape: Circle (good for a logo mark) · Behind the logo: Dark slate (#0f172a) · Padding around the mark: 4 %

      Icon pack plan

      15 files

      A circle icon at 16, 32, 48, 150, 180, 192, 512, 1024 px, plus favicon.ico, a web manifest, browserconfig.xml and a zip holding all of it.

      Icon sizes: 11 PNG + .ico · Source needed: 512 px or more · Background: dark · Padding: 4%

      A circle with a dark background is what an installed web app looks like on a home screen, and the 1024 px PNG is what an app store asks for later.

      A wide wordmark whose first letter carries it

      Site name: AnyCo · Short name: anyco · Icon shape: Rounded corners (the modern default) · Behind the logo: Keep transparency as it is · Padding around the mark: 8 % · Which part of a non-square logo to keep: Left

      Icon pack plan

      15 files

      A rounded icon at 16, 32, 48, 150, 180, 192, 512, 1024 px, plus favicon.ico, a web manifest, browserconfig.xml and a zip holding all of it.

      Icon sizes: 11 PNG + .ico · Source needed: 512 px or more · Background: transparent · Padding: 8%

      When the identity is the first letter, anchoring the crop to the left keeps that letter centered in the icon instead of cutting it off. The largest square is still taken first; the anchor only decides where it sits.

      Frequently asked questions

      Is my logo uploaded anywhere?

      No. The logo is read through the browser file API, cropped and scaled on your own device, and every file you download is created in the tab. Open the network panel while it runs, or disconnect from the internet and generate anyway - both work, because there is no upload endpoint behind this page.

      Which sizes do I actually need?

      The realistic minimum is favicon.ico with 16, 32 and 48 px inside it, a 32 px PNG for modern browsers, an apple-touch-icon at 180 px, and the 192 and 512 px PNGs a web manifest names. That is the core of what this page writes, and the rest of the ecosystem comes with it: a 1024 px copy for app stores, two maskable icons an Android launcher may crop, a Windows tile with its browserconfig.xml, and an optional dark-mode pair. Every file is also offered on its own in case you only need one.

      What is favicon.ico, and why is it a container?

      ICO is a small container format: one file can hold several icons, each with its own size, and the browser picks the one that suits the moment - 16 px for a tab, 32 px for a bookmark, 48 px for a shortcut. That is why a single 32 px PNG is not a complete replacement for it, and why this page writes a real multi-size .ico.

      Why does a transparent PNG favicon disappear sometimes?

      Because the same file is shown on light and dark browser themes. A mark made of dark lines on transparency looks right on white and vanishes on black. Choose a background color here if that is a risk, and check the 48 px preview - it is shown at the size a desktop shortcut uses.

      How do the dark-mode icons work?

      Upload a second logo under "Dark-mode logo" and the pack gains favicon-16x16-dark.png and favicon-32x32-dark.png, linked from the snippet with media="(prefers-color-scheme: dark)". A browser whose theme is dark uses those; everything else keeps the light pair. The scheme is a browser preference rather than a page setting, so nothing has to be switched on your side - and without a second upload the light icons are used in both themes, which is exactly why a solid background is worth choosing for a dark mark on transparency.

      Why are the iOS and Android icons square when I picked a circle?

      Because those two platforms put their own shape behind a home-screen icon: iOS draws the 180 px picture on a black square, and an Android launcher crops the icon to whatever mask it likes. A transparent corner in those files therefore arrives as a black corner rather than a rounded one. The shape you choose is applied to the browser icons, which a browser draws on its own background; the apple-touch-icon and android-chrome files are flat, opaque squares painted in your background color, or in the theme color when you kept transparency.

      Why does my new favicon not show up?

      Browsers cache favicons hard, sometimes for days, and often keep them per profile rather than per page. A hard reload (Ctrl+Shift+R), a fresh private window, or clearing the cache is the usual fix. It is also worth checking that the files really answer at https://your-domain.com/favicon.ico - browsers ask for that exact path even when the <link> tags point elsewhere.

      Does the tool resize my logo up if it is too small?

      No. Icons are only ever scaled down, because interpolation cannot invent detail - a 64 px logo enlarged to 1024 px is a blurry 1024 px logo. The pack contains a 1024 px icon, so the source has to be at least 512 px on its short side, and a smaller picture is refused with a sentence saying so instead of being turned into soft icons.

      What is site.webmanifest for?

      It tells Android and installed web apps where the icons are, along with the site name, the theme color and the start_url the installed app should open at. It is plain JSON generated for you, referring to the 192, 512 and 1024 px PNGs by the names this page used, and declaring the two maskable copies as purpose: "maskable". Point one <link rel="manifest"> at it and the icons follow.

      Can I use this for an app icon rather than a website?

      The 1024 px PNG is what an app store asks for, the 512 px one is the right source for Android adaptive icons and the 192 px one is what a home screen uses. What this page does not do is a full icon library: a layered Android adaptive icon (foreground and background as separate images), multi-density iOS app icon sets or the complete Windows Store asset list all want more control than a favicon generator should pretend to offer.

      Assumptions and sources

      • Each size follows what the platform asks for: 16 and 32 px for browser tabs, 180 px for the iOS home screen, 192 and 512 px for the web app manifest.
      • A transparent logo is flattened onto an opaque square for the iOS and Android icons, because those platforms apply their own mask; a logo is required and there is no letter mode.
      • Your logo and every generated file stay in the browser tab; nothing is uploaded.

      Last reviewed 2026-10-31. Runs locally on your device; keep backups; no financial advice applies. Read the full disclaimer.

      Where a figure on this page comes from an official agency — HUD, IRS, FICO or a state body — the site keeps a dated snapshot of the source page in its sources library, and a scheduled job re-checks that snapshot, so the number can be traced back to the document it came from.

      Related tools

      Image ResizerPDF & DocumentsResize, crop, rotate and mirror images in your browser: fit or fill a pixel box, keep a square or story shape, and download each picture. Nothing is uploaded.Resize an image →Image CompressorPDF & DocumentsShrink JPG, PNG, WebP and HEIC in your browser: choose width and quality, see sizes before and after, and get your file back if re-encoding would not help.Compress an image →Image to SVG ConverterPDF & DocumentsPut a PNG, JPEG, WebP or GIF inside an SVG in your browser: one file, any declared size, lossless if the original is kept. Several at once, nothing uploaded.Convert an image to SVG →Open Graph Preview & SitemapDeveloper ToolsRead a page the way a crawler does: the search result, the share card and a 20-point metadata checklist, plus sitemap.xml and robots.txt builders. No upload.Preview social links →Add Page Numbers to PDF (and Crop)PDF & DocumentsAdd page numbers to a PDF in your own browser: pick the corner, the wording such as Page 3 of 12, and trim the margins while you are there. No upload.Number PDF pages →Background RemoverPDF & DocumentsDelete the background from a photo, product shot or scan in your browser: pick the color, set the tolerance, get a transparent PNG. Nothing is uploaded.Remove a background →