Quick Start
Design a favicon and export Web Assets in a few minutes.
This path gets you from a blank editor to files in your project. Skip steps you already know.
1. Pick a motif
Choose one of three motif types in the editor:
- Icon — search Lucide icons (rocket, star, zap, …)
- Text — one to four characters with a Google Font
- Custom — sign in to paste or upload your own SVG vector
Start simple: solid background, single-color motif, no effects.
2. Check small sizes
Readability problems show up at 16px and 32px, not at 512px.
- Increase padding until the motif has breathing room.
- Glance at the small previews in the editor.
- Open Previews from the header (or
⌘K→ Previews) for browser and size mockups.
If it does not read small, add contrast and padding before adding stroke, glow, or shadow.
3. Export Web Assets
- Open Export (
⌘+Option+E/Ctrl+Alt+E). - Select Web.
- Download the ZIP.
Web Assets includes favicon.ico, icon.svg, PWA PNGs, apple-touch-icon.png, manifest.webmanifest, and a SETUP.md with install notes. If your design uses a built-in icon from Lucide, the ZIP may also include ATTRIBUTION.txt.
4. Install in your project
Copy the files into your site's public folder (for example public/ in Next.js or Vite).
Paste the <head> snippet from Web Assets or the included SETUP.md. At minimum:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">5. Verify in a real browser
- Hard refresh —
⌘+Shift+R/Ctrl+Shift+R. - Check the browser tab favicon.
- Open DevTools → Application → Manifest if you ship a PWA.
Favicons cache aggressively. Use a private window or ?v=2 on icon.svg while iterating.
What next?
| Goal | Doc |
|---|---|
| Understand every control | Editor Guide |
| Apply a curated starting look | Design Presets |
| Save work across devices | Saving & Accounts |
| Export one PNG instead of a bundle | Single-File Export |
| Something broke after install | Troubleshooting |