Masz już logo. Potrzebujesz zamiany tego logo w stos maleńkich plików ikon, których oczekuje przeglądarka — favicon.ico, garść plików PNG w konkretnych rozmiarach, manifest webowy i HTML, który to wszystko połączy. Ta konwersja jest mechaniczna i możesz ją zrobić w jakąś minutę bez instalowania czegokolwiek.
Haczyk w tym, że nie każde logo zmniejsza się z gracją. Więc omawiamy zarówno szybką ścieżkę, jak i to, jak naprawić logo, które zamienia się w papkę przy 16 pikselach.
Wersja krótka
- Zdobądź swoje logo jako kwadratowy obraz — najlepiej 512×512 lub większy, na przezroczystym albo jednolitym tle.
- Wrzuć je do generatora faviconów.
- Pobierz wygenerowany zestaw i wrzuć pliki do katalogu głównego strony.
- Wklej dostarczony fragment HTML do swojego
<head>.
To cała robota. Generator daje favicon.ico, pliki PNG w 16, 32, 48, 180, 192 i 512, webmanifest oraz dokładne znaczniki <link> — więc nie kadrujesz ręcznie sześciu obrazów ani nie zgadujesz składni manifestu.
Najpierw przygotuj logo — tu wygrywa się albo traci jakość
Favicon żyje przy 16×16 w karcie przeglądarki. Cokolwiek z detalu nie przetrwa tego rozmiaru, jest zmarnowane. Poświęć tu dwie minuty, a wynik wygląda ostro wszędzie.
Uczyń je kwadratowym. Favicony są kwadratowe. Szerokie, poziome logo dostanie czarne pasy albo zostanie ściśnięte. Przytnij do najbardziej rozpoznawalnego elementu — zwykle znaku albo pojedynczego inicjału — i wyśrodkuj go w kwadratowym kadrze.
Porzuć znak słowny. Pełna nazwa firmy nie będzie czytelna w rozmiarze karty. „Acme Corporation" staje się szarą smugą. Zachowaj symbol albo pojedynczą literę, a nazwę niech niesie tytuł karty.
Sprawdź kontrast na obu motywach. Karty przeglądarki są jasne i ciemne. Granatowa ikona znika na ciemnej karcie; blada ikona znika na jasnej. Jeśli Twój znak to jeden płaski kolor, upewnij się, że ten kolor czyta się na obu. Subtelny obrys albo mała jednolita plamka tła mogą pomóc.
Zostaw oddech. Dodaj trochę marginesu wewnątrz kwadratu, żeby ikona nie wciskała się w krawędzie. Będzie wyglądać bardziej wyważenie w każdym miejscu.
Zacznij dużo. Źródło 512×512 (albo większe) daje generatorowi czysty detal do zmniejszania. Powiększenie najpierw maleńkiego logo tylko wypala rozmycie.
Przezroczyste czy jednolite tło?
Oba działają — zależy od wyglądu, jakiego chcesz.
- Przezroczyste pozwala tłu karty albo ekranu głównego prześwitywać. Czyste i nowoczesne, i dostosowuje się do jasnego/ciemnego otoczenia. Najlepsze, gdy Twój znak jest wyraźnym kształtem.
- Jednolita plamka tła (kolorowy zaokrąglony kwadrat za znakiem) gwarantuje, że ikona się czyta niezależnie od tego, co jest za nią. To robi większość ikon aplikacji i to bezpieczniejszy wybór, jeśli Twoje logo jest cienkie albo o niskim kontraście.
W razie wątpliwości jednolita plamka w kolorze marki to solidna opcja — nigdy nie znika w pasującym tle.
Po pobraniu: gdzie trafiają pliki
Generator daje Ci zestaw plików i fragment. Dwie reguły umiejscowienia to załatwiają:
favicon.icotrafia do katalogu głównego strony (/favicon.ico). Przeglądarki i Windows szukają go tam po nazwie nawet bez znacznika<link>.- Wszystko inne może mieszkać, gdzie chcesz, o ile ścieżki w fragmencie HTML pasują. Większość ludzi wrzuca wszystko do katalogu głównego i wkleja fragment bez zmian.
Potem to już tylko fragment <head> — linki ikon, apple-touch-icon i odwołanie do manifestu. Wklej, wdróż, wymuś odświeżenie, a powinieneś zobaczyć swoje logo w karcie.
Dlaczego robić to w przeglądarce?
Bo Twoje logo nigdy nie opuszcza Twojej maszyny. Cały proces — odczyt obrazu, zmiana rozmiaru do każdego wymiaru, spakowanie .ico, zapisanie manifestu — dzieje się lokalnie w Twojej przeglądarce dzięki Canvas. Nic nie jest przesyłane na serwer, nie ma rejestracji ani znaku wodnego, a po pierwszej wizycie narzędzie działa offline. Dla materiału marki, którego może jeszcze nie opublikowałeś, trzymanie go z dala od cudzych serwerów to rozsądna opcja domyślna.
Gdy Twoje logo jest kwadratowe, o wysokim kontraście i czytelne w małym rozmiarze, wygenerowanie pełnego zestawu to łatwa część.