Favicon Generator – PNG to favicon.ico Converter
A free favicon generator that converts PNG, JPG, WebP or SVG — or a few letters or an emoji — to a multi-size favicon.ico (16, 32 and 48 px), a dark-mode-aware favicon.svg, Apple touch icon, Android Chrome 192/512, HTML tags and a web manifest. Runs in your browser.
Drop an image here, or click to browse
JPEG, PNG, WebP, GIF or SVG. Stays in your browser.
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Download favicon.ico for your site root, or the ZIP for PNG sizes, Apple touch, Android Chrome, HTML and a web manifest. Crop to a square first if the subject is off-centre. Nothing is uploaded.
Why favicon.ico alone is not enough: the favicon sizes a site needs
Browsers no longer rely on one favicon.ico. Chrome wants PNG at several sizes, iOS home-screen bookmarks use a 180-pixel Apple touch icon, and a PWA manifest lists 192 and 512. Exporting only 16×16 leaves blurry tiles on a phone and a missing icon in “Add to Home Screen”.
This generator centre-crops or letterboxes your image to a square, then writes every web size from the original pixels (not from a previously scaled copy). favicon.ico embeds 16, 32 and 48 as PNG frames so older bookmarks still work.
Drop the files in the site root and paste the HTML snippet into <head>. Download favicon.ico on its own if you only need the classic site icon; the ZIP adds PNG sizes, Apple touch, Android Chrome and a starter site.webmanifest (change the name and theme colour, or copy only the icons array into an existing manifest).
Chrome, Edge and Firefox also accept an SVG favicon. One favicon.svg stays sharp at every size and, unlike PNG or ICO, can change colour with the visitor’s theme through a prefers-color-scheme media query inside the file — so a dark logo does not disappear on a dark browser tab. Upload an SVG logo (optionally with inverted colours for dark mode) or build an icon from text or an emoji, and this tool writes favicon.svg next to the ICO. The HTML snippet then lists the ICO with sizes="32x32" rather than sizes="any", because with "any" Chrome picks the ICO over the SVG.
No logo yet? Type one to three letters or pick an emoji, choose a rounded, square or circle background and colours, and the favicon generator centres the glyphs on their actual ink rather than the font’s line height, so letters like "g" and emoji sit visually in the middle. Text and emoji use system fonts, which is also what an SVG favicon can rely on — a web font would not load inside the icon.
Start from a square logo of at least 512 pixels. A photo with a busy background looks muddy at 16×16 — crop in the Image Cropper first. Fill mode is right for marks that already sit in a square; Fit keeps a full landscape from being chopped.
An ICO file is a small container, not just a renamed PNG: it holds several images of different sizes, and the browser or operating system picks the one closest to the size it needs. That is why converting PNG to favicon.ico here writes 16, 32 and 48 pixel frames into one file instead of a single scaled image — a tab uses 16, a Windows taskbar shortcut or high-density tab uses 32 or 48. Renaming logo.png to favicon.ico often appears to work in a modern browser, but some older tools and crawlers expect a real ICO header.
Google Search also shows a favicon next to your result. Google’s guidelines ask for a square icon (larger than 48×48 is recommended), declared with a <link rel="icon"> tag on the homepage and crawlable by Googlebot — so do not block /favicon.ico or the PNG files in robots.txt. A change can take days or weeks to appear in search results because the icon is recrawled on Google’s own schedule, not when you deploy.
If a new favicon does not show up in your own browser, it is almost always caching: browsers keep favicons far longer than normal page assets. Open the icon URL directly (for example /favicon.ico) and hard-refresh it, test in a private window, or add a version query such as /favicon.ico?v=2 to the link tags. Also check the file really returns 200 from the site root and not a 404 page served with an HTML content type.
This page does not emit iOS App Store 1024 assets or Chrome extension 128 toolbar icons. Those are separate tools. Everything here stays in the browser.
Related tools
These free tools pair well with this page — open them in a new tab to finish your workflow.
Frequently Asked Questions
How do I convert an image to favicon.ico?
Drop a logo or photo on this page, then click Download favicon.ico. The file is a multi-size ICO (16, 32 and 48 px) you can put in your site root as /favicon.ico. Browsers request that path automatically; paste the HTML snippet into <head> as well so PNG and Apple icons are used on modern devices.
What files are in the ZIP?
favicon.ico (16, 32 and 48 PNG frames), favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180), android-chrome-192 and 512, plus html-snippet.txt and site.webmanifest. When the source is an SVG, text or an emoji, it also contains favicon.svg. Put everything in the site root and paste the snippet into your <head>.
Can I make a favicon from text or an emoji?
Yes. Switch to From text to type up to three letters with your own font style, colours and background shape, or From emoji to pick an emoji. You get the same ICO and PNG sizes plus a vector favicon.svg, and you can give the SVG different colours for dark mode.
Fill vs Fit?
Fill centre-crops to a square so the icon is edge-to-edge. Fit scales the whole image inside the square and pads the rest — transparent by default, or a colour you pick.
Do I need favicon.ico, favicon.svg, or both?
Ship both when you can. favicon.svg is sharp at any size and can switch colours in dark mode, and browsers that support SVG favicons (Chrome, Edge, Firefox) use it first. favicon.ico is still requested at /favicon.ico by older browsers, some crawlers and bookmark tools. The HTML snippet lists both in the right order.
What source size should I upload?
A square PNG of at least 512×512 (1024 is better) stays sharp at the large Android size. Upscaling a 64-pixel logo will look soft on 512.
Is the image uploaded?
No. Scaling and the ICO/ZIP packing run in your browser with the Canvas API. You can disconnect after the page has loaded.
What size should a favicon be?
There is no single size. favicon.ico should contain 16, 32 and 48 px frames; add a 180×180 apple-touch-icon.png for iOS home screens and 192 and 512 PNGs for Android and PWA installs. Design at 512 or larger and let the generator scale down, so every size comes from the full-resolution source.
Is this favicon generator free, and can I convert PNG to ICO without signing up?
Yes. It is free with no account and no watermark. Drop a PNG, JPG, WebP or SVG image (or type text or an emoji), download favicon.ico or the full ZIP, and repeat as often as you like.
Is this for iOS or Chrome extension icons?
No. This page is only the web favicon pack. Use App Icon Generator for iOS/Android store assets, and Chrome Extension Icon Generator for 16/32/48/128 toolbar icons.