← 返回 Skills 市场
kostja94

favicon-generator

作者 Kostja Zhang · GitHub ↗ · v1.0.1 · MIT-0
cross-platform ✓ 安全检测通过
226
总下载
0
收藏
0
当前安装
2
版本数
在 OpenClaw 中安装
/install favicon-generator
功能描述
When the user wants to implement, optimize, or audit favicon and app icons. Also use when the user mentions "favicon," "app icon," "browser icon," "touch ico...
使用说明 (SKILL.md)

Components: Favicon

Guides favicon and app icon implementation for brand consistency across browser tabs, bookmarks, mobile home screens, and Google Search results. Favicons help users identify sites; missing or incorrect icons hurt trust.

When invoking: On first use, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.

Initial Assessment

Check for project context first: If .claude/project-context.md or .cursor/project-context.md exists, read it for brand and visual identity.

Identify:

  1. Tech stack: Next.js, WordPress, static HTML, etc.
  2. PWA: Is the site a PWA or planning to be?
  3. Existing assets: Logo, icon files

Required Sizes

Size Use
16x16 Browser tabs, standard displays
32x32 Retina/HiDPI browser tabs
180x180 Apple Touch Icon (iOS home screen); no transparency
192x192 Android Chrome home screen, PWA launcher
512x512 PWA splash screens, adaptive icons

Optional: 48x48, 96x96, 120x120, 152x152, 167x167, 256x256 for broader coverage.

Formats

Format Use
SVG Modern browsers; scalable; supports dark mode via media queries; lightweight
PNG High-DPI; explicit sizes; easy to generate; required for Apple Touch Icon
ICO Legacy; bundles multiple sizes; fallback for older browsers

Recommended: Provide SVG + PNG fallbacks. Never skip Apple Touch Icon (180x180); iOS shows a generic screenshot without it.

Google Search (SERP Display)

See serp-features for SERP feature types and optimization.

Favicons can appear in Google Search results next to your site's listings. Google Search Central requirements:

Requirement Guideline
Placement Add \x3Clink rel="icon" href="/path/to/favicon.ico"> to homepage header
One per hostname One favicon per hostname; example.com and code.example.com are separate; example.com/sub-site shares the same favicon
Crawlability Googlebot-Image must crawl favicon; Googlebot must crawl homepage; do not block either in robots.txt
Shape Square (1:1 aspect ratio); minimum 8x8px; preferably >48x48px for quality across platforms
Stable URL Do not change favicon URL frequently
Appropriate No inappropriate content (pornography, hate symbols); Google may replace with default icon
Timing Crawling can take days to weeks; use Search Console URL Inspection to request indexing

Supported rel values: icon, shortcut icon, apple-touch-icon, apple-touch-icon-precomposed. href can be relative (/favicon.ico) or absolute; favicon can be hosted on CDN.

Implementation

HTML Link Tags

\x3Clink rel="icon" href="/favicon.ico" sizes="any">
\x3Clink rel="icon" href="/icon.svg" type="image/svg+xml">
\x3Clink rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
\x3Clink rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Next.js

Place in /app: favicon.ico, icon.png, apple-icon.png. Next.js auto-generates tags.

PWA Manifest

Include icons array in manifest.json with 192x192 and 512x512 for maskable icons.

Best Practices

  • Simplicity: At 16x16, complex details are illegible; use simplified logo mark; design for brand recognition in SERPs
  • Consistency: Favicon should match logo/brand (logo-generator, brand-visual-generator)
  • Cache: Use long cache; version for updates (e.g. /favicon.ico?v=2)
  • Tools: RealFaviconGenerator, favicon.io, or favicons npm package for automation
  • Test: Check across browsers, dark mode, and Search Console (favicon may take days to weeks to appear)

Output Format

  • Size checklist (16, 32, 180, 192, 512; >48x48 for Google Search)
  • Format recommendations (SVG, PNG, ICO)
  • Implementation notes per tech stack (homepage header placement)
  • Google Search checklist (crawlability, stable URL, appropriate content)
  • Manifest (if PWA)

Related Skills

  • logo-generator: Favicon typically derived from logo; consistent branding
  • media-kit-page-generator: Media kit should include favicon or link to brand assets
  • brand-visual-generator: Visual identity; favicon aligns with brand colors and mark
  • indexing: Favicon requires crawlable homepage; URL Inspection for indexing
安全使用建议
This skill is an instruction-only helper for favicon and app-icon implementation and appears coherent with that purpose. Before installing or invoking it: be aware that it may read project context files (.claude/project-context.md or .cursor/project-context.md) to tailor advice — if those files contain sensitive data you don't want the agent to read, remove or redact them first. The skill may recommend external tools; verify any third-party tool or npm package before running it. No credentials or system installs are required by the skill itself.
功能分析
Type: OpenClaw Skill Name: favicon-generator Version: 1.0.1 The skill bundle provides comprehensive documentation and instructions for an AI agent to assist users with favicon and app icon implementation. It contains no executable code, and the markdown instructions in SKILL.md are strictly aligned with the stated purpose of optimizing web assets for browsers and search engines without any signs of malicious intent or prompt injection.
能力评估
✓ Purpose & Capability
Name/description (favicon/app-icon guidance) matches the SKILL.md content: sizes, formats, implementation notes, and SERP guidance are all appropriate and expected. No unrelated credentials, binaries, or installs are requested.
✓ Instruction Scope
Runtime instructions are focused on favicon implementation: checking project context files (.claude/project-context.md or .cursor/project-context.md), identifying tech stack, PWA status, assets, and producing tag/manifest suggestions. Reading project-context files is reasonable for brand-specific advice and is the only repository-file access requested.
✓ Install Mechanism
No install specification and no code files — the skill is instruction-only, so nothing will be written to disk or downloaded. This is the lowest-risk install posture.
✓ Credentials
The skill requests no environment variables, credentials, or config paths. Its guidance mentions third-party tools (e.g., RealFaviconGenerator, favicons npm) but does not attempt to install or require access to unrelated services or secrets.
✓ Persistence & Privilege
always is false and the skill is user-invocable; disable-model-invocation is default (false) meaning the agent could call it autonomously — this is the platform default and not combined with other red flags here, so risk is low.
如何使用
  1. 确保已安装 OpenClaw（本地或 Docker 部署）
  2. 在对话框中输入安装命令：/install favicon-generator
  3. 安装完成后，直接呼叫该 Skill 的名称或使用 /favicon-generator 触发
  4. 根据 Skill 的参数说明提供必要输入，即可获得结构化输出
版本历史
v1.0.1
Batch: referral-program through logo-generator
v1.0.0
Automated batch sync
元数据
Slug favicon-generator
版本 1.0.1
许可证 MIT-0
累计安装 0
当前安装数 0
历史版本数 2
常见问题

favicon-generator 是什么？

When the user wants to implement, optimize, or audit favicon and app icons. Also use when the user mentions "favicon," "app icon," "browser icon," "touch ico... 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 226 次。

如何安装 favicon-generator？

在 OpenClaw 或 Claude Code 对话框中运行命令「/install favicon-generator」即可一键安装，无需额外配置。

favicon-generator 是免费的吗？

是的，favicon-generator 完全免费，采用 MIT-0 许可证，可自由下载、安装和使用。

favicon-generator 支持哪些平台？

favicon-generator 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。

谁开发了 favicon-generator？

由 Kostja Zhang（@kostja94）开发并维护，当前版本 v1.0.1。

推荐 Skills
self-improving agent
Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Clau...
⬇ 463283 · by pskoett
Skill Vetter
Security-first skill vetting for AI agents. Use before installing any skill from ClawdHub, GitHub, or other sources. Checks for red flags, permission scope, and suspicious patterns.
⬇ 259410 · by spclaudehome
Polymarket
Query Polymarket prediction markets. Check odds, find trending markets, search events, track price movements.
⬇ 232503 · by joelchance
Self-Improving + Proactive Agent
Self-reflection + Self-criticism + Self-learning + Self-organizing memory. Agent evaluates its own work, catches mistakes, and improves permanently. Use when...
⬇ 200423 · by ivangdavila
Github
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
⬇ 191115 · by steipete
ontology
Typed knowledge graph for structured agent memory and composable skills. Use when creating/querying entities (Person, Project, Task, Event, Document), linkin...
⬇ 190156 · by oswalpalash

💬 留言讨论