Create a Favicon from Your Logo
Turn your logo into a perfect favicon for browser tabs, bookmarks, and home screen icons. Resize and optimize to all standard favicon sizes with a few clicks.
Free preview · No signup · ~10 seconds
Where Your Favicon Appears
One logo, three export sizes — each showing up in a different context on your users' devices.
Browser Tab
32×32 px · PNG or SVG
Icon only — no text at this scale
Apple Touch Icon
180×180 px · PNG
Shown when saved to iOS home screen
Add to Home Screen
PWA / Android Icon
192×192 px · PNG
Required in web manifest for PWAs
Why Your Favicon Matters
Your Most-Seen Brand Element
A favicon appears in every open browser tab, every bookmark, and every browsing history entry. Users see it far more often than your homepage — sometimes dozens of times a session. A missing or generic favicon (the browser default globe) reads as an unfinished website.
Wordmarks Don't Work at 32 px
The most common favicon mistake: shrinking a horizontal wordmark. At 32×32 pixels, any text becomes an unreadable blur. Use just the icon or symbol part of your logo — or a single bold initial if your logo is text-only. Legibility beats completeness at this size.
Three Sizes, Three Contexts
32×32 for browser tabs. 180×180 for Apple Touch — iOS uses this when someone saves your site to their home screen, where it sits next to native apps. 192×192 (and 512×512) for PWA manifests — required if you want "Add to home screen" to work on Android.
SVG Favicon for Retina Screens
Modern browsers support <link rel="icon" type="image/svg+xml"> — an SVG favicon scales perfectly on Retina and 4K displays without blurring. Export the SVG alongside your PNGs and reference both in your <head>. Browsers pick the best format they support.
Getting Favicons Right
Avoid full wordmarks
At 32×32 pixels, any text in a logo becomes an unreadable blur. Use just the icon or symbol part — or a single initial if your logo is text-only.
Crop tight before exporting
Extra whitespace around your icon eats into the already-tiny canvas. Crop close to the shape so it fills the square and stays visible at small sizes.
Add a background for light logos
A white or near-transparent icon disappears on light browser tabs. A solid brand-color background tile fixes this at every size.
Export 512×512 for PWAs
Progressive Web Apps require a 512×512 icon in the web manifest. It's the same crop — just export at the larger size before closing the session.
How to Create a Favicon from Your Logo
Upload your logo
Drag and drop your logo. Use your logo icon or symbol rather than the full wordmark.
Crop to square
Use the crop tool to create a 1:1 square aspect ratio centered on the key element.
Adjust colors
Optionally simplify colors for small-size legibility. Add a background if needed.
Export at favicon sizes
Export at 32x32px, 180x180px, and 192x192px for complete favicon coverage.
Create a Favicon from Your Logo — in the editor
The real editor, start to finish — no signup needed to try it yourself.
Free preview · No signup · ~10 seconds
Favicon Size Requirements
Browser Tab (32x32)
The classic favicon size for browser tabs. Must be recognizable at this tiny size.
Apple Touch (180x180)
Used when users add your site to their iPhone or iPad home screen.
Android Icon (192x192)
Required for Android home screen shortcuts and Progressive Web Apps.
Bookmark Icon (48x48)
Displayed in browser bookmark lists and reading lists at a slightly larger size.
Or just ask
Describe the edit in your own words
Type what you want changed and the assistant does it on the canvas — each step lands as a layer you can reopen, so nothing it does is baked in.
No edits yet.
Frequently Asked Questions
You'll want these too
Related Tools
Guides worth reading
How to Change a Logo Color in Figma (4 Methods, Step by Step)
A complete guide to recoloring a logo in Figma — the Fill row, the Selection colors panel that swaps one hex everywhere at once, the clipped-rectangle trick for placed PNGs, and why the export panel has no WebP.
How to Make a Vector Logo (and When You Actually Need One)
What vector really means, the three honest routes from where you are now, when auto-tracing works, and how to check the result is genuinely vector.
SVG vs PNG for Logos: Which File Do You Actually Need?
What SVG and PNG really are, where each one wins, why your developer keeps asking for the SVG, and the three files that cover almost every request.
Ready to Create Your Favicon?
Upload your logo and get browser tab, Apple Touch, and Android icon sizes in one session. Simplified logo, correct dimensions, background handled.