An expert utility for implementing, optimizing, and auditing favicons and app icons to ensure brand consistency across all platforms.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install favicon-generator
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install favicon-generator using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Favicon Generator?
The Favicon Generator is a specialized tool within the Openclaw Skills library designed to bridge the gap between brand identity and technical implementation. It guides developers through the complex landscape of browser icons, touch icons, and PWA assets, ensuring that a site looks professional whether it is viewed in a browser tab, bookmarked on a mobile home screen, or discovered in Google Search results.
This skill automates the assessment of your tech stack—supporting everything from Next.js to static HTML—and provides exact specifications for required sizes and formats. By leveraging this Openclaw Skills asset, developers can ensure their project meets modern standards, including high-DPI support and SVG dark mode compatibility, while strictly adhering to Google Search Central guidelines for favicon indexing.
Favicon Generator Use Cases
- Implementing a multi-format icon system (SVG, PNG, ICO) for a new web project.
- Auditing an existing site to fix missing Apple Touch Icons that cause generic screenshots on iOS.
- Optimizing site icons for Google Search results to improve CTR and brand trust.
- Setting up PWA manifest icons (192x192 and 512x512) for mobile home screen installation.
- Updating brand assets across a large site while managing browser caching and versioning.
How Favicon Generator Works
- Context Assessment: The skill checks for
.claude/project-context.mdor.cursor/project-context.mdto align with your existing brand and visual identity. - Requirement Identification: It analyzes your tech stack and PWA status to determine which specific files and tags are necessary.
- Size & Format Generation: The skill provides a roadmap for generating all critical assets, from 16x16 legacy favicons to 512x512 splash screen icons.
- SERP Optimization: It applies Google Search Central requirements to ensure the favicon is crawlable and properly formatted for search listings.
- Implementation Guidance: Provides copy-paste ready HTML, Next.js file structures, or manifest JSON code blocks tailored to your project.
Favicon Generator Setup
To begin using this skill within your AI environment, ensure your project context is defined. You can also utilize specific npm packages recommended by Openclaw Skills for automation:
# Example: Installing favicon automation tools
npm install favicons
# Recommended: Use realfavicongenerator for rapid asset creation
Simply invoke the skill by mentioning favicon, app icon, or PWA icon in your development prompts.
Favicon Generator Data Schema & Taxonomy
The skill organizes favicon implementation based on the following taxonomy:
| Asset Type | Standard Size | Primary Format | Requirement |
|---|---|---|---|
| Browser Tab | 16x16, 32x32 | SVG / PNG | Essential |
| Apple Touch | 180x180 | PNG | iOS Support |
| Android/PWA | 192x192, 512x512 | PNG | Home Screen |
| Legacy | Multi-size | ICO | IE/Fallback |
| Search Result | >48x48 | SVG / PNG | SERP Visibility |
It also generates standard file paths such as /favicon.ico, /icon.svg, and /apple-touch-icon.png for automatic discovery.
Favicon Generator Advanced Features
- SVG Dark Mode Support: Implementation of media queries within SVG icons to adapt to user system themes.
- PWA Maskable Icons: Support for safe-zone padding in adaptive icons for Android devices.
- Automatic Next.js Routing: Guidance on utilizing the Next.js Metadata API for zero-config icon hosting.
- Cache Busting: Strategies for implementing versioning (e.g.,
?v=2) to force browser updates when branding changes. - Search Console Integration: Workflow for using the URL Inspection tool to expedite favicon indexing.
SKILL.md
Loading
Related Openclaw Skills
Audio Script Writer
A professional transformation tool that converts dense medical and scientific text into structured scripts for podcasts, videos, and audiobooks.
Email Sequence Design
A professional framework for designing, writing, and optimizing automated multi-email flows that drive user conversion and retention.
SuperClaw
A systematic 4-phase development workflow that brings professional software engineering rigor and TDD to AI coding agents.
Issue Reproducer
A specialized AI agent skill designed to synthesize bug descriptions into structured, actionable reproduction reports and minimal reproduction conditions.
Hero Generator
Hero Generator is a specialized design and optimization skill for creating high-converting above-the-fold website sections.
Content Strategy
A comprehensive framework for planning content that balances search engine visibility with viral shareability to drive leads and authority.
Featured*
