Jak zrobić favicon
Rozmiary, formaty i kod potrzebne do faviconu, który wyświetla się wszędzie.
Favicon to mała ikona w karcie przeglądarki, w zakładkach i obok Twojej strony w mobilnych wynikach wyszukiwania Google. Brak faviconu sprawia, że strona wygląda na niedokończoną, a rozmazany wygląda jeszcze gorzej. Zrobienie dobrego zajmuje kilka minut.
Zacznij od właściwej grafiki
Favicon wyświetla się nawet w rozmiarze 16 na 16 pikseli, więc pełne logo z napisem będzie nieczytelne. Użyj prostego znaku: symbolu z logo, jednej litery albo wyrazistego kształtu w kolorze marki. Sprawdź to, zmniejszając go na ekranie do jednej czwartej: jeśli nadal wiesz, co to jest, zadziała.
Zacznij od kwadratowego obrazu o wymiarach co najmniej 512 na 512 pikseli, najlepiej PNG z przezroczystym tłem. Jeśli Twoje logo nie jest kwadratowe, przytnij je do kwadratu z proporcjami zablokowanymi na 1:1.
Potrzebne pliki
| Plik | Rozmiar | Używany przez |
|---|---|---|
| favicon.ico | Zawiera wersje 16, 32 i 48 pikseli | Przeglądarki, starsze systemy, domyślne żądanie /favicon.ico |
| Ikona PNG | 32 na 32 i 192 na 192 | Nowoczesne przeglądarki, ekrany główne Androida |
| apple-touch-icon.png | 180 na 180 | Zakładki na ekranie głównym iPhone’a i iPada |
Wyszukiwarka Google również pokazuje favicon w wynikach. Musi być kwadratowy, mieć co najmniej 48 na 48 pikseli i być dostępny dla robotów na Twojej stronie.
Tworzenie pliku ICO
Upuść kwadratowy PNG w konwerterze PNG na ICO. Powstanie prawdziwy plik .ico z małymi rozmiarami, o które proszą przeglądarki. Wersje PNG zrobisz, zmieniając rozmiar tego samego kwadratowego obrazu na 180, 192 i 32 piksele.
Dodanie go do strony
Wgraj favicon.ico do katalogu głównego strony, żeby był dostępny pod adresem twojastrona.pl/favicon.ico, i dodaj te wiersze w sekcji head swoich stron:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
W WordPressie przejdź do Wygląd, Dostosuj, Tożsamość witryny i wgraj kwadratowy obraz jako Ikonę witryny; WordPress sam utworzy rozmiary. Shopify, Wix i Squarespace mają ustawienie faviconu w ustawieniach witryny lub motywu.
Gdy nowy favicon się nie pokazuje
Przeglądarki uparcie przechowują favicony w pamięci podręcznej. Otwórz stronę w oknie prywatnym albo wejdź bezpośrednio na twojastrona.pl/favicon.ico i odśwież. Google może potrzebować dni lub tygodni, by zaktualizować ikonę w wynikach, po ponownym odwiedzeniu strony głównej.
Typowe błędy
- Użycie pełnego logo z małym tekstem, które przy 16 pikselach zamienia się w plamę.
- Biała ikona na przezroczystym tle, która znika na jasnych kartach przeglądarki.
- Dostarczenie tylko malutkiego pliku 16 pikseli, który na ekranach o wysokiej rozdzielczości wygląda nieostro.
- Zapomnienie o pliku pod adresem /favicon.ico, o który niektóre przeglądarki i roboty proszą niezależnie od tego, co podaje strona.