Favicon Generator Guide: From One Image to a Full Icon Set

Favicon Generator Guide: From One Image to a Full Icon Set

You have one logo file and a site that needs a small icon in a dozen places. A favicon generator turns that single image into the full set of sizes browsers, phones and app launchers expect. This guide walks through what each file does, how to produce them, and how to ship them without broken icons.

The icon is the smallest piece of branding you own. It appears in a browser tab, a bookmarks bar, a phone home screen and a search result. Get it wrong and your site looks unfinished. Get it right and it looks deliberate.

What a favicon actually is

A favicon is the small image associated with a website. Browsers show it in tabs, bookmarks and history lists. The name comes from "favorites icon," a term from the era when bookmarks were called favorites.

The modern favicon is not one file. It is a group of files in different formats and sizes. Each one serves a different surface:

• favicon.ico — the legacy file, still requested by older browsers and some feed readers
• favicon-32x32.png and favicon-16x16.png — standard browser tab sizes
• apple-touch-icon.png — the icon used when a page is saved to an iOS home screen
• android-chrome-192x192.png and android-chrome-512x512.png — Android home screen and splash icons
• site.webmanifest — a JSON file that tells Android which icons to use and what to name the shortcut

If any of these are missing, the browser falls back to a generic globe or a blank square. That fallback is what most visitors will see, so it matters more than it sounds.

Why one PNG is not enough

A single 512-pixel PNG scaled down by the browser often looks soft. Thin strokes disappear. Letterforms blur. A dedicated 16-pixel version, drawn or sharpened for that size, stays readable.

The reverse is also true. A 16-pixel icon stretched onto a phone home screen looks like a smudge. That is why the set exists.

How to generate a full icon set from one image

Follow these steps in order. The whole process takes a few minutes for a simple logo.

1. Start with a square source image. Use at least 512 × 512 pixels. A PNG with a transparent background works best. If your logo is wide, place it on a square canvas with padding.
2. Simplify for small sizes. Remove fine detail, thin outlines and small text. Anything under roughly two pixels at 16 × 16 will vanish or turn to noise.
3. Open a favicon generator. Upload your square image. The tool will produce the standard sizes in one pass.
4. Check the preview at 16 pixels. Most generators show a live preview. If the mark is unreadable there, adjust the source and re-upload.
5. Download the package. You should receive the ICO file, the PNG set, the Apple touch icon and a web manifest.
6. Upload the files to your site root. Placing them at the top level of your domain means browsers find them without extra configuration.
7. Add the link tags to your HTML head. Point to the ICO, the PNG sizes, the Apple icon and the manifest.
8. Clear your cache and test. Browsers cache favicons aggressively. Hard-refresh, or open the site in a private window, before deciding it is broken.

If you would rather keep everything in one place, the browser-based tools on this site run the same conversion locally, so the image never leaves your machine.

Choosing the right source image

The source image decides the quality of every size that follows. A few rules hold in almost every case.

• Square canvas, at least 512 × 512 pixels
• Transparent background if the icon will sit on varied backgrounds
• High contrast between the mark and its surroundings
• No text below roughly 10 percent of the canvas height
• Simple shapes over gradients and fine patterns

A monogram or a single geometric shape usually survives the shrink test better than a detailed illustration.

Which favicon sizes do you actually need?

For most websites, you need four core files: a 32 × 32 PNG for browser tabs, a 16 × 16 PNG for older displays, an Apple touch icon at 180 × 180, and a 192 × 192 and 512 × 512 PNG pair for Android. The legacy ICO file is still worth including for compatibility. Everything else is optional.

That set covers tabs, bookmarks, iOS home screens, Android home screens and web app manifests. If you also ship a progressive web app, add a maskable icon so Android can crop it into its shape system without cutting off your logo.

Do you need an ICO file in 2026?

Yes, but mainly for compatibility. Modern browsers accept PNG favicons, and many will ignore the ICO entirely. Some older browsers, feed readers and desktop shortcuts still request /favicon.ico by default. Shipping one costs almost nothing and prevents a 404 in your server logs.

An ICO file can hold several sizes in one container. A common choice is 16, 32 and 48 pixels. That lets the browser pick the best match instead of scaling.

How to make a favicon that stays readable at 16 pixels

Small-size legibility is the hardest part of the job. The 16-pixel icon is the one people see most, and it is the least forgiving.

A few adjustments make a real difference:

• Increase stroke weight. Lines that look bold at 512 pixels often look faint at 16.
• Cut the detail. Remove shadows, texture and secondary elements.
• Raise contrast. Use a light mark on a dark tile, or the reverse.
• Test on both themes. Check how the icon looks against a light and a dark browser theme.
• Avoid pure white on pure transparent. It disappears on light backgrounds.

If your logo cannot survive the shrink, consider a simplified mark for the icon and keep the full logo for the header. Many brands do exactly this.

Adding icons to your site

Once the files exist, the HTML is short. Place the files at your domain root and add the relevant tags to the <head> of every page.

<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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

The manifest file ties the Android icons together and sets the name shown under the home screen shortcut. Keep the paths absolute so they resolve from any page depth.

Common mistakes to avoid

• Uploading a non-square image and letting the tool stretch it
• Forgetting the Apple touch icon, which leaves a screenshot as the home screen image
• Pointing to files in a subfolder that gets blocked by a CDN rule
• Editing the icon and forgetting that browsers cache the old one for days
• Using a transparent background on a mark that is also light-coloured

Each of these produces the same symptom: a blank or generic icon. Work through them in order when something looks wrong.

Testing and troubleshooting

After deployment, open the site in a private window. Check the tab, then bookmark the page and check the bookmark bar. On a phone, add the site to the home screen and confirm the icon appears correctly.

If the icon does not update, the cause is almost always caching. Try a hard refresh, a different browser, or a query string on the file path. Server-side caching layers can also serve stale copies, so clear those too.

Browsers request /favicon.ico from the domain root by default. If you place the file elsewhere, you must declare it explicitly in the head.

Frequently asked questions

What size should a favicon be?

Use 512 × 512 pixels as your source image and let the generator produce the rest. The sizes you actually ship are 16 × 16 and 32 × 32 for browser tabs, 180 × 180 for iOS home screens, and 192 × 192 plus 512 × 512 for Android. A single oversized file scaled by the browser looks blurry.

Can I use a JPG for a favicon?

You can, but PNG is the better choice. JPG does not support transparency, so the icon will carry a solid rectangle behind it. That rectangle looks wrong on dark browser themes and on home screens that apply their own background. Use PNG with transparency unless the icon is a full-bleed square.

Why is my favicon not showing up?

The three usual causes are caching, a wrong file path, and a missing link tag. Browsers store favicons for a long time, so test in a private window first. Then confirm the file sits at the domain root and that your head section points to it. Check the network tab for a 404.

Do favicons affect SEO?

They are not a direct ranking factor. They do affect how your site appears in search results and browser tabs, which influences click-through and brand recognition. A missing or broken icon makes a result look less trustworthy next to competitors that have one.

Can I generate icons without uploading my logo?

Yes, if the tool runs in the browser. A client-side favicon generator processes the image on your own device, so nothing is sent to a server. That is the safer option for unreleased logos and client work under confidentiality.

Conclusion

A favicon generator turns one square image into the handful of files every browser and phone expects. Start with a clean 512-pixel source, simplify it for small sizes, generate the set, and wire it into your head section. Then test in a private window before you call it done. Do that and your site stops showing a generic globe in every tab.