Favicon Generator
Turn any image into a complete favicon package — PNG, ICO and install code
6 favicon files will be generated
Preview
HTML install code
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="shortcut icon" href="/favicon.ico">
Favicon Generator — Complete Guide & Instructions
MakeCard Favicon Generator turns any logo image into a complete favicon package for your website. It produces six standard files — 16×16 and 32×32 PNG icons, a 180×180 Apple touch icon, 192×192 and 512×512 Android icons, plus a real favicon.ico — bundled in a ZIP with ready-made HTML link tags. Square PNGs with transparency give the crispest results.
How to Use Favicon Generator
- 1 Drop or select a square image — PNG with transparency works best.
- 2 Preview the generated icon strip at all sizes.
- 3 Copy the HTML install code shown in the dark code block for your site's <head>.
- 4 Press Download favicon-package.zip and extract the files to your site root.
Key Features & Capabilities
- Six standard files generated at once: 16, 32, 180, 192, 512 px PNGs plus favicon.ico.
- Center square-crop with white background fill for clean touch icons.
- Live preview strip showing how the icon looks at each size.
- Copy-paste HTML link tags included for instant installation.
- README.txt inside the ZIP explains where every file goes.
- Accepts PNG, JPG, WebP, and SVG source images.
Supported Formats & Specifications
| Parameter | Specification |
|---|---|
| Input | PNG, JPG, WebP, or SVG image (square recommended) |
| Output | favicon-package.zip — 5 PNG sizes + favicon.ico + README |
| Install | Standard <link rel="icon"> tags for browsers and touch devices |
Practical Everyday Use Cases
- Adding a site icon for a new website or blog.
- Creating Apple and Android touch icons for a web app.
- Updating an old favicon.ico to modern multi-size format.
- Packaging client logo icons for website handover.
Pro Tips for Best Results
- Use a simple, bold logo — fine detail disappears at 16×16 pixels.
- Transparent PNGs look best on browser tabs; solid icons get a white background automatically.
- Place the extracted files in your site root so the default /favicon.ico path works everywhere.
Common Problems & Solutions
The source image was not square — the tool center-crops to a square, so trim your logo to a square first for full control.
Browsers cache favicons aggressively — hard-refresh (Ctrl+F5) or clear the browser cache after uploading new files.
Privacy & Security
100% Client-Side Execution
Your logo image is processed on-device with canvas and zipped locally — it is never uploaded or stored.
Frequently Asked Questions
Everything you need to know about using Favicon Generator
Upload a square logo image, press Download, and extract the ZIP to your site root — the package includes every size plus the HTML code to paste in your <head>.
Modern sites need 16×16 and 32×32 for tabs, 180×180 for Apple touch, and 192/512 for Android — this generator creates all of them plus favicon.ico.
favicon.ico is the legacy multi-purpose icon browsers request by default; PNG icons are higher-quality versions referenced via link tags — the package provides both.
Fine detail vanishes at 16 px — use a simplified logo mark or a single letter for the sharpest result.
Related FreeToolsBazaar Tools
Ready to Use Favicon Generator?
100% free, browser-based, and private. No installation, registration, or file upload to external servers required.
Start Using Favicon Generator