cutify-that-tablisted

Add a cute, hand-authored SVG favicon to a web app — the tiny icon that shows in the browser tab. Use when the user asks to add a favicon, browser tab icon, tab logo, page icon, site icon, or "cute thing in the tab," or says the current tab shows a blank/default square. Covers 3 techniques in increasing effort: (A) emoji-as-favicon via inline SVG data URI — zero assets; (B) gradient mascot blob — a soft blob shape with a face built from circles + a quadratic-curve smile; (C) 16×16 pixel-art sticker using SVG <rect> on an integer grid with shape-rendering="crispEdges" (bunny, bear, chick, mochi cat, ghost, frog, strawberry, cloud, dango, bee, ...). Includes the modern `<link rel="icon" type="image/svg+xml">` recipe (no more .ico files, no PNG fallbacks needed for modern browsers), tab-size verification, and which technique fits which vibe. Skip if the user wants a corporate/photographic logo — this skill is for hand-authored, cute, low-effort icons.
wan-huiyan/cutify-that-tab · ★ 1 · Web & Frontend · score 78

Install: claude install-skill wan-huiyan/cutify-that-tab

# Cutify That Tab ✨ Put something cute in the browser tab. Three techniques, all SVG, all hand-authorable in a single file. Pick whichever vibe — a smiling gradient blob, a 16×16 pixel-art mascot (bunny, ghost, bear, mochi cat, ...), or just an emoji. The tab is small real estate; spend ten minutes making it delightful. ## Problem User has a web app with a blank/default favicon (the empty square in the browser tab) and wants something cute in there. They're not looking for a corporate logo treatment — they want personality. Most online "favicon generators" produce a heavy 12-file pack (favicon.ico, apple-touch-icon variants, manifest.json, ...) for a problem that needs one SVG file. ## Context / Trigger Conditions Use this skill when **any** of: - User asks: "add a favicon / browser tab icon / tab logo / page icon." - User says the tab shows a blank square or generic globe. - User wants "personality" / "cute" / "something in the tab" without specifying a brand-mark treatment. - User shows a UI mockup with a tab strip and the tab favicon is empty. **Skip** if the user wants a polished brand mark, photographic logo, or a multi-platform icon pack (apple-touch-icon, Android maskable, etc.) — those are different problems requiring different tooling. ## Solution ### Step 1 — pick the technique (vibe-driven) Three techniques. Pick before authoring; switching mid-way is wasted work. | # | Technique | Effort | When to pick it | |---|---|---|---| | **A** | **Emoji favicon*