Todo ícone que seu site precisa, conferido em 16 pixels.
Dê uma logo pra skill e ela escreve o conjunto inteiro: o SVG com modo escuro, um ICO de verdade com vários tamanhos, o ícone do iPhone, ícones de Android que aguentam qualquer máscara, o manifest e as tags. Depois mostra cada ícone onde ele vive, pro problema aparecer antes do lançamento, não depois.
npx skills add c0le0ni/skills --skill coleoni-favicon
De um SVG a um conjunto pronto pra publicar.
Uma padaria fictícia, a mesma da /coleoni-briefing: a marca no creme da identidade, e a folha que a skill confere antes de dar o trabalho por feito.
<!-- logo.svg · Juniper Bakery -->
<svg viewBox="0 0 100 100">
<path d="M60 14 V58 a22 22 0 0 1 -44 0"
stroke="#2F4A3A" stroke-width="15"/>
<path d="M60 22 C 74 12, 88 16 …"
fill="#2F4A3A"/>
<circle cx="80" cy="56" r="11"
fill="#C8643B"/>
</svg>
$ /coleoni-favicon brand/logo.svg
no creme #F6F0E6, arredondado,
tema verde-sálvia #2F4A3A
Primeiro a marca. Depois cada lugar onde ela aparece.
Um favicon tem dezesseis pixels de largura. Uma assinatura completa ou um logotipo comprido some nesse tamanho, então a skill começa achando a parte da logo que sobrevive.
-
Acha a marca
A logo que você passar, ou a que estiver em
public/,assets/oubrand/. SVG primeiro, um PNG grande também serve. -
Recorta quando precisa
Uma letra do logotipo ou o símbolo da assinatura, cortado com
--cropnas unidades do próprio SVG. -
Usa as cores da marca
O fundo vem dos tokens de design ou do próprio site, nunca inventado. Transparente quando a marca funciona em qualquer aba.
-
Gera o conjunto inteiro
SVG, ICO, PNGs, ícones de Apple e Android, o manifest e as tags do head, primeiro numa pasta à parte.
-
Confere a prévia
A aba em 16px, a aba escura, a máscara redonda do Android e o ícone do iPhone. Corrige e roda de novo até as quatro passarem.
-
Instala, se você pedir
app/no Next.js, a pasta pública e as tags no resto, depois de mostrar o que vai substituir.
O que vem no conjunto.
Cada arquivo tem um lugar onde aparece. Nada no conjunto está ali só por garantia.
| Arquivo | Onde aparece |
|---|---|
favicon.svg | Abas dos navegadores modernos; troca o fundo no modo escuro com --dark-bg |
favicon.ico | 16, 32 e 48 num arquivo só, pros outros navegadores e pros pedidos de /favicon.ico |
favicon-16.png, favicon-32.png | Onde um PNG é exigido |
apple-touch-icon.png | Tela inicial do iPhone e do iPad, 180px, quadrado cheio |
icon-192.png, icon-512.png | Android e apps web instalados |
icon-maskable-512.png | Ícones adaptativos do Android, marca dentro da zona segura de 80% |
site.webmanifest | Nome, ícones e cores pra instalação |
head.html | As tags pra colar no <head> |
preview.png | A folha de conferência |
Um comando, em qualquer agente.
O único pacote é o playwright-core, que o agente instala no primeiro uso. Ele usa o Chrome ou o Edge que você já tem.
npx skills add c0le0ni/skills --skill coleoni-favicon
/coleoni-favicon public/logo.svg
-g-a claude-code-a codexnpx skills add c0le0ni/skillsPeça como pediria a um designer.
Ela gera numa pasta à parte e mostra a prévia. O projeto só muda quando você mandar.
Achar a logo no projeto e gerar o conjunto.
/coleoni-favicon
Escolher o fundo e o formato, e já instalar.
/coleoni-favicon brand/marca.svg no #0a0a0a, arredondado, instala
Usar uma letra do logotipo.
/coleoni-favicon logo.svg, só a primeira letra, círculo
O motor, pelo terminal.
O scripts/favicon.mjs também roda sozinho: node favicon.mjs logo.svg --out favicon-out.
| Opção | Para quê |
|---|---|
--bg "#hex" | Cor do fundo, ou transparent pra só a marca |
--shape | rounded (padrão), square ou circle |
--padding 0.14 | Espaço em volta da marca; marcas pesadas pedem 0.18 a 0.22 |
--crop x,y,w,h | Usa parte do SVG, em unidades do viewBox |
--dark-bg "#hex" | Fundo do favicon.svg no modo escuro |
--name "App" | Nome no manifest |
--theme "#hex" | Cor de tema no manifest e nas tags |
A menor imagem do seu site, finalmente certa.
npx skills add c0le0ni/skills --skill coleoni-favicon