To create a favicon from an image, decode a local PNG, JPEG, or WebP file in the browser, center-crop it to a square, render that square on a Canvas at each requested pixel size, and export each result as an image/png file with a matching rel="icon" HTML snippet. The whole pipeline runs in the current browser tab using the WHATWG-defined rel="icon" relationship, so no upload step is involved and the source image stays on the device. The challenge with creating a favicon from an ordinary image is that favicons are tiny: a browser tab icon is 16 pixels, a taskbar shortcut can be 32 or 48, and even a high-density bookmark surface rarely asks for more than 128. A busy logo or a wide landscape photo rarely survives that shrink without losing its subject. A predictable crop rule, a small fixed set of exact sizes, and matching markup lines are the three pieces that turn an everyday image into a deployable favicon set.
What the Source Image Needs to Be
The source you start with decides almost everything about the result. The tool accepts a static PNG, JPEG, or WebP file and rejects SVG, animated inputs, and any raster format outside that set so the browser can decode the pixels safely. The decoded image must also fall under the tool's safety limits: files up to 25 MB pass the size check, and decoded images over 40 million pixels are turned away before any output canvas is allocated. A 40-megapixel photo at 8000 by 5000 sits exactly at that ceiling; anything larger than that will not be processed, because compressed bytes on disk do not describe the memory the browser actually uses when it decodes the picture.
Composition matters as much as format. Because the tool takes the largest possible centered square from the source, the subject has to already be near the middle. Off-center logos, wide banners, and edge-heavy photos will have their important content sliced off before the resize even starts. When that happens, the right move is to crop the source first with an image cropper and feed a square version back in. If your image already has transparency that you want preserved, use a PNG or WebP source; JPEG sources begin with no transparent pixels, so the result will sit on whatever opaque background the decoder produces.
How the Center-Crop Rule Shapes Your Result
The center-cover crop is the rule that decides what part of your image survives into every output. For a landscape image, it cuts equal strips from the left and right edges until the picture is square. For a portrait image, it cuts equal strips from the top and bottom. A square source is not cropped at all, and that predictable rule is what makes the tool safe to use with logos, initials, and centered illustrations.
Consider a worked example. Suppose the source is 1000 by 600 pixels, a wide banner-style logo. The center-cover calculation picks a square region of 600 by 600 pixels centered on the 1000-pixel-wide source. The crop window starts at column 200 and ends at column 800, dropping 200 pixels from the left edge and 200 pixels from the right edge. The original aspect ratio was 5:3; the cropped region is exactly square, which is the only shape every favicon output accepts. If the source were 600 by 1000 pixels instead, the square would be 600 by 600, taken from rows 200 through 800. The same rule applies to every selected output size, because every requested favicon is rendered independently from the decoded source at its own natural dimensions. The preview thumbnail is convenient, but it is never reused for the larger downloads; each is a fresh Canvas draw.
How to Create a Favicon From an Image
Use the Favicon Generator to create favicon from image files in a small set of concrete steps. The whole flow stays inside one browser tab and never sends the source anywhere.
- Pick a PNG, JPEG, or WebP source whose main subject is near the center. A simple, high-contrast square logo or a centered initial gives the best result. Avoid edge-heavy photos and wide banners, because the center crop will cut them off before resizing.
- Select the square PNG sizes you need from 16, 32, 48, 64, 128, 256, and 512 pixels. You do not need to pick all of them; common browser tabs usually need 16 and 32, while high-density surfaces and bookmark bars are served well by 48 and 64.
- Generate the icons, inspect the preview, and download each requested file. Each link gives a file whose exact pixel dimensions are encoded in its filename, such as favicon-32x32.png. Open the 16 and 32 pixel files at 100 percent zoom and confirm the subject is still recognizable before you commit.
- Copy the matching rel="icon" HTML link snippets the tool produces, edit each href to match your real asset path, and paste the lines into the head of your page. Place every PNG file at the matching root path or update the href to the directory you actually uploaded them to.
When the source is rejected, convert it to a supported static raster format and try again. A malformed or unusually large file can also fail the browser's initial decode step before the tool's own limits even apply.
Choosing PNG Sizes That Match How Browsers Show Favicons
Different surfaces ask for different favicon sizes. The tool can produce any subset of seven exact dimensions, and matching each one to the place it will appear is the safest way to keep a tab icon sharp. The standard rel="icon" relationship and a type="image/png" declaration describe each link; the browser then picks the most appropriate resource it can render for a given surface. A size table makes the common pairings easier to scan.
| Output size | Typical surface | Why it helps |
|---|---|---|
| 16 x 16 | Classic browser tab | Smallest practical icon, must remain recognizable at near-pixel scale |
| 32 x 32 | High-density tab and bookmark bar | Default fallback on many desktop browsers when 16 is unavailable |
| 48 x 48 | Windows site shortcut and taskbar pin | Often the resolution asked for by Windows pinned shortcuts |
| 64 x 64 | High-density desktop surfaces | Crisper alternative to 48 on scaled displays |
| 128 x 128 | Bookmark icons and app switchers | Retains more detail for surfaces that scale the icon up |
| 256 x 256 | macOS pinned tabs and dense bookmark panels | Used where the OS shows a larger thumbnail in a side panel |
| 512 x 512 | Large desktop previews and source archive | Handy as the master copy that smaller outputs derive from |
The browser does the actual selection. Listing more sizes gives the browser more options to choose from, but the visible result in any given tab, bookmark surface, or operating system is browser-controlled behavior.
Reading the HTML Link Snippets the Tool Generates
Each generated file is paired with a standard HTML link line. The snippet uses the WHATWG-defined rel="icon" relationship, an explicit type="image/png" media type, a square sizes token that names the exact pixel dimensions, and a root-relative href. A typical pair looks like:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
Copy only the lines for files you actually placed on the site. If your files live in /assets/icons/ instead of the root, edit each href to reflect that path. The MDN rel icon reference documents the attribute set the tool emits, including the type and sizes syntax. Multiple icon links let the browser pick the most appropriate one, but the tool makes no promise about which size a particular browser or operating system will choose to display.
Verifying the Result Before You Publish
The smallest outputs are the easiest place for a problem to hide. Open the 16 and 32 pixel downloads at 100 percent and confirm the subject is still recognizable, because browser smoothing softens thin lines and tiny lettering as the image is downscaled. If transparency matters for your brand, check the result against both a light background and a dark background; pale edges and transparent halos can disappear on one and glow on the other. The tool preserves transparency already in a PNG or WebP source but cannot remove one from an opaque source.
After deployment, view source on the live page and confirm that the icon files actually load over the network. Clear site data or the browser cache if an old icon stays visible, because cached favicons survive a long time and can hide a fresh deploy. The full deployment side of that workflow is covered in a separate guide on setting up a favicon on a website, which walks through uploading the PNGs, pasting the link lines into the document head, and verifying the request paths.
The tool itself does not modify your site, upload your files, or confirm any production cache behavior. It only prepares the assets and markup; the rest of the publish step is yours.