菜单
Use when implementing favicons, touch icons, web app icons, or browser tab icons — the full set of sizes and formats needed for modern browsers, iOS home screen, Android, and PWA manifests. Trigger when the user mentions favicon, icon, apple-touch-icon, manifest icons, or browser tab icon.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use when defining or auditing a product's written voice — the consistent personality across all UI copy. Covers voice vs tone, voice attribute definition, do/don't tables, and how to keep AI-generated copy on-brand. Trigger when the user mentions brand voice, tone of voice, writing style guide, copy guidelines, or product personality.
Use when auditing or reducing JavaScript and CSS bundle sizes, setting performance budgets, choosing lighter alternatives to heavy libraries, configuring tree shaking, code splitting, and lazy loading. Trigger when the user mentions bundle size, JavaScript size, tree shaking, code splitting, lazy loading, or performance budget.
Use when designing or auditing for color vision deficiency — ensuring that color is never the only visual signal, checking charts and status indicators, picking colorblind-safe palettes, and testing against deuteranopia, protanopia, and tritanopia simulations. Trigger when the user mentions color blindness, color vision, CVD, deuteranopia, protanopia, accessibility color, or color-only signal.
Use when planning content hierarchy, information density, content-first design, microcopy systems, or editorial patterns. Covers the content-before-design principle, content inventory, progressive disclosure, scannability, and content governance. Trigger when the user mentions content strategy, content hierarchy, information architecture, microcopy, or editorial design.
Use when designing or auditing cursor behavior — matching cursor shape to affordance, custom cursors, drag cursors, resize cursors, and the hover+cursor pairing rule. Trigger when the user mentions cursor, pointer, mouse cursor, drag cursor, or resize handle.
Use when designing, auditing, or implementing dark mode. Covers lightness inversion (not hue shift), elevation via lightness not shadow, surface stacking, contrast rechecking, and the prefers-color-scheme media query. Trigger when the user mentions dark mode, dark theme, night mode, theme toggle, or color scheme.
| name | canon-favicons |
| description | Use when implementing favicons, touch icons, web app icons, or browser tab icons — the full set of sizes and formats needed for modern browsers, iOS home screen, Android, and PWA manifests. Trigger when the user mentions favicon, icon, apple-touch-icon, manifest icons, or browser tab icon. |
Favicons are the smallest piece of branding and the most often botched. Modern browsers need multiple sizes, formats, and declarations.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
| File | Size | Format | Purpose |
|---|---|---|---|
favicon.ico | 32×32 (can embed 16×16) | ICO | Legacy browsers, bookmarks bar |
icon.svg | Scalable | SVG | Modern browsers (Chrome, Firefox) |
apple-touch-icon.png | 180×180 | PNG | iOS home screen |
icon-192.png | 192×192 | PNG | Android home screen, PWA |
icon-512.png | 512×512 | PNG | PWA splash screen |
SVG favicons can adapt to dark mode:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
rect { fill: #0a0a0a; }
@media (prefers-color-scheme: dark) {
rect { fill: #f5f5f5; }
}
</style>
<rect width="32" height="32" rx="4"/>
</svg>
{
"name": "My App",
"short_name": "App",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#0a0a0a",
"background_color": "#ffffff",
"display": "standalone"
}
theme_color affects the browser toolbar color on Android.
| Anti-pattern | Why it fails |
|---|---|
| Only a 16×16 favicon.ico | Blurry on retina, missing from home screens |
| Full logo crammed into 32px | Illegible |
| Transparent apple-touch-icon | Black background on iOS |
| No manifest for PWA | Missing home-screen icon on Android |
| favicon.png instead of .ico for legacy | Some browsers only check .ico |
| No SVG favicon | Missing dark-mode adaptation |
favicon.ico at 32×32apple-touch-icon.png at 180×180 (no transparency)manifest.webmanifest linked in <head>theme_color and background_color set in manifest