Favicon Generator.

Each size exists because a specific surface across browsers and devices expects it, and together they cover everywhere your icon appears. The 16 by 16 pixel icon is the classic browser tab favicon, the tiny mark beside the page title. The 32 by 32 version is the higher-resolution tab icon for retina and high-density displays, so it stays crisp rather than blurry. The 48 by 48 size serves the Windows taskbar and desktop shortcuts. The 192 by 192 icon is what Android uses when someone adds your site to their home screen. The 512 by 512 icon is the large asset for the Progressive Web App splash screen when your site launches like an app. By generating all of these at once, the tool spares you hunting down each requirement separately and ensures your brand mark looks sharp whether it shows up in a 16-pixel tab or a full-screen splash, with no fuzzy upscaling anywhere. Just download the set and reference each size in your page head.

You no longer need the old favicon.ico format, which is why this tool emits modern PNGs at every size instead. Historically, favicon.ico was a special multi-resolution file browsers looked for by default, and it is still supported, so an existing .ico will not break anything. But modern browsers now happily read PNG favicons referenced in your HTML, and PNGs are simpler to create, easier to preview, and support cleaner transparency, which is why the recommended setup is a set of PNG icons at the standard sizes rather than a single packed .ico. The PNGs this tool produces are exactly that recommended setup, ready to link in your page head and reference from a web manifest. So you can comfortably skip the .ico file for a new site. The only time you might still want one is compatibility with a very old system that insists on .ico, in which case you can convert a PNG, but for nearly all sites today the PNG set is enough.

Upload the generated PNG icons to your website so they sit alongside your pages, then add the link tags in the head that point your pages at them. The exact location depends on your platform. On a static site, the conventional spot is the root or public directory, the same place your homepage HTML lives, so the icons resolve at simple paths. On WordPress, you typically add a site icon through the Customiser, place the files in your theme folder, or let an SEO plugin handle the favicon for you. On Neweb, drop them into your site media and link them, or use the built-in site icon setting if available. The two things that matter are that the files are publicly reachable on your domain, and that your page head includes the link rel icon tags pointing at the right sizes, plus an apple-touch-icon for iOS. Once both are in place, browsers and devices pick up the correct icon for each context automatically.

Yes, usually, because browsers cache favicons very aggressively, often holding on to an old icon long after you have replaced it, which is why people frequently panic that their new favicon is not working when in fact it uploaded fine. The fastest way to confirm the new icon is live without fighting the cache is to open a private or incognito window and load your site there, since that session ignores your normal cache and shows the icon as a fresh visitor would. If it looks correct in private browsing, the upload succeeded and your everyday browser is simply showing a stale copy. To clear that, hard-refresh the page, clear your browser cache, or visit the favicon file directly by its URL to force a reload. New visitors see the updated icon immediately since they have nothing cached. So if it does not appear at first, check a private tab before re-uploading, as the cache is almost always the culprit.

Yes, the generated icons work with Safari and iOS, with one detail to set up correctly. For an iPhone or iPad, the key asset is the apple-touch-icon, which is what iOS uses when someone taps Add to Home Screen and your site gets a rounded app-style icon. The 192 by 192 PNG from this set works well for that, and you reference it with a link rel apple-touch-icon tag in your page head so iOS knows which image to use; without that tag, iOS may fall back to a blurry screenshot of your page, which looks unprofessional. iOS will also accept a higher-resolution apple-touch-icon if you provide one, keeping the home-screen icon crisp on high-density Apple displays. Safari on desktop reads the standard PNG favicons for tabs just like other modern browsers. So as long as you include the apple-touch-icon link tag pointing at a suitable square PNG, your brand mark appears cleanly across Safari tabs and on the iOS home screen.

Not yet from this tool, though it is on the roadmap. A web manifest, the site.webmanifest file, is a small JSON file that ties your icons together and tells Android how to treat your site as an installable Progressive Web App: it points at the 192 by 192 and 512 by 512 PNGs, sets your app name, theme colour and display mode, and enables the Add to Home Screen experience with a proper splash screen. This tool currently focuses on producing the icon set itself at the right sizes, and a manifest generator is planned for a future iteration. In the meantime, the icons you download here are exactly the ones a manifest would reference, so you can create a simple manifest by hand or with any free generator, listing those two PNGs and your app details, then link it from your page head with a link rel manifest tag. That gives Android users the full installable experience until the built-in generator arrives.

Only indirectly, but it is a small, genuinely free win worth taking. A favicon is not a ranking factor, so adding one will not directly push your pages up the results. However, Google does display your favicon next to your listing in mobile search results, so a clean, recognisable icon makes your entry look more established and trustworthy at a glance, which can lift your click-through rate by a couple of percentage points compared to the blank default. Over many impressions, that small CTR gain quietly sends you more traffic for the same rankings, and click-through is one of the signals that supports SEO over time. Beyond search, a proper favicon makes your site look finished and professional in browser tabs, bookmarks and home-screen shortcuts, reinforcing your brand at every touchpoint. So while a favicon will not move rankings on its own, treating it as part of basic site polish captures a free presentation benefit for a few minutes of work.

A favicon has to be square, so a wide wordmark logo will not work as-is and needs adapting first, because squashing a rectangular logo into a square frame leaves it stretched or shrunk to the point of being illegible at 16 pixels. You have two good options. The first is to crop your logo to a square that captures a strong, recognisable part of it, often the icon, the monogram, or the first initial, using any image editor before you generate the set. The second, and what most established brands do, is to maintain a separate icon-only mark for small square spaces, a simplified symbol or a single letter that reads clearly even when tiny, distinct from the full horizontal logo used in your header and on signage. That square mark then serves as your favicon, your app icon and your social profile picture. So rather than forcing your wordmark into a square, prepare a clean square version first, then bring it here to generate the sizes.