Favicon Generator

How to use these favicons on your website

Download each PNG size below, upload them to your website's root folder (or wherever your site references icons from), then paste the generated HTML snippet into the <head> section of your site's pages. Different sizes are picked up by different browsers, devices, and home-screen contexts including all of them gives the most complete coverage across platforms.

What a favicon actually is

A favicon (short for "favorite icon") is the small square image that represents a website it shows up in browser tabs, next to bookmarks and browser history entries, in search results on some browsers, and as the icon when a site is saved to a phone's home screen. It's a small detail, but a missing or broken favicon makes a site look unfinished, and it's one of the easiest visual branding touches to get right.

Why generate so many sizes

This tool outputs six sizes because no single size works everywhere: 1616 and 3232px cover browser tabs and bookmark bars, 4848px is used by some Windows site shortcuts, 180180px is Apple's required size for the home-screen icon when a page is saved on iOS, and 192192px and 512512px are the sizes Android and Chrome use for home-screen icons and PWA install prompts. Skipping a size doesn't break a site, but the icon may look blurry or fall back to a generic default in that context.

What size source image should I start with?

Start with a square image at least 512512px that lets every generated size scale down cleanly. Smaller or non-square source images will be cropped to a centered square and upscaled for larger favicon sizes, which can look soft or pixelated at 180px and above.

FAQ

Do I need the classic .ico file?
Modern browsers support PNG favicons directly, so a 3232 or 1616 PNG referenced with a <link rel="icon"> tag works in virtually all current browsers; .ico is mostly a legacy requirement from Internet Explorer.

Is my image uploaded anywhere?
No every size is generated locally in your browser using the HTML canvas element. Your source image never leaves your device.

Why does my favicon still show the old icon after I upload the new one?
Browsers cache favicons aggressively. Try a hard refresh, clear the site's cached data, or add a version query string to the icon URLs (like favicon-32x32.png?v=2) to force browsers to fetch the new version.

Do I need every size this tool generates?
No the 1616, 3232, and 180180 (Apple touch icon) sizes cover the vast majority of real-world use. The 192192 and 512512 sizes matter more if your site is installable as a Progressive Web App.

Can I use a non-square image?
You can upload one, but it will be cropped to a centered square before being resized, which may cut off content near the edges. For predictable results, start with a square image.