Jak utworzyć Faviconę
Nowoczesny favicon to coś więcej niż obraz 16×16. W tym przewodniku opisano przygotowanie źródła, generowanie wielu rozmiarów, konfigurację HTML, przykłady z życia codziennego i poprawki problemów, z którymi spotyka się większość zespołów.
Co to jest favicon?
favicon to mała ikona wyświetlana w przeglądarkach na kartach, paskach zakładek, listach historii i paskach adresu. Na telefonach staje się ikoną ekranu głównego, gdy ktoś zapisze Twoją witrynę. Na Windows pojawia się na pinach paska zadań i skrótach na pulpicie.
Słowo pochodzi od ikony ulubionych, ale praca wykracza daleko poza pojedynczy GIF 16 × 16. Dzisiejsza favicon to mała rodzina zasobów: favicon.ico poziomu głównego, opcjonalne warianty SVG i PNG, ikona dotykowa Apple dla iOS i ikony manifestu dla instalowalnych PWA.
Użytkownicy rzadko komentują dobry favicon, ale natychmiast zauważają brakujący lub niewyraźny. Wyraźna ikona sygnalizuje dopracowanie i sprawia, że zakładkę można rozpoznać na dwudziestu otwartych stronach.
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
Przygotuj obraz źródłowy
Zacznij od kwadratowego obrazu o wymiarach co najmniej 512×512 pikseli. SVG z kwadratem viewBox jest idealny, ponieważ skaluje się płynnie do każdego eksportowanego rozmiaru rastra.
Unikaj cienkich pociągnięć, drobnej typografii i skomplikowanych gradientów. W formacie 16×16 szczegóły linii włosów łączą się w szarą papkę. Uprość znak: mniej kształtów, większy kontrast, więcej wypełnienia wokół glifu.
Jeśli Twoje logo jest poziome, utwórz kwadratowe przycięcie, które wyśrodkuje symbol bez znaku słownego. Litery o wysokości poniżej 8 pikseli rzadko przetrwają zmniejszenie skali.
Eksportuj PNG-32 z przezroczystością, gdy jedyną opcją jest raster. Wypalone białe tło będzie wyglądać źle w ciemnym chromie przeglądarki i przyciemnionych programach mobilnych.
Wygeneruj .ico o wielu rozmiarach
Pakiet klatek 16, 32, 48, 64, 128 i 256 pikseli w jednym pliku favicon.ico. Przeglądarki i Windows odczytują nagłówek katalogu i dekodują tylko taki rozmiar, jakiego potrzebują.
Umieść favicon.ico w katalogu głównym swojej witryny (/favicon.ico). Nawet jeśli zadeklarujesz nowoczesne tagi <link>, roboty i starsi klienci nadal będą sondować tę ścieżkę zgodnie z konwencją.
Nasz generator favicon rasteryzuje każdy rozmiar po stronie klienta w mniej niż sekundę. Obraz źródłowy nigdy nie opuszcza przeglądarki, co ma znaczenie, gdy znakiem jest niepublikowane logo produktu.
Dodaj tagi HTML
Upuść te tagi w <head>, aby uzyskać pełną konfigurację na rok 2026:
<link rel="icon" href="/favicon.ico" size="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Linia SVG zapewnia ostre zakładki na Chromium i Firefox. Linia .ico obejmuje rezerwy Safari, skróty Windows i czytniki RSS ignorujące SVG.
Przykłady z życia wzięte
Statyczna witryna marketingowa: prześlij 512 × 512 PNG swojego logomarku, wygeneruj favicon.ico plus ikonę Apple Touch-ikona o wymiarach 180 × 180, dodaj cztery linie <link>, wdroż w /public lub katalogu głównym sieci. Czas całkowity: poniżej pięciu minut.
Aplikacja React / Vite: umieść ikony w katalogu /public, odwołuj się do nich ścieżkami względnymi do katalogu głównego w pliku Index.html. Vite kopiuje /public bez zmian w czasie kompilacji, więc /favicon.ico jest poprawnie rozwiązywany w środowisku produkcyjnym.
WordPress: pomiń instrukcję HTML — użyj opcji Wygląd → Dostosuj → Tożsamość witryny → Site Icon. Prześlij źródło 512×512; WordPress automatycznie emituje odpowiednie znaczniki. Zobacz nasz samouczek WordPress, aby uzyskać wskazówki dotyczące pomijania pamięci podręcznej.
Marka trybu ciemnego: wyeksportuj SVG, którego wypełnienie przełącza się wewnątrz @media (prefers-color-scheme: ciemny). Połącz go z neutralną rezerwą .ico dla klientów, którzy nigdy nie ładują SVG.
Sprawdź w każdej przeglądarce
Twarde odświeżanie (Ctrl+Shift+R lub Cmd+Shift+R) w Chrome, Safari, Firefox i Edge. Normalne przeładowanie często powoduje przechowywanie favicon w pamięci podręcznej przez kilka dni.
Sprawdź cztery powierzchnie: kartę przeglądarki, pasek zakładek, opcję Dodaj do ekranu głównego na iOS i przypiętą ikonę Windows na pasku zadań. Każda powierzchnia może wymagać innej rozdzielczości z pakietu.
Otwórz DevTools → Sieć, przefiltruj według ico lub png, załaduj ponownie i potwierdź 200 odpowiedzi dla każdego zadeklarowanego adresu URL ikony. Pojedynczy błąd 404 na apple-touch-icon.png to częsty błąd.
Często zadawane pytania
Czy nadal potrzebuję favicon.ico, jeśli mam SVG? Tak. Zachowaj .ico jako uniwersalną wersję rezerwową. SVG to ulepszenie, a nie zamiennik.
Jakie jest minimalne wykonalne favicon? Wielowymiarowe favicon.ico i /favicon.ico. Wszystko inne poprawia klarowność na ekranach o wysokiej rozdzielczości i mobilnych ekranach głównych.
Czy mogę użyć JPG? Można, ale traci się przez to przejrzystość. PNG lub SVG są prawie zawsze lepsze w przypadku ikon interfejsu.
Jak często powinienem aktualizować favicon? Zawsze, gdy zmienia się znak Twojej marki. Podbij jednokrotnie zapytanie ?v=2 w tagach <link>, aby pokonać agresywne pamięci podręczne przeglądarki.
Rozwiązywanie problemów
Ikona nie aktualizuje się po wdrożeniu: przeglądarki buforują favicon niezależnie od HTML. Odśwież mocno, wyczyść dane witryny lub tymczasowo dołącz ?v=2 do adresów URL ikon.
Niewyraźna ikona karty: źródło było za małe lub miało kształt niekwadratowy. Regeneruj z 512×512 lub SVG; sprawdź, czy .ico rzeczywiście zawiera ramkę 32×32.
Białe pole wokół logo: źródło miało nieprzezroczyste tło. Wyeksportuj ponownie z przezroczystością i ponownie wygeneruj .ico z wpisami skompresowanymi PNG.
Działa lokalnie, ale nie w środowisku produkcyjnym: potwierdź, że pliki znajdują się w publicznym katalogu głównym sieci, a nie tylko w src/. Sprawdź pamięci podręczne CDN i ścieżki uwzględniające wielkość liter na serwerach Linux.
Lista kontrolna krok po kroku
Eksportuj lub znajdź kwadratowy wzorzec o wymiarach 512×512 lub większych. Potwierdź przezroczystość, profil kolorów sRGB i brak ukrytej warstwy tła w pliku projektu.
Uruchom moduł główny za pomocą generatora favicon po stronie klienta. Pobierz favicon.ico, favicon.svg, jeśli dotyczy, apple-touch-icon.png i manifestuj PNG w jednym przebiegu.
Prześlij wszystkie pliki do publicznego katalogu głównego. Na hostach statycznych oznacza to ten sam folder co plik Index.html; w frameworkach użyj katalogu /public lub /static, który jest mapowany na /.
Wklej zalecany blok <link> do <head> przed jakimikolwiek skryptami blokującymi renderowanie. Wczesne umieszczenie pomaga przeglądarkom odkrywać ikony już po pierwszym malowaniu.
Sprawdź poprawność twardym odświeżeniem Chrome, Safari i Firefox. Przypnij kartę, dodaj stronę do zakładek i przetestuj opcję Dodaj do ekranu głównego na prawdziwym iPhonie, jeśli ruch iOS jest dla Ciebie ważny.
Udokumentuj zestaw ikon w swoim README lub systemie projektowym, aby następna rebranding nie zaczęła się od pojedynczego 32×32 PNG, który ktoś znalazł w e-mailu.
Typowe błędy, których należy unikać
Użycie pełnego poziomego logo przeskalowanego do szczeliny 16×16 — tekst staje się nieczytelnym szumem. Przytnij do symbolu.
Wysyłka tylko 16×16 PNG o zmienionej nazwie na .ico bez odpowiedniego katalogu o wielu rozmiarach — karty Windows i Retina są powiększone i rozmyte.
Zapomnij o ikonie Apple Touch i zajmij się kartami na pulpicie — użytkownicy iOS stanowią dużą część ruchu w sieci mobilnej.
Wskazywanie <link href> na ścieżkę CDN, która różni się w przypadku przemieszczania i produkcji bez kompilacji uwzględniających środowisko.
Zakładając, że WordPress, Shopify lub Webflow w magiczny sposób naprawią przesyłanie źródła o niskiej rozdzielczości. Śmieci w środku, śmieci w każdym rozmiarze.