Jak stworzyć favicon dla swojej strony

Favicon to mała ikona na karcie przeglądarki, na pasku zakładek, w historii, na ekranie początkowym iPhone’a i obok nazwy twojej strony w wynikach wyszukiwania. Często to jedyny element twojej marki, jaki widzi odwiedzający z dwudziestoma otwartymi kartami. Kiedyś zrobienie go porządnie oznaczało żonglowanie tuzinem rozmiarów. Dziś kilka plików obsługuje każdą platformę, która ma znaczenie.

Ten poradnik opisuje, co przygotować, jak zaprojektować ikonę, która przetrwa 16 pikseli, jak ją zainstalować i jak zdiagnozować najczęstsze problemy.

Pliki, których potrzebuje nowoczesna strona

• favicon.ico z obrazami 16, 32 i 48 px. Przeglądarki same żądają /favicon.ico nawet bez żadnego HTML, Windows używa go przy skrótach, a do tego to najbezpieczniejsza wersja zapasowa.
• apple-touch-icon.png w rozmiarze 180×180. Używany, gdy ktoś dodaje stronę do ekranu początkowego na iPhonie lub iPadzie.
• icon-192.png i icon-512.png. Ikony ekranu głównego Androida i ekran powitalny zainstalowanej aplikacji webowej.
• site.webmanifest. Mały plik JSON, który wskazuje dwie ikony dla Androida i – jeśli chcesz, żeby stronę dało się zainstalować – opisuje ją.
• Opcjonalnie icon.svg. Jedna ikona wektorowa, którą przeglądarki obsługujące favicony SVG renderują ostro w każdym rozmiarze i która potrafi zmieniać kolory w trybie ciemnym.

Wszystko inne, co możesz zobaczyć w starszych poradnikach, jak dziesiątki rozmiarów PNG i kafelki dla konkretnych przeglądarek, nie jest już potrzebne typowej stronie.

Wygeneruj zestaw z jednego logo

1. Przygotuj kwadratowe źródło. Idealne jest SVG; w przeciwnym razie PNG o wymiarach co najmniej 512×512.
2. Otwórz Generator favicon i upuść plik. Przyjmuje PNG, JPG, WebP i SVG do 20 MB.
3. Pobierz ZIP. Zawiera favicon.ico (w środku 16, 32 i 48 px), apple-touch-icon.png, icon-192.png, icon-512.png i site.webmanifest.
4. Skopiuj pliki do katalogu głównego strony, obok strony głównej.

Każdy rozmiar jest rysowany bezpośrednio z oryginału, więc SVG jest rasteryzowane natywnie w 16 px, a nie zmniejszane z dużej bitmapy. Renderowanie odbywa się w przeglądarce; logo nie jest nigdzie wysyłane. Źródło, które nie jest kwadratowe, jest skalowane tak, by się zmieściło, i wyśrodkowane, z przezroczystym miejscem po krótszych bokach.

Generator nie tworzy icon.svg. Jeśli chcesz favicon SVG, skopiuj własne logo SVG do katalogu głównego strony pod tą nazwą.

Dodaj HTML

Umieść te wiersze w <head> każdej strony albo we wspólnym szablonie układu:

<link rel="icon" href="/favicon.ico" sizes="32x32">

<link rel="icon" href="/icon.svg" type="image/svg+xml">

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="manifest" href="/site.webmanifest">

Pomiń wiersz z SVG, jeśli go nie masz. Atrybut sizes="32x32" w wierszu z ICO ma znaczenie, gdy obecne jest SVG: powstrzymuje niektóre przeglądarki przed wybraniem ICO zamiast ostrzejszego SVG.

Wygenerowany manifest podaje ikony ze ścieżkami bezwzględnymi, takimi jak /icon-192.png. Jeśli strona znajduje się w podfolderze, a nie w katalogu głównym domeny, popraw te ścieżki.

Ikona, która przetrwa 16 pikseli

Przy 16×16 masz łącznie 256 pikseli. Żadne ustawienie eksportu nie uratuje projektu, który potrzebuje więcej.

• Użyj znaku, nie całego logo. Pojedyncza litera, monogram albo symbol bez logotypu. Słowa poniżej 32 px zamieniają się w szarą smugę.
• Grube kształty, mało kolorów. Linie cieńsze niż mniej więcej 1/16 szerokości ikony znikają przy najmniejszym rozmiarze. Najlepiej czytają się dwa kolory o silnym kontraście.
• Wypełnij kwadrat. Przytnij puste marginesy w źródle. Logo unoszące się w przezroczystej przestrzeni wychodzi na karcie malutkie.
• Sprawdź oba motywy kart. Paski kart mogą być jasne lub ciemne. Czarny znak na przezroczystym tle znika w ciemnym motywie. Jednolity kolorowy kształt pod znakiem, na przykład zaokrąglony kwadrat, działa w obu.

Jeśli logo jest szerokie, przed generowaniem przytnij je do symbolu w Przytnij obraz online z proporcjami 1:1. Jeśli logo rastrowe istnieje tylko w małym rozmiarze, powiększenie go w Powiększ zdjęcie za pomocą AI da ikonie 512 px czystsze krawędzie niż zwykłe rozciągnięcie.

Tryb ciemny z faviconem SVG

Favicon SVG może zawierać zapytanie CSS o media dla prefers-color-scheme: dark i zmieniać kolor wypełnienia, gdy przeglądarka używa ciemnego motywu. To najczystsze rozwiązanie problemu ciemnego znaku, który znika na ciemnych kartach. Zachowaj ICO jako wersję zapasową, bo nie każda przeglądarka używa faviconów SVG.

Potrzebujesz PNG w innych rozmiarach

Niektóre platformy, wtyczki i sklepy z aplikacjami wymagają konkretnego rozmiaru PNG, którego nie ma w zestawie. Konwertuj SVG na PNG online renderuje twoje logo wektorowe w dowolnej wpisanej szerokości, z przezroczystym tłem.

Szczegóły platform, które warto znać

Ekran początkowy iPhone’a

iOS nie wyświetla przezroczystości na ikonach ekranu początkowego; przezroczyste obszary są wypełniane, zwykle na czarno, a narożniki zaokrągla system. Ponieważ generator zachowuje przezroczystość, do ikony Apple touch użyj źródła z jednolitym kolorem tła. Nie zaokrąglaj narożników samodzielnie.

Android i strony do zainstalowania

Launchery Androida mogą przycinać ikony do koła lub innego kształtu. Żeby stronę dało się zainstalować jako aplikację, otwórz site.webmanifest w edytorze tekstu i dodaj co najmniej name, short_name, start_url, display (na przykład standalone) i theme_color. Jeśli oznaczysz ikonę jako "purpose": "maskable", trzymaj najważniejszą część projektu w środkowych 80% kwadratu, bo krawędzie mogą zostać obcięte.

Wyniki wyszukiwania

Google pokazuje ikonę strony obok wyników. Jego wytyczne wymagają kwadratowej ikony o rozmiarze będącym wielokrotnością 48 px, wskazanej na stronie głównej i dostępnej dla robota. Warstwa 48 px w ICO i PNG 192 px spełniają te warunki. Zmiany w wynikach wyszukiwania mogą pojawić się dopiero po dniach lub tygodniach, bo ikona jest odświeżana przy ponownym indeksowaniu strony głównej.

Rozwiązywanie problemów

• Ciągle wyświetla się stary favicon. Przeglądarki agresywnie cache’ują favicony, niezależnie od strony. Otwórz bezpośrednio /favicon.ico i przeładuj go albo dodaj do linków ikon parametr wersji, na przykład ?v=2.
• Ikona jest pusta lub uszkodzona. Otwórz w przeglądarce adres każdego pliku. Błąd 404 zwykle oznacza, że pliki trafiły do podfolderu zamiast do katalogu głównego albo serwer potrzebuje właściwego typu dla .webmanifest.
• Ikona na karcie jest rozmyta. Wersje 16 i 32 px powstały ze szczegółowego źródła. Przygotuj uproszczoną wersję dla małych rozmiarów.
• Czarny kwadrat na ekranie początkowym iPhone’a. Źródło miało przezroczyste tło. Wygeneruj zestaw ponownie z wersji z jednolitym tłem.
• Cienka kreska w środku kwadratu. Źródłem był szeroki logotyp. Najpierw przytnij go do symbolu.

Lista kontrolna

1. Uprość logo do znaku, który jest czytelny w 16 px i działa na jasnych i ciemnych kartach.
2. Zrób je kwadratowe, najlepiej jako SVG, w przeciwnym razie PNG 512×512 lub większe.
3. Wygeneruj zestaw i skopiuj wszystkie pliki do katalogu głównego strony.
4. Dodaj cztery znaczniki link do sekcji head, a icon.svg tylko wtedy, gdy go masz.
5. Uzupełnij manifest, jeśli stronę ma się dać zainstalować.
6. Sprawdź bezpośrednio adres każdego pliku, a potem przetestuj na ekranie początkowym telefonu.