favicon-pwa

📁 manuelvillarvieites/n8n-and-claude 📅 1 day ago

总安装量

周安装量

#76602

全站排名

安装命令

npx skills add https://github.com/manuelvillarvieites/n8n-and-claude --skill favicon-pwa

Agent 安装分布

amp 1

cline 1

opencode 1

cursor 1

continue 1

kimi-cli 1

Skill 文档

Favicon & PWA Setup

Create favicon set and PWA manifest for professional web presence.

Workflow

Get brand colors from globals.css
Create/request favicon source (512×512 PNG or SVG)
Generate favicon variants
Create site.webmanifest
Add to app/layout.tsx

Required Files

Favicon Set

File	Size	Location
favicon.ico	16×16, 32×32, 48×48	app/favicon.ico
apple-touch-icon.png	180×180	public/apple-touch-icon.png
icon-192.png	192×192	public/icon-192.png
icon-512.png	512×512	public/icon-512.png

site.webmanifest

Create at public/site.webmanifest:

{
  "name": "[Business Name]",
  "short_name": "[Short Name]",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "[primary color from globals.css]",
  "background_color": "[background color from globals.css]",
  "display": "standalone",
  "start_url": "/"
}

Layout Integration

Add to app/layout.tsx metadata:

export const metadata: Metadata = {
  icons: {
    icon: '/favicon.ico',
    apple: '/apple-touch-icon.png',
  },
  manifest: '/site.webmanifest',
}

Checklist

favicon.ico created (multi-size)
apple-touch-icon.png created (180×180)
icon-192.png and icon-512.png created
site.webmanifest created with correct colors
Layout metadata updated
Favicon displays in browser tab

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台