Create a Complete Favicon Set from a Single Image
A favicon is the small icon that represents your website in browser tabs, bookmarks, history lists, and on phone home screens. It is a tiny detail with outsized impact: a site without one looks unfinished, and browsers print an ugly default globe in its place. The complication is that “a favicon” is actually a family of files — different browsers and devices look for different sizes and formats. This generator takes care of all of it: load one square-ish image, and it produces the full modern set in your browser, with no upload and no design skills required.
What the Generator Produces
- favicon.ico — the classic multi-size ICO file (16, 32 and 48 pixels in one file) that every browser since the dawn of the web understands.
- favicon-16x16.png and favicon-32x32.png — crisp PNGs for modern browser tabs.
- apple-touch-icon.png (180 × 180) — used when someone adds your site to an iPhone or iPad home screen.
- icon-192.png and icon-512.png — the sizes Android and web-app manifests expect.
- Ready-made HTML — the exact
<link>tags to paste into your page's<head>.
How to Use It
- Upload a square image, ideally 512 × 512 pixels or larger. PNG with transparency works best; JPG is fine too.
- Preview the generated sizes — pay special attention to the 16-pixel version, which is what most people will actually see in a tab.
- Download the files individually, or grab them all one by one — each button saves a correctly named file.
- Copy the HTML snippet and paste it inside your site's
<head>section. - Upload the files to your website's root directory (or wherever the snippet's paths point).
Design Advice for Icons That Survive 16 Pixels
The most common favicon mistake is shrinking a detailed logo and hoping for the best. At 16 × 16 pixels there is room for roughly one bold shape: a single letter, a simple symbol, or a distinctive silhouette on a solid background. Thin lines disappear, small text becomes noise, and gradients turn to mud. If your full logo is complex, crop its strongest single element with the Image Cropper first, give it generous padding-free framing, and use high contrast between the shape and its background. Test the result by looking at the 16-pixel preview from arm's length — if you can still tell what it is, it works.
Privacy and Practical Notes
Everything is generated client-side with the Canvas API; your logo never leaves your device, which matters for unreleased brands. The ICO file is built in the modern PNG-embedded format, accepted by all current browsers and operating systems. Non-square source images are center-cropped automatically to prevent distortion, so check the preview and pre-crop yourself if the automatic framing cuts something important. Once installed, favicons are cached aggressively by browsers — if you replace yours and still see the old one, force-refresh or append a version query string to the link tags. Five minutes of work here permanently upgrades how professional your site looks in every tab, bookmark bar and home screen it appears on.
Frequently Asked Questions
What size image should I upload?
A square image of at least 512 × 512 pixels gives the best results, since that is the largest size generated. Smaller images still work but may look soft at the bigger sizes. Transparent PNGs are ideal.
Do I really need the .ico file in 2026?
It is still the safest baseline. Older browsers, some search engines and various tools request /favicon.ico directly. The generated ICO uses the modern PNG-embedded format, which all current software accepts.
My logo is rectangular — what happens to it?
The generator center-crops the image to a square before scaling, so nothing gets stretched. If the automatic crop cuts off something important, crop the image yourself first with the Image Cropper tool.
I replaced my favicon but browsers still show the old one. Why?
Browsers cache favicons very aggressively. Do a hard refresh (Ctrl+F5), clear the site data, or add a version parameter like ?v=2 to the favicon link tags to force the update.