メニュー
Generate a full favicon bundle — favicon.ico (16/32/48 multi-res), icon.svg with prefers-color-scheme dark support, apple-touch-icon.png 180×180 opaque, and PWA 192/512/512-maskable — from a brand mark or a mark prompt.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Translate a UI brief (a page, a screen, a single component, a feature) into a paste-ready prompt for Nano Banana Pro / gpt-image-2 / Ideogram / Flux 2 / Midjourney that produces a designer-grade mockup as visual inspiration — not pixel-spec UI, not AI slop. Use whenever the user asks for "imagine the X page", "mock up the Y screen", "give me a prompt for nano banana / gpt image 2 to design", "describe this UI for an image model", "draft a prompt for the designer to take inspiration from", or any time the agent needs to produce a UI image-gen prompt for a real product surface (pricing page, dashboard, settings, onboarding, mobile screen, marketing hero, single component). Be pushy — trigger even when the user says "design" without "prompt", or "show me what X could look like" — the agent should reach for this skill before hand-rolling a brief.
Translate a UI brief (a page, a screen, a single component, a feature) into a paste-ready prompt for Nano Banana Pro / gpt-image-2 / Ideogram / Flux 2 / Midjourney that produces a designer-grade mockup as visual inspiration — not pixel-spec UI, not AI slop. Use whenever the user asks for "imagine the X page", "mock up the Y screen", "give me a prompt for nano banana / gpt image 2 to design", "describe this UI for an image model", "draft a prompt for the designer to take inspiration from", or any time the agent needs to produce a UI image-gen prompt for a real product surface (pricing page, dashboard, settings, onboarding, mobile screen, marketing hero, single component). Be pushy — trigger even when the user says "design" without "prompt", or "show me what X could look like" — the agent should reach for this skill before hand-rolling a brief.
Classify a software-asset brief (logo, app icon, favicon, OG image, illustration, splash, icon pack, transparent mark), route to the right image model, rewrite the prompt in the target model's dialect, pick an execution mode (inline_svg / external_prompt_only / api) based on what's actually available, and run the pipeline. Use whenever the user asks for any visual asset for a software product.
Generate a production-grade logo (primary brand mark). Returns RGBA PNG master + SVG vector + monochrome variant. Route by text-length and per-model ceiling. Strong-text models render multi-word and even paragraph-length wordmarks reliably; weak-text models composite SVG type post-render.
Rewrite an asset brief into the exact prompt dialect of the target image model (OpenAI gpt-image-1, Google Imagen/Gemini, SDXL, Flux.1/Flux.2, Midjourney, Ideogram, Recraft). Handles negative-prompt translation, token budgets, transparency quirks, brand-palette injection, and text-in-image ceilings so that `asset_generate_*` submissions succeed on the first try.
Produce a truly RGBA-transparent asset from a brief. Handles the
| name | favicon |
| description | Generate a full favicon bundle — favicon.ico (16/32/48 multi-res), icon.svg with prefers-color-scheme dark support, apple-touch-icon.png 180×180 opaque, and PWA 192/512/512-maskable — from a brand mark or a mark prompt. |
| trigger_phrases | ["favicon","browser icon","tab icon","apple touch icon","favicon.ico"] |
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" type="image/svg+xml" href="/icon-dark.svg" media="(prefers-color-scheme: dark)">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
| File | Size | Alpha | Notes |
|---|---|---|---|
favicon.ico | 16, 32, 48 packed | yes | legacy compatibility; <15KB |
icon.svg | vector | yes | primary modern icon |
icon-dark.svg | vector | yes | prefers-color-scheme: dark |
apple-touch-icon.png | 180×180 | no — opaque | iOS home-screen; transparent = black background on iOS |
pwa/192.png, pwa/512.png | 192, 512 | yes | manifest any purpose |
pwa/512-maskable.png | 512, 80% safe zone padding | opaque | manifest maskable purpose |
SVG-first. Three paths, in order of preference:
logo-mark.svg exists in the brand bundle, use it directly. Optimize with SVGO. Generate color variants by re-coloring SVG paths.@resvg/resvg-js rasterization.skills/logo/SKILL.md), BiRefNet matte, K-means 4-color (favicons benefit from low color count), potrace --color or vtracer --mode polygon, SVGO.A simple, memorable [letter | glyph | shape] representing [SUBJECT].
Bold silhouette. Two or three colors maximum: [#primary, #bg].
Subject fills 70% of frame, centered.
Solid pure white background.
No text, no details that vanish at 16x16.
1:1 square, 1024x1024.
Option A (recommended): generate two separate SVGs — light on white, dark on black. Never algorithmically invert (loses WCAG contrast).
Option B (compromise): re-color SVG paths via data-driven palette swap from brand.light and brand.dark.
@resvg/resvg-js..ico file size <15KB.apple-touch-icon.png is opaque — reject if alpha channel present.pwa/512-maskable.png subject fits inside 80% center circle.favicon/
├── favicon.ico # 16/32/48 packed
├── icon.svg # primary modern icon
├── icon-dark.svg # prefers-color-scheme dark
├── apple-touch-icon.png # 180² opaque
├── pwa/192.png
├── pwa/512.png
├── pwa/512-maskable.png
├── head-snippet.html # <link> tags ready to paste
└── meta.json