How to Create a Favicon From Your Logo (Free ICO & PNG Pack)
Generate favicon.ico, Apple touch icon, and Android icons from one image. Free browser tool, no design software. Ship a complete icon set in minutes.
June 2, 2026 · 3 min read · Developer Tools
Tabs, bookmarks, and home-screen shortcuts all use tiny icons. A missing or blurry favicon looks unfinished. Favicon Generator turns one logo into the full set browsers expect. Use our free Favicon Generator - no Photoshop, no upload to a cloud server.
What you get in a complete favicon pack
| File | Typical use |
|---|---|
| favicon.ico | Legacy browsers, root /favicon.ico requests |
| favicon-16x16.png | Browser tabs |
| favicon-32x32.png | High-DPI tabs |
| favicon-48x48.png | Windows site pins |
| apple-touch-icon.png | iOS home screen (180x180) |
| android-chrome-192x192.png | Android / PWA manifest |
One ZIP with consistent branding beats a single 16px file stretched from a screenshot.
Step 1 - Prepare your source image
- Square canvas - add padding if the mark is wide; do not rely on automatic circular crops.
- Simple shapes - fine details vanish at 16px; simplify if needed.
- High resolution - 512px minimum, 1024px ideal.
- PNG preferred for transparency.
Need to square it first? Image Cropper with 1:1, then Image Resizer to 512px.
Step 2 - Generate icons
- Open Favicon Generator.
- Upload your logo.
- Click generate.
- Download the ZIP.
Preview in the tool if available. Check that the 32px icon is still recognizable.
Step 3 - Add to your website
Place files in public/ (or site root). Minimum HTML in <head>:
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
For PWAs, reference icons in site.webmanifest. Convert Freely sites often use /site.webmanifest plus PNG icons in /media/favicon/.
Next.js App Router shortcut
You can place icon.png or favicon.ico in /app and Next generates tags. For full control (Apple + Android sizes), keep explicit files in public/ and link them in layout.tsx.
Testing
- Hard refresh (cache holds favicons aggressively).
- Chrome DevTools > Application > Manifest / Icons.
- iOS: Add to Home Screen and check the icon.
- Bookmark bar on desktop at 100% and 200% zoom.
Dark mode and colored tabs
Some browsers tint tab backgrounds. Logos with thin lines may need a heavier weight or a circular background plate in the source file. Test on both light and dark browser chrome.
When to also export SVG
SVG favicons are supported in modern browsers (rel="icon" type="image/svg+xml"). Raster packs still matter for Apple touch and older clients. SVG + ICO combo is a strong setup.
Conclusion
Upload once, download the pack, wire up <link> tags, clear cache and verify. Favicon Generator is free and local. For related workflows see Image Tools and Developer Tools.
Frequently asked questions
- What size should my source logo be for favicons?
- At least 512x512 pixels, square. Larger sources (1024px) produce sharper 16px and 32px results. Avoid tiny logos upscaled from 64px.
- What files do I need for a modern website?
- favicon.ico in the site root, favicon-32x32.png, apple-touch-icon.png (180x180), and optional android-chrome-192x192.png for PWA manifests.
- Can I use a JPG logo?
- Yes, but PNG with transparency is better for non-square logos on colored browser tabs. JPG adds a white box if your logo is not square.
- Where do I put favicon files in Next.js or static sites?
- Static sites: /public folder. Next.js App Router: /app/icon.png or files in /public with link tags in layout. Browsers check /favicon.ico by default.
- Does the generator upload my brand assets?
- Convert Freely's Favicon Generator runs in your browser. Your logo is not sent to our servers.