| name | litsquare-favicon-project |
| description | Add or update project favicons using source frames exported from a project Figma file based on the Litsquare Favicon community scaffold. |
Litsquare Favicon Project Skill
Use this skill when working inside this project and the task involves favicons, app icons, web manifests, or head link tags.
Commands
npx litsquare-favicon generate
npx litsquare-favicon validate
Source Files
Duplicate or create a project Figma file from the community scaffold, replace the scaffold visuals with the project artwork, hide layers named safe-area guide and maskable safe-area guide, and put exported SVG files from that project file in litsquare-favicon/source.
For the browser favicon source, favicon.svg must use a full opaque square background with no rounded corners. Keep rounded corners only for app icon sources such as apple-touch-icon.svg, icon.svg, and icon-maskable.svg. If Safari or another browser shows a white halo/stroke around the tab icon, treat the browser favicon export as failed and re-export favicon.svg with a square opaque background.
Figma community file: https://www.figma.com/community/file/1650255256777018269
Required:
Optional:
icon.svgicon-maskable.svgapple-touch-icon.svgsafari-pinned-tab.svg
If guide lines are visible in any generated PNG, SVG, or ICO review output, treat the export as failed, re-export with safe-area guide and maskable safe-area guide hidden, and regenerate. Restore guide visibility in the working Figma file after export if you edited it directly.
Output Contract
The generated public files are:
public/favicon.icopublic/favicon.svgpublic/favicon-96x96.pngpublic/apple-touch-icon.pngpublic/icon-192.pngpublic/icon-512.pngpublic/icon-maskable-192.pngpublic/icon-maskable-512.pngpublic/site.webmanifest
Connect litsquare-favicon/head.html or the generated React FaviconLinks component to the app head.
