A favicon is a small square icon, usually 16x16, 32x32, or 48x48 pixels, that browsers display in tabs, bookmarks, and address bars to identify a website at a glance. Generating a favicon from an image means taking one local picture (a logo, a letter mark, or a simplified brand graphic) and exporting it as a set of square PNG files sized for every place a browser or mobile home screen expects an icon. The standard workflow involves picking a centered source image, choosing which square sizes you actually need, downloading each PNG, and then copying the matching HTML link snippets into your site head so browsers and devices know where to find each file.
Most websites still ship a single favicon.ico file, but modern browsers and devices ask for many sizes at once. A 16x16 icon suits browser tabs, 32x32 covers high-DPI tabs and bookmark bars, 180x180 powers the iOS apple-touch-icon, and 192x192 plus 512x512 feed Android home screens and progressive web app manifests. Generating each size from the same source image keeps every appearance of your brand looking consistent. That is exactly the kind of job the Favicon Generator is built for: feed it one local image and it produces selectable square PNG favicons plus the matching HTML icon links.
Why a Dedicated Favicon Generator Beats Manual Resizing
You can resize an image with a full editor and save each size by hand, but the easy-to-miss part is the HTML. Each favicon size needs its own link tag in the document head, with the correct rel attribute and a type that matches the file. The link for a 32x32 PNG is different from the link for a 180x180 apple-touch-icon, and a wrong rel attribute can leave the icon invisible in Safari or Android home screens. A purpose-built favicon tool pairs each PNG with the link snippet already written for you, which removes the most common cause of broken favicons.
Another advantage is privacy and speed. Many online favicon sites upload your image to a remote server before processing it, which can be a concern for unreleased logos or private mockups. A browser-based tool keeps the file local, so generation happens entirely on your device and nothing is sent over the network. You also avoid waiting on upload times, which matters when you are iterating on a logo and need to regenerate after each tweak.
| Favicon size | Typical use | Matching HTML rel attribute |
|---|---|---|
| 16x16 | Classic browser tab | icon |
| 32x32 | High-DPI tab, bookmark bar | icon |
| 48x48 | Windows site icon, pinned tabs | icon |
| 180x180 | iOS apple-touch-icon | apple-touch-icon |
| 192x192 | Android home screen, PWA | icon (used in manifest) |
| 512x512 | PWA splash, high-res Android | icon (used in manifest) |
Pick the Right Source Image Before You Start
Favicons are tiny, so the source image has to be designed with that in mind. Pick a PNG, JPEG, or WebP file where the main subject sits near the center with enough padding around it, because the corners will be cropped or padded when the image is squared off. A square logo on a transparent background is the ideal input, but a centered photograph of a product or a bold letter mark on a solid color also works well. Avoid busy compositions or text that gets unreadable at 16x16, since browsers will shrink the icon down to that size for tabs.
Resolution matters as much as composition. A 256x256 source image can be downscaled to 16x16, 32x32, and 48x48 without visible softness, and it can also feed the larger 180x180 and 192x192 sizes used by mobile devices. If your starting image is smaller than 128px on a side, upscale it in a separate step first or the result will look blurry. The Image Resizer can help you upscale to a clean square if you need to enlarge a low-resolution logo before generating the favicon set.
Generate the Favicon Files Step by Step
- Open the Favicon Generator in your browser. No login or account is required, and the tool runs locally so your image is not uploaded.
- Click the upload area and pick a PNG, JPEG, or WebP file from your device. Make sure the main subject is centered, with breathing room around the edges so nothing important gets cropped at small sizes.
- Select the square PNG sizes you want to produce. A common starter set is 16x16, 32x32, 48x48, and 180x180, which covers browser tabs, high-DPI tabs, Windows pinning, and iOS home screens in one pass.
- Click generate. The tool will create each selected size as its own square PNG and display a preview so you can confirm the framing looks correct at the smallest dimensions.
- Inspect each preview by hovering or zooming where the tool allows. Pay particular attention to the 16x16 version, since it is the harshest test of your source design.
- Download each PNG to your project, typically into an images or icons folder at the root of your site so the file paths stay simple.
- Copy the matching HTML link snippets the tool provides for every size you generated. Each snippet already contains the correct rel attribute and sizes or type declaration.
- Paste the snippets inside the head section of every page that should show the favicon. Most static sites only need them on the index template, but a single-page app or marketing site can paste them into a shared partial.
- Reload your site in a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) to bypass cached favicons, then check the browser tab to confirm the new icon appears.
Where Each Favicon Size Shows Up
Knowing where each icon lands helps you decide which sizes are worth generating. The 16x16 is the legacy size that still shows up in compact tab strips and old browser themes, while 32x32 has quietly become the default for high-DPI tabs and bookmark bars. The 48x48 size is what Windows uses for pinned site tiles and taskbar shortcuts, and it doubles as a clean fallback for any browser that asks for a slightly larger icon.
Mobile platforms have their own conventions. Apple devices look for a 180x180 apple-touch-icon to render the glossy icon used when a site is added to the home screen. Android home screens and progressive web apps pull 192x192 and 512x512 sizes from a web app manifest, but having those PNGs available in your icons folder makes the manifest file easier to write. Generating all of these from a single source image keeps the brand consistent, no matter which surface is rendering it. If you want a deeper walkthrough that covers edge cases like Safari pinned tabs and dark mode favicons, the related guide How to Generate a Favicon from Any Image is a useful follow-up read.
Common Pitfalls When Generating Favicons from Images
The most common mistake is using a non-square source image and assuming the tool will preserve the original aspect ratio. Most favicon generators will crop or letterbox your input to a perfect square, which can crop out a logo positioned in the top-left or stretch a wide banner. Always preview the smallest size first, because a logo that looks fine at 180x180 can become unrecognizable at 16x16 when fine lines merge into noise.
A second pitfall is file format. Some older tutorials still recommend saving favicons as .ico files, but modern browsers handle PNG favicons without any extra work, and PNG keeps your export pipeline simpler. A third issue is forgetting the cache: browsers aggressively cache favicons, sometimes for days, so a new icon may not appear even after you update the HTML. A hard refresh, an incognito window, or a cache-busting query string on the icon path will usually force the browser to fetch the new file.
Pairing Favicon Generation With Other Image Prep
If your source image is a large photograph or a layered export, you will often need to prep it before favicon generation. A heavy JPEG with embedded color profiles can balloon the file size of every exported icon, so running it through the Image Compressor first trims the payload without changing visible pixels. When your source is a vector or layered design, exporting a clean square PNG through the SVG to PNG Converter keeps edges crisp and avoids JPEG artifacts in the final icons.
Once the favicon set is live, you might also want to crop screenshots of your new tab for documentation or social posts. The Image Cropper is a quick way to isolate just the tab strip from a browser screenshot. None of these steps are required, but they keep the surrounding workflow consistent with the same all-in-the-browser approach the Favicon Generator uses.
Verifying the Favicon After Deployment
After you paste the HTML link snippets into your site and redeploy, open the live URL in a fresh incognito window on a desktop browser. The tab should show the new icon within a second or two. If the icon does not appear, double-check that the file paths in the copied snippets match the actual folder structure on your server and that the files were uploaded in binary mode rather than text mode, which can corrupt PNG headers. For deeper troubleshooting, the MDN documentation on link tags explains every accepted rel value and how browsers interpret them.
You can also test mobile surfaces by using the Add to Home Screen option in Safari on iOS and the Install Site option in Chrome on Android. Both will read the apple-touch-icon and the web app manifest respectively, so make sure those link tags point to the 180x180 and 192x192 PNGs the Favicon Generator produced. If everything lines up, your logo will appear consistently from the desktop tab strip to the phone home screen, all generated from one local source image.