How to create a favicon from your logo (sizes, format, and checklist)
Create a sharp favicon from an existing logo, choose the right SVG, PNG, and ICO sizes, and avoid details that disappear in browser tabs.
Quick answer
To create a favicon from a logo, use the most recognizable part of the mark, place it on a square canvas, remove tiny lettering, and test it at 16 and 32 pixels. Start with the favicon generator, then keep an SVG master plus PNG fallbacks for browsers and devices.
Choose the part of the logo that survives at small sizes
A wide wordmark usually becomes unreadable in a browser tab. Prefer a monogram, symbol, or single bold letter. Keep strong contrast and enough empty space around the mark. If the only source is a blurry image, vectorize the logo first so curves remain clean before downsizing.
| Source | Best favicon treatment | Common problem |
|---|---|---|
| Symbol plus wordmark | Use the symbol alone | Text becomes a dark line |
| Lettermark | Center one or two letters | Thin strokes disappear |
| Detailed illustration | Simplify to a silhouette | Small shapes merge |
| Transparent logo | Test on light and dark tabs | Edge contrast is too weak |
Build and export the favicon set
- Put the mark on a square 1:1 canvas.
- Use a transparent or intentional solid background.
- Inspect the result at 16, 32, and 48 pixels, not only while zoomed in.
- Export an SVG favicon when appropriate and PNG fallbacks such as 48, 192, and 512 pixels.
- Add the favicon link to the site head and keep its URL stable.
Google recommends a square favicon and says files larger than 48 by 48 pixels generally render better across surfaces. See the official Google favicon guidance for current search requirements.
Favicon quality checklist
- The main shape is recognizable at 16 pixels.
- No tagline or fine legal text remains.
- Transparent edges are clean.
- Light and dark browser themes both work.
- The file has a stable public URL and is crawlable.
- The SVG is optimized without removing its viewBox.
Frequently asked questions
What size should a favicon be?
Use a scalable master and test at 16 and 32 pixels. For Google Search, the icon must be square and at least 8 by 8 pixels; Google recommends a source larger than 48 by 48 pixels.
Should a favicon be SVG, PNG, or ICO?
SVG stays sharp and compact for modern browsers. PNG is a reliable fallback, while ICO can bundle legacy sizes. A practical set can include all three.
Can I use my full logo as a favicon?
Only if it remains recognizable at tab size. Most horizontal logos work better when reduced to their symbol or initials.