Favicon Generator Online Free — Create All Favicon Sizes Instantly
The free Favicon Generator takes any uploaded image and produces all eight standard favicon sizes — from 16×16 to 512×512 px — as PNG files, alongside a ready-to-paste HTML snippet. No software, no upload, no signup required.
What Is a Favicon and Why Does It Matter
A favicon (short for “favorites icon”) is the small image displayed in a browser tab, the browser bookmarks list, the Windows taskbar for pinned sites, and the iOS or Android home screen when a user saves your site as a shortcut. It is one of the first visual elements a returning visitor associates with your brand — and one of the easiest to get wrong.
The problem is that different platforms request different sizes. A browser tab needs 16×16 or 32×32. iOS home screens need 180×180. A Progressive Web App (PWA) manifest requires 192×192 and 512×512 for Chrome and Android. Serving a single 32×32 image to all platforms results in a blurry icon on high-resolution screens and a missing icon on PWA installs. A favicon generator solves this by producing every required size from a single source image.
How to Use the Favicon Generator Online
- Open the Favicon Generator.
- Drop your source image onto the upload zone or click to browse. A square PNG or SVG with a transparent background gives the best results across all sizes — non-square images will be stretched to fill each square canvas.
- Click Generate Favicons. The tool renders your image to eight canvases using the browser's Canvas API, one for each size.
- Download individual sizes using the per-card Download button, or click Download All to save all eight PNG files in sequence.
- Copy the HTML snippet and paste it inside the
<head>of your site. Update the file paths to match where you placed the PNG files in your project.
Favicon Size Reference — All 8 Standard Sizes
| Size | Platform / use case | Recommended filename |
|---|---|---|
| 16×16 | Browser tab (standard density), bookmarks bar, browser history | favicon-16x16.png |
| 32×32 | Browser tab (HiDPI / Retina), Windows taskbar, most modern browsers | favicon-32x32.png |
| 48×48 | Windows site icon tiles, Windows taskbar pinned sites | favicon-48x48.png |
| 64×64 | Windows site icons in Start Menu / task switcher | favicon-64x64.png |
| 128×128 | Chrome Web Store listings, some browser extensions | favicon-128x128.png |
| 180×180 | Apple Touch Icon — iOS “Add to Home Screen” shortcut | apple-touch-icon.png |
| 192×192 | Android home screen shortcut, PWA manifest icon (required) | android-chrome-192x192.png |
| 512×512 | PWA splash screen, Chrome “Add to Home Screen” prompt (required) | android-chrome-512x512.png |
Preparing Your Source Image
Use a square image
All favicons are square. If your source image is not 1:1, the generator stretches it to fill each canvas — a landscape logo becomes squeezed horizontally; a portrait image becomes wider than intended. Crop your image to a 1:1 ratio first using the Image Cropper, then feed the square result into the favicon generator.
Choose PNG with transparency over JPEG
A JPEG source has a solid background (usually white). At 16×16, that white square is very visible against dark browser themes. A PNG with a transparent background lets the browser tab colour show through, producing a cleaner result. If your logo is only available as a JPEG, consider adding a solid brand-colour background — a white or solid-colour square often looks more intentional than a rough transparent edge.
Keep the design simple
At 16×16 px, a detailed logo with thin lines or small text becomes an unreadable blob. Favicons work best when they represent a single bold element: one letter, a simple geometric mark, or a solid icon. If your full logo is too complex, create a simplified monogram or symbol variant specifically for favicon use. Resize a preview of your candidate to 16×16 before generating to check legibility at the smallest size.
Source resolution matters less than you think
The Canvas API scales your source image to each target size using bilinear interpolation, so any resolution above 512×512 is overkill — though it does no harm. A 512×512 or 1024×1024 PNG is ideal. Very small source images (under 64×64) scaled up to 512×512 will look pixelated at the larger sizes, so start with at least a 256×256 source.
Where to Place Your Favicon Files
Standard HTML sites
Place all PNG files in the root of your web server (alongside index.html), then paste the HTML snippet into every page's <head>. Browsers also check automatically for a file named favicon.ico at the root — placing a copy of your 32×32 PNG there (renamed to .ico) covers older browsers without an explicit link tag.
Next.js App Router
In Next.js 13+, the recommended approach is to place favicon.ico, apple-icon.png, and icon.png directly inside the app/ directory. Next.js picks them up automatically and injects the correct link tags. For more granular control, export an icons field from your app/layout.tsx metadata object pointing to each file in /public. Pair your favicon with a Meta Tag Generator to complete your site's head configuration.
Vite and other build tools
Place favicons in the /public folder. Files in /public are copied verbatim to the build output root, so paths like /favicon-32x32.png resolve correctly in production without any import statements.
Common Questions
Do I need a .ico file or are PNG favicons enough?
Modern browsers — Chrome, Firefox, Safari, Edge — all support PNG favicons. The .ico format is primarily required for Internet Explorer 11 and older versions. If you need IE compatibility, rename your 32×32 PNG to favicon.ico and place it at the root. For all other browsers, PNG is the preferred format and produces sharper results at higher pixel densities.
Why does the favicon not update after I deploy new files?
Browsers aggressively cache favicons, often for weeks. After deploying new favicon files, open a new browser tab and navigate to your site URL with a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac). In Chrome, you can also open DevTools, right-click the refresh button, and select “Empty Cache and Hard Reload.” Appending a cache-busting query string to the href in your link tag (e.g. href="/favicon-32x32.png?v=2") forces a re-fetch on next page load.
Which sizes are required for a PWA?
A valid PWA manifest requires at least a 192×192 and a 512×512 icon. Chrome uses 192×192 for the home-screen shortcut and 512×512 for the install splash screen. The Lighthouse PWA audit flags a missing 512×512 as a failure. Both icons should be referenced in your manifest.json under the icons array with purpose: "any maskable" for Android adaptive icon support.
What is a maskable icon?
Android adaptive icons crop the icon into a shape chosen by the device (circle, squircle, rounded rectangle). A maskable icon has “safe zone” padding — the key content is kept within the central 80% of the image so it is not clipped by the device shape. If you want full maskable support, ensure your logo is centered with sufficient padding in the source image before generating. Standard favicons without this padding will still work on Android but may be cropped at the edges.
Is my image stored on a server?
No. All processing uses the Canvas API in your browser. Your image is never uploaded, transmitted, or stored anywhere. The tool works offline once the page has loaded.
Generate Your Favicons Now
Upload a square image, click Generate, and download all eight sizes with the HTML snippet — free, no upload required.
Open Favicon Generator