Jak korzystać z narzędzia
- 1.Upuść logo na stronę, wklej je albo kliknij „Wybierz obraz”. Najlepszy efekt daje kwadratowy PNG lub SVG o wymiarach co najmniej 512 × 512 pikseli.
- 2.Dostosuj margines, a jeśli logo potrzebuje jednolitego kształtu w tle, wybierz kolor tła i zaokrąglone rogi.
- 3.Sprawdź podgląd: karty przeglądarki pokazują, jak ikona wygląda w rozmiarze 16 pikseli w jasnym i ciemnym motywie.
- 4.Kliknij „Pobierz favicon.zip”, wgraj pliki do głównego katalogu strony i wklej kod HTML do sekcji head swoich podstron.
Jakich plików favicon potrzebuje strona
Dziś wystarcza niewielki zestaw, który obsłuży każdą przeglądarkę i urządzenie. favicon.ico to klasyczny plik, o który przeglądarki, czytniki RSS i inne narzędzia proszą pod adresem /favicon.ico, nawet jeśli strona o nim nie wspomina; zawiera wersje 16, 32 i 48 pikseli. Nowoczesne przeglądarki wolą ikonę SVG (icon.svg), która pozostaje ostra w każdym rozmiarze, a dzięki zapytaniu prefers-color-scheme wewnątrz pliku SVG może nawet zmieniać kolory w trybie ciemnym.
apple-touch-icon.png (180 × 180) to ikona, której używają iPhone’y i iPady, gdy ktoś doda Twoją stronę do ekranu początkowego. Android i zainstalowane aplikacje webowe korzystają z plików PNG 192 i 512 pikseli wymienionych w site.webmanifest. Starsze poradniki wymieniają dziesiątki rozmiarów; do wszystkich pozostałych zastosowań przeglądarki skalują tych kilka plików.
Gdzie umieścić pliki
Wgraj pliki do głównego katalogu strony, tak aby wczytywały się z adresów takich jak https://example.com/favicon.ico, i dodaj wiersze HTML do sekcji <head> każdej podstrony. W pliku site.webmanifest zmień nazwę na nazwę swojej strony.
Frameworki często mają własne rozwiązania. W Next.js App Router umieść favicon.ico, icon.svg (lub icon.png) i apple-icon.png w folderze app, a tagi zostaną dodane automatycznie. W WordPressie wgraj kwadratowy obraz w menu Wygląd → Dostosuj → Tożsamość witryny → Ikona witryny. Kreatory stron, takie jak Shopify, Wix i Squarespace, mają pole na favicon w ustawieniach witryny.
Ikona, która działa w rozmiarze 16 pikseli
Karta przeglądarki wyświetla ikonę w rozmiarze 16 × 16 pikseli (32 na ekranach o wysokiej rozdzielczości). Drobny tekst, cienkie linie i szczegółowe logo zamieniają się w takim rozmiarze w rozmazaną plamę. Użyj prostego symbolu, pierwszej litery nazwy lub wyrazistego fragmentu logo, z mocnym kontrastem.
Sprawdź oba podglądy kart: ciemne logo na przezroczystym tle może zniknąć w ciemnym motywie przeglądarki. Jeśli tak się dzieje, nadaj ikonie kolor tła albo dodaj do logo jasny kontur.
Pytania i odpowiedzi
Czy moje logo jest gdzieś wysyłane?
Nie. Ikony są rysowane i pakowane do pliku ZIP przez Twoją przeglądarkę, na Twoim urządzeniu. Nic nie trafia do nestoo ani nikogo innego.
Jaki rozmiar powinien mieć favicon?
Karty przeglądarki używają rozmiarów 16 × 16 i 32 × 32 piksele i właśnie je zawiera favicon.ico (plus 48 × 48 dla skrótów w Windows). Telefony i aplikacje webowe potrzebują większych ikon: 180 × 180 dla Apple touch icon oraz 192 × 192 i 512 × 512 dla Androida. Zacznij od obrazu o wymiarach co najmniej 512 × 512 pikseli albo od pliku SVG.
Dlaczego nowy favicon się nie wyświetla?
Przeglądarki długo przechowują favicony w pamięci podręcznej, czasem nawet po twardym odświeżeniu. Otwórz plik ikony bezpośrednio (/favicon.ico) i odśwież go, spróbuj w oknie prywatnym albo dodaj wersję do linków w kodzie HTML, np. href="/favicon.ico?v=2", aby przeglądarki pobrały nowy plik.
ICO czy PNG?
Jedno i drugie. Zostaw favicon.ico w głównym katalogu, bo niektóre przeglądarki i narzędzia szukają wyłącznie tego pliku. Nowoczesne przeglądarki używają ikon PNG lub SVG wskazanych w Twoim kodzie HTML. Plik ICO tworzony tutaj zawiera w środku obrazy PNG, dzięki czemu jest mały.
Czy mogę zrobić favicon z emoji lub tekstu?
Nie bezpośrednio w tym narzędziu, ale z SVG to proste: zapisz <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🦊</text></svg> jako icon.svg i upuść plik tutaj. Emoji wyglądają inaczej w każdym systemie operacyjnym, więc wygenerowane pliki PNG i ICO pokażą emoji tak, jak rysuje je Twój komputer.