Favicon & App Icon Generator

What’s a favicon, and what do you actually do with these files?

The short version: a favicon used to mean one small icon in a browser tab. It now means a whole kit of icon sizes for browser tabs, phone home screens, and app-install prompts — which is why one image in turns into a dozen files out.

What a favicon actually is

It's the small icon next to your page's title in a browser tab, in someone's bookmarks or browser history, and in a Google search result next to your listing. On a phone, the same idea covers the icon that appears if someone adds your site to their home screen, and the icon shown while a "progressive web app" install prompt is deciding what to show. None of that happens automatically — a browser only shows an icon if it finds one at a handful of expected filenames or is told where to look, which is exactly what this tool and the snippet below take care of.

What each file is actually for

• favicon.ico — the original favicon format, and still the one some older browsers and tools look for by default. This tool bundles the 16, 32, and 48px sizes into one .ico file.
• favicon-16x16.png / favicon-32x32.png — what modern browsers actually use for the tab icon; sharper than the .ico on today's screens.
• apple-touch-icon.png — the icon iOS uses when someone adds your site to their home screen, and for Safari's pinned/tab-switcher previews.
• android-chrome-192x192.png / android-chrome-512x512.png — the icons Android and Chrome use for a home-screen shortcut or an "Install app" prompt.
• site.webmanifest — a small JSON file that tells Android/Chrome your site's name, theme color, and which of the icons above to use when someone installs it.
• mstile-150x150.png + browserconfig.xml — the tile Windows shows if a site is pinned to the Start menu. Legacy at this point, but still checked by Edge on Windows, so it's included for completeness.

Where the files go, and what to do with the snippet

1. Unzip the download and upload every file inside straight into your site's root folder — the same place as your homepage (index.html), not a subfolder. The snippet below points at paths like /favicon.ico, and that leading slash means "the root of the site," so it'll only find the files if that's where they actually are. If you'd rather keep them in a subfolder (e.g. /icons/), that's fine too — just edit each path in the snippet to match before you paste it in.
2. Copy the Paste into <head> snippet this tool generates and paste it into the <head> section of every page on your site — or, if your site is built from a shared template or include, just the one file that already generates every page's <head>.
3. Upload both the icon files and the updated page(s), then reload your site with a hard refresh (Ctrl/Cmd + Shift + R). Favicons are cached aggressively by browsers, so an ordinary refresh — or even closing and reopening the tab — can still show the old one for a while.
4. To actually check it worked: look at the browser tab itself, or view the page's source and confirm the icon links are there and pointing at files that really exist at those addresses. On a phone, try "Add to Home Screen" and confirm the right icon shows up.