Favicon Generator
Generate every favicon a modern site needs from a single image: the 16, 32, and 48px browser-tab icons, a 180px Apple touch icon, and 192 and 512px Android and PWA icons. The tool takes the largest centered square of your image, so a rectangular logo is cropped evenly rather than squashed. Choose a square, rounded, or circular mask and an optional background color, then download each PNG and copy the HTML link tags. Everything runs in your browser with the Canvas API, so your image never leaves your device.
How to generate favicons
- Drop an image onto the drop zone or click to browse (a square logo works best).
- Pick a Shape: Square, Rounded, or Circle (Rounded is the default and adds soft corners).
- Set Background to Transparent, or switch it to Solid and choose a fill color with the picker.
- Review the six live previews from 16px up to 512px, each labeled with where it is used.
- Click Download all to save every PNG, or use a single tile's size button to grab just that one.
- Click Copy HTML and paste the link tags into your page's <head> section.
Examples
Centered-square crop of a wide image
A 1200x800 banner image
Largest centered 800x800 square (offset x=200, y=0), scaled to every icon size
The full generated file set
A 512x512 logo PNG
favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png
The HTML the Copy HTML button gives you
Click Copy HTML
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> plus the 16, 48, apple-touch and 192 tags
Frequently asked questions
Is my image uploaded anywhere?
No. Every icon is rendered in your browser with the Canvas API, and nothing is sent to a server. Your image, whether a private logo or a mockup, never leaves your device.
Do I get an .ico file?
No, and you no longer need one. Modern browsers read PNG favicons via <link rel="icon" type="image/png">, which is exactly what this tool produces along with the matching HTML.
What sizes and files are included?
Six PNGs: favicon-16x16, favicon-32x32 and favicon-48x48 for browser tabs, apple-touch-icon at 180px for iOS home screens, and android-chrome 192 and 512px for Android and PWA installs.
Why does the copied HTML not list the 512px icon?
The 512px file is referenced by a web app manifest for PWA installs and splash screens, not a plain <head> link, so it is generated as a file but left out of the pasted link tags.
What image should I use?
A square image at 512px or larger works best. The tool crops the largest centered square, so a wide or tall image loses its outer edges evenly rather than being stretched.
What do the Shape options do?
Square keeps the full crop, Rounded clips each icon with soft corners (a radius of 20 percent of the icon size), and Circle masks the icon to a perfect circle. The mask is baked into each PNG.
When should I turn on a solid background?
Use Solid when your logo has transparency that would look thin on a colored browser tab, or when a circle or rounded mask would otherwise show through. Leave it on Transparent to keep the original alpha.
Where do I put the files and HTML?
Upload the PNGs to the root of your site so that /favicon-32x32.png resolves, then paste the copied link tags inside the <head> of your pages. Hard refresh to clear the old cached icon.
Why does the tab still show my old favicon?
Browsers cache favicons aggressively. After deploying the new files, do a hard refresh, or open the icon URL directly once, and the tab should update on the next visit.
Learn more
- Favicon sizes and the HTML link tags explained
Which favicon sizes a modern site actually needs, what each PNG is for, and the exact link tags to paste into the head of your pages.
Related tools
Image Resizer
Resize images in your browser by pixels, percentage, or to fit a box. Lock the aspect ratio, choose PNG, JPEG, or WebP, and download. Nothing is uploaded.
Round Image Corners
Add rounded corners to an image and export a transparent PNG or WebP. Adjust the radius with a slider, in your browser. Nothing is uploaded.
Image Converter
Convert images to PNG, JPEG, or WebP in your browser. Flatten transparency onto a background, set quality, compare sizes, and download. Nothing is uploaded.
Add Border to Image
Add a colored border or frame around an image, with adjustable width and color. Live preview, runs in your browser, nothing uploaded.
AI Alt Text Generator
Generate accessible alt text for any image with AI, right in your browser. Copy clean alt text or a ready HTML img tag. Nothing is uploaded.
AI Background Remover
Remove the background from a photo automatically with AI, right in your browser. Get a transparent PNG or a solid color. Nothing is uploaded.