Sygnet, favicon i awatary

Sygnet to sam lew, bez nazwy. Wchodzi tam, gdzie nazwa się nie mieści, a markę i tak widać z kontekstu: karta przeglądarki, ikona na ekranie telefonu, profil w serwisie. Favikona jest sygnetem sprowadzonym do jednego koloru, bo przy 16 px gradient się zlewa.

Kiedy sygnet zastępuje logotyp

Sygnet stoi sam wtedy, gdy oba warunki są spełnione naraz. Miejsce jest mniejsze niż nazwa, a coś obok już markę nazywa: tytuł karty, nazwa profilu, nazwa aplikacji na ekranie.

Nie zastępuje logotypu w nagłówku strony, w stopce, w ofercie, w prezentacji, w dokumencie ani w materiale dla partnera. Tam mieści się pełna nazwa, więc pokazujemy pełną nazwę.

Sygnet nie jest też ikoną interfejsu. Ikon do przycisków i list dostarcza osobna rodzina: ikony.

Dwie postaci sygnetu

Podział jest ten sam co w logotypie: wersja z polem ochronnym w pliku i wersja przycięta do rysunku.

Plik	Postać	Tło	Wymiary
sygnet.svg	pole ochronne x w pliku	jasne	162 × 182 px
sygnet-dark.svg	pole ochronne x w pliku	ciemne	162 × 182 px
sygnet-trim.svg	przycięty do rysunku	jasne	110 × 130 px
sygnet-trim-dark.svg	przycięty do rysunku	ciemne	110 × 130 px

Wersję z polem przekazujesz na zewnątrz i wstawiasz w układ, który własnego odstępu nie wnosi. Wersję -trim osadzasz w komponencie, który ma padding z tokenów odstępów. Dwóch odstępów nie sumujemy.

Lew jest wyższy niż szerszy: 110 × 130 px. W kadrze kwadratowym ani okrągłym nie wypełnia pola, więc nie wycinamy go z logotypu na własną rękę. Do takich miejsc idą gotowe pliki niżej.

Na ekranie sygnet schodzi do 16 px — tyle ma najmniejsza favikona, a poniżej tej wielkości w układzie stoi favicon, nie sygnet. W druku granicą jest 6 mm (size.mark-print-min) — mniej niż minimum logotypu (12 mm, size.logo-print-min), bo sygnet nie niesie liter: ogranicza go rozpoznawalność sylwetki, nie czytelność napisu. Jednostka jest fizyczna, bo arkusz nie ma piksela CSS.

Favikona

Karta przeglądarki bywa jasna i ciemna. Wektor obsługuje oba tła jednym plikiem: niesie własną regułę @media (prefers-color-scheme: dark) i sam zmienia wypełnienie. Wpinamy go bez atrybutu media, bo nie ma czego wybierać.

<link rel="icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Kolejność jest częścią reguły. Przeglądarka bierze ostatni pasujący wpis, więc SVG stoi pod .ico i wygrywa tam, gdzie jest obsługiwany.

Reguła CSS w pliku ma wyższy priorytet niż atrybut fill, więc renderer, który zapytania nie rozumie albo w ogóle nie czyta <style>, pokazuje wariant na jasne tło.

Plik	Kiedy
favicon.svg	Domyślnie. Jeden rysunek na każdy rozmiar i oba tła karty
favicon.ico	W korzeniu domeny. Część klientów pyta o /favicon.ico sama, bez wpisu w HTML; plik niesie 16, 32, 48 px naraz
favicon-16.png, favicon-32.png, favicon-48.png	Tam, gdzie SVG nie wchodzi: czytniki, katalogi, podglądy zewnętrzne. Raster przełączyć się nie potrafi, więc wariant na ciemne tło ma własny komplet favicon-dark-*.png
apple-touch-icon.png	Ikona po dodaniu strony do ekranu początkowego. 180 × 180 px, tło nieprzezroczyste, margines wokół treści
avatar.svg, avatar.png	Awatar profilu — patrz niżej

Ikona Apple i awatar stoją na nieprzezroczystym tle w barwie color.background.page marki w trybie jasnym. Oba kafle trafiają poza naszą stronę: na tapetę telefonu i na cudzy profil. Tło niosą własne, żeby nie zależeć od tego, co podłoży im gospodarz.

Każda marka ma własny komplet. Portal travel nie pokazuje favikony insurance, tak samo jak nie pokazuje jego logotypu. Niżej rastry: po lewej wariant na jasne tło karty, po prawej na ciemne. Wektor niesie oba i wybiera sam.

insurance

home

health

moto

travel

monochrome

Dlaczego favikona jest jednobarwna

Lew w logotypie jest wypełniony gradientem. Przy 16 px sąsiednie stopnie gradientu schodzą się w jedną plamę i sylwetka znika. Zostaje kolorowy kwadrat. Dlatego favikona ma jeden kolor: stopień 800 rampy marki na jasne tło karty i stopień 600 na ciemne. monochrome bierze te same dwa stopnie z rampy navy.

Samych wartości nie przepisujemy do treści. Rampy pokazuje kolor, a barwę konkretnego pliku niesie manifest paczki znaku.

Rysunek zostaje ten sam co w sygnecie. Zmienia się wyłącznie wypełnienie, więc favikona i sygnet nie mogą się rozjechać.

Awatar profilu

Kadr profilu jest kwadratowy albo okrągły, a lew jest wyższy niż szerszy. Paczka wydaje na to osobny plik: avatar.svg — sygnet z polem ochronnym x dopełniony do kwadratu (182 × 182 px), z rysunkiem na środku kadru. Raster to avatar.png, 512 × 512 px; serwis, który chce mniej, zmniejsza go sam, a powiększanie rastra nie działa.

Pole ochronne trzyma lwa z dala od krawędzi, więc koło wpisane w ten kwadrat mieści cały rysunek. Tło niesie sam plik: podkład na całym kadrze w barwie color.background.page marki w trybie jasnym, ta sama rola co w ikonie Apple. Sygnet zostaje przezroczysty, bo wchodzi w nasz układ; awatar w cudzy, a tam przezroczystość znaczy tyle, że tło wybiera serwis — raz biel, raz czerń, zależnie od motywu czytelnika. Raster idzie bez kanału alfa, więc nie ma czego podłożyć.

Podkładem nie jest kolor marki. Lew jest narysowany rampą marki ze stopniem 500 włącznie, a ten stopień to właśnie kolor marki: na takim tle jego własna barwa ma 1,00:1 i część gradientu rozpływa się w tle. Znak ma dwa warianty, na jasne tło i na ciemne. Wariantu na własny kolor nie ma.

Awatara nie składamy sami. Kadr wycięty z logotypu obcina lwa albo nazwę, a apple-touch-icon.png niesie wersję jednobarwną, więc w kafelku profilu czyta się jak ikona systemu, nie jak znak firmy.

Wymagania poszczególnych serwisów zbiera profile, social i grafiki linków.

Granice

• Favikony, awatara ani ikony aplikacji nie rysujemy osobno dla portalu. Komplet powstaje na markę, w paczce znaku, z tego samego rysunku co logotyp.
• Jednobarwność jest operacją na wypełnieniu, nie nowym rysunkiem. Sygnet przemalowany ręcznie w edytorze nie jest naszym plikiem.
• Sygnet nie zastępuje logotypu tam, gdzie logotyp się mieści.
• Mechanikę paczki, jej bramkę i sposób liczenia wymiarów opisuje paczka znaku — źródło w repo: packages/design/brand/README.md.

Weryfikacja

1. Przełącz motyw systemu na ciemny i odśwież kartę. Sylwetka ma zostać czytelna na obu tłach — wektor przełącza wypełnienie sam, a jeśli przeglądarka tego nie umie, zostaje przy wariancie na jasne tło.
2. Zmniejsz favikonę do 16 px i sprawdź, czy sylwetka lwa nadal jest sylwetką.
3. Dodaj stronę do ekranu początkowego telefonu. Ikona ma mieć własne tło, bez przezroczystości i bez obramowania systemu.
4. Wgraj awatar na profil i obejrzyj go po przycięciu do koła: między lwem a krawędzią ma zostać odstęp, a kafel ma mieć własne tło — takie samo w jasnym i ciemnym motywie serwisu.
5. Sprawdź, czy portal pokazuje komplet swojej marki: favikona, ikona Apple i logotyp pochodzą z tego samego katalogu.

Bramka pnpm -F @polisoteka/design-brand run check:brand pilnuje plików: skrótów dostawy, odtwarzalności pochodnych i braku plików znaku poza paczką. Poprawności wpięcia w stronę nie sprawdza. To zostaje przy review.

Źródła

Logotypy i pole ochronne, Kolor, Ikony, Odstępy i rytm, Profile, social i grafiki linków, paczka znaku — źródło w repo: packages/design/brand/README.md.