SEED engenharia@seedengenharia
Onde quer que esteja, conte com a experiência da SEED engenharia.
SEED Design System v2 · F8 Onda 3 · item 3.6 · espécime — gate decidido em 2026-08-28
Kit de favicon, app icons e avatar de redes
Derivados do símbolo oficial por transformação — nunca redesenho. Esta folha é a validação que o §5.2 exige ("validar o símbolo no tamanho real de 16 e 32px antes de publicar") e, desde 2026-08-28, o ESPÉCIME do kit: as cinco perguntas de gate foram respondidas pelo Rafael nessa data (seção G) e o kit abaixo já está na configuração decidida. Desde 2026-09-04 a folha traz também os ARQUIVOS DE PRODUÇÃO rasterizados (seção E, pendência FV-P2 antecipada por ele). Peça de tela: os tamanhos são px reais de CSS.
A · O kit — 7 masters SVG (mostrados a 96px)
O §5.2 do canon define o kit de produção em 4 arquivos: favicon.svg · favicon.ico 16/32/48 · apple-touch-icon.png 180×180 · icon-512.png. Depois do gate de 2026-08-28 (decisão P4: as duas opções de fundo valem), cada ícone opaco existe em DUAS variantes oficiais, -claro e -escuro. Estes sete SVG são os MASTERS: tudo o mais deriva deles. Os arquivos de produção (favicon.ico e os PNG) saíam sob demanda (decisão E do plano) até 2026-09-04, quando o Rafael antecipou a pendência FV-P2 — estão rasterizados destes masters na seção E.
favicon.svg — favicon.svg da §5.2 — entra direto no site; símbolo colorido nos DOIS temas (decisão P3, 2026-08-28)
apple-touch-icon-claro.svg — master vetorial do apple-touch-icon-claro.png 180×180 — variante clara (raster na seção E)
apple-touch-icon-escuro.svg — idem, variante escura (brand-deep + mono-negativo) — oficial pela decisão P4
icon-maskable-claro.svg — master vetorial do icon-512-claro.png e do icon-192-claro.png (PWA/Android, purpose maskable) — variante clara
icon-maskable-escuro.svg — idem, variante escura — oficial pela decisão P4
avatar-rede-claro.svg — avatar 400×400 das redes (@seedengenharia) — variante clara (PNG na seção E)
avatar-rede-escuro.svg — idem, variante escura — oficial pela decisão P4
B · Aba de navegador — 16px reais, claro e escuro
O contexto mais hostil do kit: 16×16px na aba. Decisão P3 do gate (2026-08-28): o favicon é o símbolo COLORIDO nos dois temas — um desenho único, sem media query — por isso as duas abas abaixo usam o MESMO arquivo. Texto do mock em fonte de sistema de propósito: é assim que o navegador real rende a aba.
SEED engenharia — Especialistas em energia×Nova guia
SEED engenharia — Especialistas em energia×Nova guia
16 px · fundo claro
32 px · fundo claro
48 px · fundo claro
16 px · fundo escuro
32 px · fundo escuro
48 px · fundo escuro
C · Ícone de app — as duas variantes oficiais, 180 / 192 / 512 em tamanhos reais
Decisão P4 do gate (2026-08-28): branco + símbolo principal E brand-deep + mono-negativo são AMBAS oficiais — o kit entrega as duas, -claro e -escuro. Decisão P5: regra ÚNICA de enquadramento — o círculo circunscrito da caixa do símbolo cabe no círculo de raio 40% do lado, a zona segura do ícone maskable (W3C, Web Application Manifest, Working Draft de 2026-08-13: "a circle (…) with a radius of 2/5 (40%) of the icon size"). O que cabe nela sobrevive a qualquer máscara: círculo, squircle, gota.
apple-touch -claro 180×180 · máscara squircle do iOS (aprox. raio 22,4%)
apple-touch -escuro 180×180 · a outra variante oficial (P4)
maskable -claro 192 · máscara circular do Android
maskable -escuro 192 · máscara circular do Android
zona segura: círculo de raio 40% (W3C, WD 2026-08-13)maskable -claro 512×512, sem máscara, com a zona segura sobreposta — todo o símbolo cabe nela (a variante -escuro usa a MESMA geometria: só fundo e tinta mudam)
D · Avatar de rede — as duas variantes oficiais, 400×400 e na timeline
§5.2: "Avatar circular (WhatsApp/Instagram): símbolo centrado; nunca a logo horizontal cortada". Decisão P4 do gate (2026-08-28): as duas variantes de fundo são oficiais — a conta usa UMA por vez, e qualquer uma vale nos dois temas da plataforma. A timeline mostra cada avatar no tamanho em que ele vive de verdade (48px, recortado em círculo). Conteúdo do mock: dados institucionais do sobreaseed.md (§2 e §9) — nenhum cliente, nenhum dado pessoal.
recorte circular da plataforma (círculo inscrito)avatar-rede-claro.svg 400×400 — o símbolo cabe no raio de 160 (80% do recorte): margem interna generosa, §5.2
recorte circular da plataforma (círculo inscrito)avatar-rede-escuro.svg 400×400 — o símbolo cabe no raio de 160 (80% do recorte): margem interna generosa, §5.2
SEED engenharia@seedengenharia
Especialistas em energia há mais de uma década. · seed.eng.br
timeline clara · avatar -claro
SEED engenharia@seedengenharia
Onde quer que esteja, conte com a experiência da SEED engenharia.
SEED engenharia@seedengenharia
Especialistas em energia há mais de uma década. · seed.eng.br
timeline escura · avatar -escuro
E · Arquivos de produção — rasterizados em 2026-09-04 (FV-P2)
Veredito do Rafael, verbatim (2026-09-04): "PV-P2 pode fazer pra adiantar" — a rasterização saiu da fila da F9 e foi feita agora, com o que a casa já tem: Chrome real (o mesmo do ambiente.mjs, com as flags de raster determinístico) no tamanho EXATO de pixel de cada arquivo, e Pillow para gravar. Tudo abaixo é o PIXEL REAL do arquivo que vai para produção, exibido 1:1 — nada é o SVG reescalado pelo navegador. A ampliação é nearest-neighbor: cada quadrado é um pixel do arquivo. Os masters da seção A continuam sendo a fonte; PNG e ICO nunca se editam.
favicon.ico — os três frames, tamanho real
16 px · frame real do favicon.ico · fundo claro
16 px · frame real do favicon.ico · fundo escuro
32 px · frame real do favicon.ico · fundo claro
32 px · frame real do favicon.ico · fundo escuro
48 px · frame real do favicon.ico · fundo claro
48 px · frame real do favicon.ico · fundo escuro
A validação da §5.2 — 16 e 32 px ampliados (e o 48), com as guardas P1/P2 medidas no raster
16 px ampliado 8× (cada pixel real = quadrado de 8) · caixa alfa (0, 0, 16, 16) de 16 — toca as bordas laterais (P2, margem 0%) · o ® acrescenta 6 pixels ao render (6 dentro da janela (13, 0, 16, 3); alfa máx. ali 122) — presente (P1)
32 px ampliado 8× (cada pixel real = quadrado de 8) · caixa alfa (0, 1, 32, 31) de 32 — toca as bordas laterais (P2, margem 0%) · o ® acrescenta 19 pixels ao render (19 dentro da janela (27, 1, 32, 6); alfa máx. ali 132) — presente (P1)
48 px ampliado 4× (cada pixel real = quadrado de 4) · caixa alfa (0, 1, 48, 47) de 48 — toca as bordas laterais (P2, margem 0%) · o ® acrescenta 40 pixels ao render (40 dentro da janela (41, 1, 48, 8); alfa máx. ali 201) — presente (P1)
Os PNG opacos, 1:1 — as duas variantes oficiais de cada (P4)
apple-touch-icon-claro.png · 180×180 px · RGB · 4614 B · de apple-touch-icon-claro.svg
apple-touch-icon-escuro.png · 180×180 px · RGB · 4637 B · de apple-touch-icon-escuro.svg
icon-192-claro.png · 192×192 px · RGB · 4975 B · de icon-maskable-claro.svg
icon-192-escuro.png · 192×192 px · RGB · 4985 B · de icon-maskable-escuro.svg
icon-512-claro.png · 512×512 px · RGB · 14831 B · de icon-maskable-claro.svg
icon-512-escuro.png · 512×512 px · RGB · 15036 B · de icon-maskable-escuro.svg
avatar-rede-claro.png · 400×400 px · RGB · 11309 B · de avatar-rede-claro.svg
avatar-rede-escuro.png · 400×400 px · RGB · 11357 B · de avatar-rede-escuro.svg
| arquivo | dimensões medidas | modo | bytes | master |
|---|---|---|---|---|
| favicon.ico | 16×16 + 32×32 + 48×48 | RGBA (frames PNG dentro do ICO) | 4482 | favicon.svg |
| apple-touch-icon-claro.png | 180×180 | RGB | 4614 | apple-touch-icon-claro.svg |
| icon-512-claro.png | 512×512 | RGB | 14831 | icon-maskable-claro.svg |
| icon-192-claro.png | 192×192 | RGB | 4975 | icon-maskable-claro.svg |
| avatar-rede-claro.png | 400×400 | RGB | 11309 | avatar-rede-claro.svg |
| apple-touch-icon-escuro.png | 180×180 | RGB | 4637 | apple-touch-icon-escuro.svg |
| icon-512-escuro.png | 512×512 | RGB | 15036 | icon-maskable-escuro.svg |
| icon-192-escuro.png | 192×192 | RGB | 4985 | icon-maskable-escuro.svg |
| avatar-rede-escuro.png | 400×400 | RGB | 11357 | avatar-rede-escuro.svg |
# por arquivo, L = lado em px (16/32/48 do favicon; 180; 192; 400; 512). wrapper.html = pagina sem margem com o master num elemento img de width=L height=L, no canto superior esquerdo # (janela folgada de 800 px porque o Chrome impoe largura minima de 500 e recorta a captura — medido em 2026-09-04; PERFIL_TEMPORARIO = diretorio descartavel): chrome --headless=new --disable-gpu --num-raster-threads=1 --force-color-profile=srgb --force-device-scale-factor=1 --hide-scrollbars --default-background-color=00000000 --no-first-run --no-default-browser-check --disable-extensions --user-data-dir=PERFIL_TEMPORARIO --window-size=800,800 --screenshot=raster.png wrapper.html # depois, Pillow 12.3: recorte (0, 0, L, L) da captura — com a guarda de que fora dele nao ha pixel —, PNG optimize=True (RGB nos opacos, RGBA no favicon); # favicon.ico = os 3 renders 16/32/48 via append_images, lidos de volta e conferidos pixel a pixel.
G · Decisões do gate — 2026-08-28
Esta folha nasceu como folha de PERGUNTA (2026-08-27), com as cinco perguntas P1–P5 renderizadas lado a lado. O Rafael respondeu todas em 2026-08-28 — vereditos verbatim no MANIFESTO §136.4 — e a folha passou a ESPÉCIME: o que segue é o estado decidido, e as seções A–D acima já mostram o kit na configuração final.
P1 · O ® acompanha o símbolo — sempre
Decidido em 2026-08-28: o ® acompanha o símbolo em TODOS os tamanhos. O padrão conservador (§5.5 proíbe desmembrar os elementos) virou regra do kit; nenhum arquivo sai sem o ®.
P2 · Margem interna do favicon: 0%
Decidido em 2026-08-28: margem 0% — o maior desenho possível a 16px. O 8% provisório da folha de pergunta saiu do gerador; o número que a §5.2 deixava em aberto agora existe.
P3 · Tema escuro: símbolo colorido
Decidido em 2026-08-28: na aba escura o favicon usa o símbolo PRINCIPAL colorido, não o mono-negativo — a matriz §5.1 é regra de peça; no favicon a cor identifica mais que a forma. O favicon.svg virou um desenho único, sem media query de dark mode.
P4 · Fundo de app e avatar: as duas opções são oficiais
Decidido em 2026-08-28: branco + símbolo principal E brand-deep + mono-negativo valem AMBAS. O kit entrega as duas variantes de cada ícone opaco, nomeadas -claro e -escuro — entrega dupla, não pergunta.
P5 · Enquadramento: regra única de 40%
Decidido em 2026-08-28: um só enquadramento para todos os ícones opacos — o círculo circunscrito do símbolo no raio de 40% do lado (garantia W3C, seção C). A alternativa "caixa a 80% do lado" foi descartada e o código dela removido.