Poradniki o favicon
Konkretne odpowiedzi na pytania pojawiające się podczas tworzenia favicon: rozmiary, formaty i kod do wklejenia.
Rozmiary favicon: formaty i zastosowania
Wyszukiwanie „rozmiar favicon” nadal zwraca listy piętnastu plików pochodzące z 2014 roku. W praktyce sześć wymiarów wystarcza dziś dla kart przeglądarki, wyników wyszukiwania, iOS, Androida i PWA. Oto one i ich uzasadnienie.
Przeczytaj poradnikKonwersja PNG na ICO za darmo
Plik .ico nadal jest oczekiwany w katalogu głównym witryny, a większość konwerterów online wymaga wysłania obrazu na serwer. Oto jak uzyskać poprawny favicon.ico z wieloma rozmiarami na podstawie PNG, bez wysyłania czegokolwiek.
Przeczytaj poradnikapple-touch-icon: rozmiar, format i kod
Ikona Apple Touch jawnie wskazuje obraz używany, gdy odwiedzający dodaje witrynę do ekranu głównego iPhone’a. Jest odrębna od favicon karty przeglądarki i ikon zadeklarowanych w manifeście aplikacji internetowej.
Przeczytaj poradnikFavicon w trybie ciemnym dzięki SVG
Czarne logo na przezroczystym tle wygląda świetnie na jasnej karcie i znika na ciemnej. ICO nie potrafi się dostosować, ale favicon SVG potrafi: zawiera regułę CSS zmieniającą kolory zależnie od motywu przeglądarki.
Przeczytaj poradnikDodawanie favicon w HTML
Niezawodna favicon w HTML nie opiera się na jednym magicznym znaczniku. Wymaga niewielkiego zestawu dostępnych plików i odnośników w sekcji head. Ta procedura obsługuje nowoczesne karty, starsze programy i skróty mobilne bez mnożenia historycznych wariantów.
Przeczytaj poradnikFavicon nie wyświetla się lub nie aktualizuje
Gdy brakuje favicon, problem nie zawsze tkwi w pliku. Przeglądarka, CDN, service worker i wyszukiwarka mogą przechowywać różne wersje. Uporządkowana diagnostyka pozwala uniknąć zmiany kilku rzeczy naraz.
Przeczytaj poradnikFavicon w Next.js App Router
App Router może tworzyć elementy ikon na podstawie konwencjonalnych plików lub obiektu metadata. Obie metody są poprawne, ale mieszanie ich bez jasnej zasady łatwo prowadzi do konkurujących deklaracji.
Przeczytaj poradnikPoradnik favicon SVG
SVG zachowuje ostre krawędzie przy każdej gęstości pikseli i może dostosowywać kolory do motywu. Ta elastyczność ma jeden warunek: plik musi pozostać samodzielny, prosty i czytelny na bardzo małej powierzchni.
Przeczytaj poradnik