irismaker/favicon-generator
skills/favicon/SKILL.md
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 icon," "PWA icon," "favicon sizes," "apple-touch-icon," "favicon.ico," "site icon," or "tab icon."
$ install --global
skillsauthnpx skillsauth add irismaker/ai-agent-skills-hub favicon-generatorInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 23, 2026, 3:42 PM55.3s1 file scanned
SKILL.md
- name:
- favicon-generator
- description:
- 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 icon," "PWA icon," "favicon sizes," "apple-touch-icon," "favicon.ico," "site icon," or "tab icon.
- version:
- 1.0.0
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 product marketing context first: If .claude/product-marketing-context.md or .cursor/product-marketing-context.md exists, read it for brand and visual identity.
Identify:
- Tech stack: Next.js, WordPress, static HTML, etc.
- PWA: Is the site a PWA or planning to be?
- Existing assets: Logo, icon files
Required Sizes (Best Practices 2025)
| 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 <link 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
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link 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
Related Skills
irismaker/video
tools
VerifiedTrustedCommunity
When the user wants to create, generate, or produce video content using AI tools or programmatic frameworks. Also use when the user mentions 'video production,' 'AI video,' 'Remotion,' 'Hyperframes,' 'HeyGen,' 'Synthesia,' 'Veo,' 'Runway,' 'Kling,' 'Pika,' 'video generation,' 'AI avatar,' 'talking head video,' 'programmatic video,' 'video template,' 'explainer video,' 'product demo video,' 'video pipeline,' or 'make me a video.' Use this for video creation, generation, and production workflows. For video content strategy and what to post, see social-content. For paid video ad creative, see ad-creative.
1SKILL.mdUpdated May 1, 2026
irismaker/lead-magnets
tools
VerifiedTrustedCommunity
When the user wants to create, plan, or optimize a lead magnet for email capture or lead generation. Also use when the user mentions "lead magnet," "gated content," "content upgrade," "downloadable," "ebook," "cheat sheet," "checklist," "template download," "opt-in," "freebie," "PDF download," "resource library," "content offer," "email capture content," "Notion template," "spreadsheet template," or "what should I give away for emails." Use this for planning what to create and how to distribute it. For interactive tools as lead magnets, see free-tool-strategy. For writing the actual content, see copywriting. For the email sequence after capture, see email-sequence.
1SKILL.mdUpdated May 1, 2026
irismaker/image
development
VerifiedTrustedCommunity
When the user wants to create, generate, edit, or optimize images for marketing — blog heroes, social graphics, product mockups, profile banners, listing visuals, or brand assets. Also use when the user mentions 'AI image generation,' 'generate an image,' 'create a graphic,' 'product mockup,' 'hero image,' 'social media graphic,' 'banner image,' 'cover photo,' 'profile banner,' 'listing screenshot,' 'Flux,' 'Midjourney,' 'DALL-E,' 'GPT Image,' 'Ideogram,' 'Gemini image,' 'Canva,' 'Figma,' 'image optimization,' 'compress images,' 'WebP,' or 'OG image.' Use this for general-purpose marketing image creation and optimization. For paid ad image creative and platform-specific ad specs, see ad-creative. For video production, see video.
1SKILL.mdUpdated May 1, 2026
irismaker/humanizer
testing
VerifiedTrustedCommunity
Remove signs of AI-generated writing from text. Use when editing or reviewing text to make it sound more natural and human-written. Based on Wikipedia's comprehensive "Signs of AI writing" guide. Detects and fixes patterns including: inflated symbolism, promotional language, superficial -ing analyses, vague attributions, em dash overuse, rule of three, AI vocabulary words, negative parallelisms, and excessive conjunctive phrases. Credits: Original skill by @blader - https://github.com/blader/humanizer
1SKILL.mdUpdated May 1, 2026