Generate and validate favicon and application icon systems for web projects.
SkillScore67Maintained
Automatic
◆Frontend / UI pack
Last verified 10/10/2026
What it changes
Passed 14 of 21 test cases with the skill, and 5 of 21 without it.
Without skill24%
With skill67%
Checks it passed that the model alone missed
Places icon-test.html in the public/ folder
Saves the script at scripts/generate-icons.js
Uses rx 80 on the background rectangle element
and 9 more in the full report
9 fixed5 passed either way7 still failing0 broke1 errored
Pass-rate lift
+43 pp
Tokens
+98%
Agent turns
0%
Response time
-11%
Model gemini-3.6-flashMeasured 10/10/2026v114 of 22 cases passed with skill · 21 comparable
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 9 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 9
Prompt
We are creating a base SVG template for a 512x512 application icon with a rounded dark background rect. What exact viewBox coordinates and background rectangle rx corner rounding value should be used in the SVG template?
What was checked, without and with the skill
Checked
Without skill
With skill
Uses viewBox 0 0 512 512 on the root SVG element
Passed
Passed
Uses rx 80 on the background rectangle element
Missed
Passed
case-13 · gemini-3.6-flash · 10/10/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md471 linessingle file
Favicon & Icon Generator Skill
Overview
A comprehensive skill for generating professional favicon and icon systems for web applications. This skill creates SVG-based icons optimized for browsers, search engines, PWAs, and mobile devices, with automated validation and testing tools.
When to Use This Skill
Setting up icons for a new website or web application
Fixing missing or broken favicon/icon configurations
Improving SEO with proper icon display in search results
Implementing PWA (Progressive Web App) icon requirements
Creating a complete icon system for multi-platform support
What This Skill Does
1. Icon Design & Creation
Creates professional SVG icons optimized for web use
Designs icons that represent the core theme/purpose of the application
Generates multiple sizes: high-resolution (512x512) and favicon (32x32)
Uses modern design principles: gradients, proper contrast, recognizable shapes
Ensures icons are clear and visible at small sizes
2. Configuration Setup
Updates Next.js layout.tsx with proper metadata configuration
Configures PWA manifest.json with correct icon references
Sets up HTML head tags for maximum browser compatibility
Implements proper icon fallbacks and alternatives
3. Automation Tools
Creates verification script to check icon configuration