skills.rest
eugene-belkovich
eugene-belkovichCOMMUNITY
Explore all skills by this author →
GitHub

chaos-favicon-variants

Create app-specific favicons with unique Chaos color variants from a registry.

Updated Aug 23, 2026
Search Tags:#branding#svg#icon#favicon#web-app#logomark#color-registry
One-click install
npx skills add https://github.com/eugene-belkovich/ai-setup --skill chaos-favicon-variants
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chaos-favicon-variants
Source: https://github.com/eugene-belkovich/ai-setup/tree/main/claude/profiles/work/skills/frontend/chaos-favicon-variants
Command: npx skills add https://github.com/eugene-belkovich/ai-setup --skill chaos-favicon-variants

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

When branding multiple Chaos Labs apps, browser tabs show identical logomarks. This skill provides differentiated favicon color variants to make each app instantly recognizable.

Core Features & Use Cases

  • Color Registry: Each app claims a unique color and the registry updates to prevent reuse.
  • Canonical Logomark: Uses the Chaos logomark SVG with per-app fill colors while keeping the background consistent.
  • Step-by-step guidance: Provides instructions to create app-specific favicons and the assets required for deployment.

Quick Start

Create a distinct favicon variant for a new app by selecting an unused color from the registry.

Frequently Asked Questions about chaos-favicon-variants

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create unique favicon colors for multiple web apps sharing the same logomark?▼

To create unique favicon colors for multiple web apps, you apply distinct color variants to a canonical logomark SVG. This skill uses a centralized color registry to assign and track unique fill colors per app while keeping the background consistent for quick visual identification in browser tabs.

What is a color registry for app favicons and how does it work?▼

A color registry for app favicons is a centralized tracker that assigns unique colors to individual web apps. It works by allowing each app to claim an unused color and automatically updating the registry to prevent color reuse across your multi-app branding ecosystem.

How do I generate app-specific favicon assets from an SVG logomark?▼

You generate app-specific favicon assets by selecting an unused color from the registry and applying it as the fill color to your canonical logomark SVG. This skill provides step-by-step guidance to produce the standard set of assets required for deployment across web apps and dashboards.

Do I need a canonical logomark SVG to use different favicon variants for my dashboards?▼

Yes, a canonical logomark SVG is required to create different favicon variants. The skill uses this single SVG file as the base template, applying per-app fill colors to the logomark while maintaining a consistent background across all documentation and dashboard assets.

Why do browser tabs show identical favicons for my multi-app branding and how do I fix it?▼

Browser tabs show identical favicons when multiple web apps share the same logomark without distinct color variants. You fix this by applying unique Chaos color variants to your canonical logomark SVG, ensuring each app is instantly recognizable through differentiated favicon colors.

Related Skills

Explore More Design & Creative Skills→
deomiarndeomiarn

favicon-pwa

Generate favicon variants, apple-touch-icon, and PWA manifest from brand colors.

Community
Intermediate
jscraikjscraik
8

favicon-generator

Generate favicon and app icon suites from brand assets and colors.

Community
Intermediate
wpgauravwpgaurav
14

saas-product-graphics

Generate SVG SaaS product UI visuals with floating panels, soft shadows, and gradients.

Community
Basic
ThomashighbaughThomashighbaugh
1

icon-generator

Generate favicon, PWA, and Unreal Engine icon sets from a single PNG or SVG source.

Community
Intermediate