How to Create a Favicon for Your Website (Sizes and Code Included)

A favicon is the tiny icon next to your page title in a browser tab, in bookmarks, and in search results. It is small, but it signals that a site is finished and trustworthy. Creating one properly takes only a few minutes.

Start with the right source image

Your favicon source should be:

• Square. Non-square images get stretched or cropped awkwardly.
• At least 512 × 512 pixels. Larger gives you room to sharpen the smallest sizes.
• Simple. Tiny icons cannot show fine detail or small text. A single strong shape reads best.
• Transparent where useful. A transparent PNG or SVG lets the icon sit cleanly on any browser theme.

If you only have a wide logo, crop it to a square around the most recognizable mark first — you can do that with the crop tool.

The sizes that matter

File	Size	Purpose
favicon.ico	16, 32, 48 px	Legacy browsers, some apps
favicon.svg	Vector	Modern browsers, scales cleanly
favicon-32.png	32 × 32	Standard browser tabs
apple-touch-icon.png	180 × 180	iOS home screen
icon-192.png / icon-512.png	192 / 512 px	Android and PWA manifest

You do not need all of these for a simple site, but a solid modern set is: an SVG, a 32 px PNG, and a 180 px Apple touch icon, plus a small .ico for older tools.

Generate the files

1. Prepare one large square image — ideally 512 × 512 or larger, usually a PNG or SVG.
2. Generate the icon set. Open the Imgsprint favicon generator, drop in your image, and pick the sizes you want. It produces PNG icons in your browser and can assemble a .ico.
3. Preview at real size. Look at the smallest output (16 or 32 px). If it turns to mush, simplify the source: fewer colors, bolder shapes, more space around the mark.

Add the files to your site

Put the files in the root of your site (or a public/ folder that is served from the root). Then add these tags inside <head>:

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

And a minimal web app manifest to cover Android and installable apps:

{
  "name": "Your Site",
  "short_name": "Site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#0d9488",
  "background_color": "#ffffff"
}

Test it

• Hard-refresh your site. Browsers cache favicons aggressively; a private window is the quickest way to see the new one.
• Check the tab, bookmarks, and a search result. They can pull different sizes.
• Look at it in both light and dark themes if you use a transparent icon.
• Validate the manifest if you added one, so installable apps show the right icon.

Common mistakes

• Using a huge photo. Favicons are icons, not images. Simplify aggressively.
• Only providing a 16 px file. It will look blurry on high-density screens.
• Relying on a single format. SVG plus PNG plus .ico covers essentially everything.
• Forgetting the Apple touch icon. iOS does not use your regular favicon for home-screen shortcuts.
• Bold text in the icon. It becomes unreadable below about 48 px.

Make it part of your build

If you use a framework, treat the favicon as a build asset sourced from one master file so you never hand-edit nine PNGs again. Generate the set once, commit it, and reference it from your HTML head and manifest. Then your tab icon stays sharp everywhere, on every device.