Favvy
ファビー
Progressive Web Apps need more than a single favicon—they require a full icon set plus a manifest that defines names, colors, and sizes. Favvy handles all of that inside Figma. I design the base icon, run Favvy’s PWA preset, and export a package that drops straight into the web repo.
All required sizes covered
Favvy outputs launcher icons, splash screen assets, maskable versions, and the standard favicon sizes in one go. It also generates manifest.json with the correct references, so developers don’t have to guess file paths.
Keep branding tight
Because I’m working in Figma, I can align the PWA icons with the rest of our design system. Favvy applies padding, background colors, and radius adjustments consistently across the entire set.
Shipping a PWA icon set
- Design the icon at a large resolution.
- Launch Favvy, select the PWA option, and tweak metadata (app name, theme color, etc.).
- Download the zip and hand it to engineering—they get icons plus manifest ready to deploy.
It’s the fastest way I’ve found to get PWA requirements checked off the launch list.
Bonus coverage
Favvy also produces maskable icons, which Android requires for the best-looking homescreen shortcuts. Many teams forget about this until QA flags it; with Favvy’s preset you never miss it.
Tips for collaboration
- Store the exported manifest alongside your design tokens so developers can compare theme colors easily.
- Annotate the Figma frame with instructions for when to rerun the preset (e.g., after seasonal color swaps).
- Use Favvy’s naming options to match your build pipeline without manual renaming.
PWA icon work stops being a chore once Favvy handles the heavy lifting.