How to Create a Favicon for Free Online
A favicon is the tiny icon that appears in browser tabs, bookmarks, and search result favicons. Getting it right — at multiple sizes, without blurriness — matters more than it looks. This guide shows you how to generate a complete favicon set from any logo image, entirely in your browser, with no paid tools or accounts required.
What You'll Need
- A square PNG, JPG, or GIF image of your logo or icon — at least 64×64 pixels, ideally 512×512 or larger
- Any modern browser (Chrome, Firefox, Safari, Edge)
- No software to install
Step-by-Step Instructions
Prepare your source image
Start with a square PNG image. Favicons are small — 16×16 is the smallest size — so simple, bold shapes work far better than intricate designs. If your logo has text, consider using just the icon or first letter at favicon size. A transparent background is ideal so the favicon adapts to browser UI colors.
Open the Favicon Generator
Go to the Favicon Generator tool. Your image is processed entirely in your browser using the HTML5 Canvas API — it's never uploaded to a server.
Upload your image
Click the upload area or drag and drop your source image. A preview appears immediately. The generator accepts any image format the browser can render: PNG, JPG, GIF, WebP, SVG.
Preview all four sizes
Four size previews are shown: 16×16 (browser tab), 32×32 (Windows taskbar), 48×48 (desktop shortcut), and 64×64 (high-DPI displays). Check the 16×16 preview especially — if your logo loses recognizability at that size, consider simplifying the design.
Download your favicons
Click Download All Sizes to download all four PNG files in one go. Or click an individual size button to download just that size. Files are named favicon-16.png, favicon-32.png, etc.
Add the favicon to your website
Place the PNG files in your site's root directory (alongside index.html). Then add these link tags to your HTML head: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
PNG Favicons vs. favicon.ico — Which Should You Use?
The traditional favicon.ico file is an ICO-format container that can hold multiple sizes in one file. All modern browsers (Chrome, Firefox, Safari, Edge) also support PNG favicons directly and prefer them.
- PNG favicons — simpler to generate and manage. Use for new projects. Fully supported by all modern browsers.
- favicon.ico — still useful for legacy IE compatibility and as a fallback for browsers that look for favicon.ico at the root automatically. You can generate one using online ICO converters if needed.
- SVG favicons — supported in modern Chrome and Firefox. An SVG favicon is infinitely scalable. Add
<link rel="icon" type="image/svg+xml" href="/favicon.svg">alongside your PNG fallbacks.
Is My Image Uploaded?
No. The Favicon Generator uses the HTML5 Canvas API to draw your image at each size and export it as a PNG data URL — all within your browser tab. Your image file is never transmitted to any server. Close the tab and it's gone.