Favicon Generator
DesignCreate custom favicons from your image with real-time preview and export.
Discussion
Join the discussion
Sign in to share your thoughts and engage with the community.
About this tool
What is the Favicon Generator?
A favicon is the small icon that appears in a browser tab next to the page title, in bookmark lists, on the home screen when a site is saved as a web app, and in browser history. It's a small asset with significant impact on how polished and professional a site feels.
Modern browsers and devices expect favicons in multiple sizes — 16×16, 32×32, 180×180 for Apple touch icons, and 192×192 for Android home screen shortcuts, among others. The Favicon Generator takes a single image and produces all the required sizes, along with the HTML snippet to embed them.
How to Use the Favicon Generator
- Upload your image. Drag and drop a PNG, JPG, or SVG file onto the upload area. A square image works best — the tool will crop or scale non-square inputs.
- Customize the appearance. Adjust padding, background color, and corner radius. These controls let you add breathing room around a logo, set a background for transparent PNGs, and create rounded icon styles.
- Preview in real time. The preview panel shows how your favicon looks at each size as you adjust the settings — useful for catching detail loss at small sizes (16×16 and 32×32 are very small).
- Export your files. Download individual size files or a ZIP bundle containing all sizes. The HTML snippet is included so you can drop the correct
<link>tags directly into your<head>.
Required Favicon Sizes
Different contexts require different sizes. The generator produces the full set:
| Size | Use |
|---|---|
| 16×16 | Browser tab (standard) |
| 32×32 | Browser tab (high-DPI), taskbar shortcut |
| 48×48 | Windows site icon |
| 96×96 | Google TV, desktop shortcut |
| 180×180 | Apple touch icon (iPhone, iPad home screen) |
| 192×192 | Android home screen shortcut |
| 512×512 | PWA splash screen, app store listing |
Integrating the Favicon
Add the generated HTML snippet to the <head> section of every page on your site — or into your layout template if you're using a framework:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Upload the generated image files to the root of your site (or your /public folder in Next.js, Nuxt, etc.) so the paths resolve correctly.
Tips for Best Results
Start with a high-resolution image. A minimum of 256×256 pixels gives the generator enough detail to scale down cleanly. SVG is ideal since it's resolution-independent.
Keep it simple. Favicons are tiny. Complex logos with fine detail, thin lines, or small text become unreadable at 16×16. Simplify or use an icon mark rather than a full wordmark.
Use padding for logos with dark backgrounds. Adding a few pixels of padding prevents the icon from appearing to bleed to the edge of the browser tab.
Privacy
Your image is processed locally in your browser. Nothing is uploaded to any server — the file never leaves your device.