Generate a favicon from an image
Drop a logo, PNG or SVG and get a square favicon.ico — cropped from the center, transparency intact, up to 256×256 — built entirely inside your browser.
Your images
Settings
Generated images
- Nothing uploaded
- Free, no sign-up
- Strips EXIF
- Batch files
Your site is live, you open it in a new tab, and next to the title sits Chrome's gray globe — or Safari's blank-page glyph — instead of your logo. Open DevTools and the console spells it out: GET /favicon.ico 404. Every browser asks for that file on its own, and until it exists the tab, the bookmarks bar and the history list all show the placeholder.
This page turns the logo you already have into that file. Give it a PNG, JPG, WebP or SVG; it keeps the largest square from the center, scales it down to 256×256 if it was bigger, wraps the result as a PNG-compressed entry inside a .ico and hands the file back. Transparent backgrounds stay transparent, and the icon is assembled by script on your own machine — there is no server in the loop.
One .ico is enough for the tab, but a complete setup also wants a 180 px PNG for iPhone home screens and 192 and 512 px PNGs for Android and installable web apps. The sections below cover which sizes each browser reads, when to publish PNG or SVG instead of ICO, and the exact <link> lines to paste into your <head>.
How it works
The format bar opens on ICO and the square crop is already applied, so the whole job is three clicks and a rename.
Add the logo
Drop the file on the page, choose it with the button or paste it from the clipboard. A PNG with transparency is the ideal source; an SVG is rasterized on the spot, and a JPG works but comes out as an opaque square tile.
Check the settings panel
ICO is preselected and the crop is fixed at 1:1, taken from the center of the image. The quality slider is disabled and reads lossless, because the PNG entry inside an ICO has no compression level to set.
Generate, then rename the download
Press Generate images and read the pixel size on the result card — 256×256 for any source at least that large. Download it, rename it to favicon.ico and upload it to the root folder of your site, next to index.html.
What ends up inside the .ico
The file holds exactly one image: a 32-bit PNG stream with alpha, sized to the center square of your source and capped at 256 pixels per side. A 1200×630 social banner becomes its middle 630×630 and then 256×256; a 64×64 sprite stays 64×64, because nothing is ever enlarged. Every current browser opens this PNG-in-ICO layout; only very old Internet Explorer versions expected uncompressed entries.
It is not a multi-resolution icon with separately drawn 16, 32 and 48 px layers packed together. Browsers do not need those to draw a tab: they resample the single entry to whatever size they display. Hand-tuned pixel art at 16 px is a job for an icon editor, not a converter.
Transparency survives, so a dark mark on a clear background vanishes in a dark-theme tab strip — give it a solid disc or a light outline first. PNG to ICO uses the same engine, aimed at Windows shortcuts rather than websites.
Which sizes browsers actually read
A tab on a standard display draws the icon at 16×16; on a Retina or other 2× screen it asks for 32×32. Bookmarks and history stay in that same 16–32 range. Google Search shows the favicon next to your results and requires a crawlable square of at least 8×8, recommending anything above 48×48 — the 256 px entry here clears that comfortably.
- 16×16 and 32×32 — tab, bookmarks, history; served from favicon.ico or a PNG declared in the head
- 180×180 PNG — apple-touch-icon, the Add to Home Screen icon on iPhone and iPad
- 192×192 and 512×512 PNG — Android home screen and the install prompt of a progressive web app, listed in manifest.json
- SVG, any size — modern Chrome, Edge and Firefox tabs, sharp at every zoom level
PNG, ICO or SVG for the tab icon?
You can publish one, two or all three. Browsers pick the <link> entry they support and ignore the rest, so listing SVG, PNG and ICO together costs nothing.
| Format | Where it works | Transparency | Best for |
|---|---|---|---|
| favicon.ico | Every current browser; found at /favicon.ico with no tag | Yes (PNG entry) | The safe default — what this page makes |
| PNG | Every current browser, via <link rel="icon"> | Yes | Exact 32×32 or 48×48 files, touch icons, manifest icons |
| SVG | Chrome, Edge, Firefox, Opera; Safari falls back to the PNG or ICO | Yes | Logos that must stay crisp at any zoom; can carry a dark-mode style inside the file |
The <link> tags to paste into your <head>
A favicon.ico in the root folder needs no HTML at all: browsers request /favicon.ico by convention whenever the page does not declare an icon. Declaring it anyway lets you add the SVG alternate and the touch icon. The minimal set for a small site:
- <link rel="icon" href="/favicon.ico">
- <link rel="icon" href="/icon.svg" type="image/svg+xml">
- <link rel="apple-touch-icon" href="/apple-touch-icon.png">
- <link rel="manifest" href="/manifest.json"> — where the 192 and 512 px PNGs are listed
Frequently asked questions
Where do I put the file after downloading it?
Rename it to favicon.ico and upload it to the root of your site, so it answers at yoursite.com/favicon.ico. Browsers request that exact path on their own; another name or folder works too, but then it has to be declared with a <link rel="icon"> tag.
Does the .ico contain 16×16 and 32×32 versions as well?
No — one PNG entry, up to 256×256, that browsers scale down to 16 or 32 px on the fly. If a platform demands an exact 32×32 file, switch the format bar to PNG, set the width to 32 on Resize image, and link that PNG directly.
My logo is wide, not square. What gets cut off?
Everything outside the largest centered square: a 1600×400 header keeps only its middle 400×400. If the mark sits off-center, press Crop on the image card here — the box is already locked to 1:1 — drag it over the mark and generate again.
Can I generate the favicon from an SVG?
Yes. The SVG is drawn to pixels in your browser, cropped square and written into the .ico. Keep the original SVG too — modern browsers can use it directly as a favicon through a second <link> tag, and it stays sharp at any zoom.
Why does the tab still show the old favicon after I replaced it?
Favicons are cached longer than almost anything else on a page. Open yoursite.com/favicon.ico in the address bar, hard-refresh it (Ctrl+Shift+R, or Cmd+Shift+R on a Mac), then reload the page — or check in a private window. Search results change only after Google re-crawls your home page, which takes days.
Do I also need an apple-touch-icon?
For iPhone and iPad users who add your site to the home screen, yes: a 180×180 PNG with a solid background, since iOS fills transparency with black. Switch the format bar to PNG, generate the square here, then resize it to 180 px.
Is my logo uploaded to build the favicon?
No. Your browser opens the image, crops the square and writes the ICO bytes itself, then offers the result as a download — there is no server step and no upload to wait for.
Will Google show this favicon in search results?
Yes, once the basics are met: a square icon (this page's output always is), a stable URL, one icon per host, and both the file and your home page crawlable by Googlebot. Google recommends anything larger than 48×48, so the 256 px entry qualifies.