Które pliki favicon potrzebuje strona i jakie mają rozmiary

Strona potrzebuje niewielkiego zestawu plików ikon, a większość decyzji dotyczy rozmiarów. Umieść w katalogu głównym witryny plik favicon.ico z obrazami 16, 32 i 48 pikseli, który będzie widoczny na kartach przeglądarki i w Windows. Dodaj ikonę Apple touch 180 px dla ekranów głównych iPhone'a i iPada oraz ikony PNG 192 i 512 px, wymienione w manifeście aplikacji webowej. Generator favicon tworzy wszystkie te pliki z jednego logo i zapisuje linijki HTML do wklejenia na stronach.

Pliki i ich rozmiary

Plik ZIP, który pobiera generator, zawiera wszystkie siedem plików. Plik favicon.ico składa się z trzech obrazów PNG w rozmiarach 16, 32 i 48 pikseli, zapisanych w jednym pliku. Każda ikona to to samo logo narysowane mniejszym rozmiarem. Generator pracuje na wersji obrazu 512 pikseli i z niej tworzy każdy rozmiar.

Linijki HTML

Generator zapisuje cztery linijki do sekcji head Twoich stron:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Pierwsza linijka wskazuje plik favicon.ico i deklaruje go jako 48 na 48. Druga podaje PNG 32 px. Trzecia wskazuje ikonę Apple touch, a czwarta prowadzi do manifestu, w którym wymienione są ikony 192 i 512 px. PNG 16 px znajduje się w ZIP, ale nie w tych linijkach. Przeglądarki szukają też samodzielnie /favicon.ico, więc plik zostanie znaleziony nawet bez pierwszej linijki. Zachowaj ścieżki bez zmian, chyba że Twoje pliki leżą w innym miejscu.

Dlaczego małe rozmiary wymagają prostych kształtów

Ikona 16 na 16 pikseli ma w sumie 256 pikseli. Ikona 48 px ma ich 2304, a źródło 512 px ma 262 144. Większość szczegółów logo znika przy 16 pikselach, więc cienka linia albo małe słowo zamienia się w rozmazaną plamę. Używaj prostego znaku albo jednej lub dwóch liter o mocnym kontraście.

Opcja litery przyjmuje jeden lub dwa znaki i rysuje je dużo w środku ikony, zmniejszając je, jeśli są zbyt szerokie. Dostępne kształty to Square, Rounded i Circle. Podgląd pokazuje obok siebie wyniki dla 16, 32, 48, 180 i 512 px oraz karty jasną i ciemną, dzięki czemu możesz ocenić małe rozmiary przed pobraniem. Podglądy aktualizują się przy zmianie kształtu, marginesu albo tła, więc możesz najpierw wypróbować każde ustawienie.

Margines, tło i ikona Apple

Margines ma trzy ustawienia: No padding, Small i Large. Small zostawia 10 procent ikony pustej z każdej strony, a Large 20 procent. W trybie obrazu No padding przycina zdjęcie do środkowego kwadratu, więc końce szerokiego logo znikają. Ustawienia z marginesem mieszczą natomiast całe zdjęcie w kwadracie.

Wybór tła to Transparent, White i Custom, a domyślnie wybrane jest Transparent. Ikona Apple touch jest zawsze nieprzezroczysta. W trybie obrazu jej przezroczyste obszary przyjmują wybrane tło, a gdy tłem jest Transparent, zostaje biel. W trybie liter wypełniane są kolorem tła litery. Przezroczyste obszary w ikonie Apple touch mogą na iPhone'ie i iPadzie wyglądać jak czarne, dlatego generator je wypełnia. Pozostałe rozmiary zachowują przezroczystość, którą wybrałeś. Dlaczego przezroczysty PNG robi się czarny wyjaśnia przyczynę.

Favicon jest kwadratowy, więc szerokie logo najpierw potrzebuje kwadratowej ramki. Kwadratowy kreator zdjęć mieści całe zdjęcie w proporcji 1:1, z rozmytą, białą, czarną albo własną ramką, więc nic nie zostaje ucięte. Zmiana rozmiaru zdjęcia ustawia dokładne piksele. Przy włączonym Keep proportions i wypełnionych obu bokach zdjęcie mieści się w ramce bez zniekształceń. Proporcje zdjęć wyjaśnione opisuje najczęstsze kształty.

Zmiany, które potrzebują czasu, by się pokazać

Przeglądarki trzymają favicon w pamięci podręcznej. Zmieniony plik pod tym samym adresem może jeszcze długo pokazywać stary obraz, więc zwykłe odświeżenie często nie wystarcza. Otwórz bezpośrednio adres ikony, aby sprawdzić, czy nowy plik jest na serwerze, a potem przeładuj stronę z pominięciem pamięci podręcznej. Jeśli stara ikona nadal się pojawia, nadaj nowemu plikowi inną nazwę i zaktualizuj link, aby wskazywał na niego.

Jak to zrobić w fixmint

1. Wybierz Image i upuść logo w polu albo wybierz Letter i wpisz jeden lub dwa znaki.
2. Ustaw Padding na None, Small lub Large, a Background na Transparent, White albo Custom colour.
3. Sprawdź ikony 16, 32 i 48 px na jasnej i ciemnej karcie oraz podglądy 180 i 512 px.
4. Naciśnij Download ZIP, aby pobrać wszystkie siedem plików, albo Download favicon.ico, aby pobrać sam ten plik.
5. Naciśnij Copy HTML i wklej linijki z HTML for your head do sekcji head każdej strony.

Przypadki szczególne

• Twój obraz zostaje na urządzeniu. Generator tworzy ikony w przeglądarce i nic nie jest wysyłane.
• Dwie litery. Dwa znaki są przyjmowane i rysowane mniejszym rozmiarem, aby oba się zmieściły, przez co przy 16 px są trudniejsze do odczytania niż pojedyncza litera.
• Nazwy plików. Zachowaj nazwy, których używa HTML, bo linki na nie wskazują.
• Nieczytelne pliki. Jeśli z obrazu nie da się utworzyć ikon, generator pokazuje komunikat „Could not make the icons from this input. Try another image.” i czyści wyniki. Wybierz inny plik albo zapisz obraz ponownie w popularnym formacie.