Favicon nie jest wyświetlana — przewodnik rozwiązywania problemów
Przesłałeś favikonę, ale na karcie nadal wyświetlana jest ogólna kula ziemska lub stare logo. W tym przewodniku omówiono najczęstsze przyczyny — buforowanie, nieprawidłowe ścieżki, brakujące pliki i powodujące konflikt tagi <link> — w kolejności, w jakiej należy je sprawdzić.
Przeglądarki buforują ulubione ikony bardziej agresywnie niż prawie jakikolwiek inny zasób. Twarde odświeżenie (Ctrl+Shift+R lub Cmd+Shift+R) naprawia wiele fałszywych alarmów. Jeśli to się nie powiedzie, dołącz jednokrotnie ciąg zapytania dotyczący wersji: /favicon.ico?v=2.
Potwierdź, że plik istnieje pod adresem URL żądanym przez przeglądarkę. Otwórz /favicon.ico bezpośrednio w nowej karcie. Wartość 404 oznacza, że plik nie został wdrożony tam, gdzie myślisz – jest to typowe w przypadku kompilacji SPA, które obsługują tylko index.html.
Sprawdź ścieżki <link rel="icon"> href. Ścieżki bezwzględne (/favicon.ico) działają na każdej stronie; ścieżki względne (favicon.ico) łamią się na zagnieżdżonych trasach, takich jak /blog/post.
Jeśli używasz sieci CDN, wyczyść ścieżki favicon po wdrożeniu. Niektóre sieci CDN buforują odpowiedzi 404 dla /favicon.ico, gdy brakuje pliku podczas pierwszego żądania.
Wiele tagów <link rel="icon"> może dezorientować starsze przeglądarki. Najpierw umieść favicon.ico, a następnie warianty PNG/SVG z wyraźnymi atrybutami typu i rozmiarów.
WordPress, Shopify i hosty statyczne wstrzykują własne tagi. Wyświetl źródło strony i wyszukaj rel="icon" — częstą przyczyną są zduplikowane lub zastąpione tagi.
Ostrzeżenia HTTPS o mieszanej zawartości blokują adresy URL ikon ulubionych HTTP na bezpiecznych stronach. Obsługuj każdą ikonę przez HTTPS.
W przypadku rozwoju lokalnego niektóre przeglądarki odmawiają aktualizacji ulubionych ikon, dopóki nie wyczyścisz danych witryny dla localhost.
Jak to działa
- 1
Sprawdź adres URL pliku
Otwórz /favicon.ico w nowej karcie — spodziewaj się 200, a nie 404.
- 2
Sprawdź znaczniki <head>
Zobacz źródło; potwierdź jeden kanoniczny link favicon.ico i żadnych literówek.
- 3
Zniszcz pamięć podręczną raz
Dodaj ?v=2 do href, wdróż, odśwież mocno, a następnie w razie potrzeby usuń zapytanie.
Wypróbuj teraz
Przetestuj swoją ulubioną ikonę na żywo
Tester favicon na żywoFAQ
Dlaczego moja favikona działa lokalnie, ale nie w środowisku produkcyjnym?+
Kompilacje produkcyjne często wyprowadzają dane do podkatalogu lub prefiksu CDN. Sprawdź, czy wdrożona ścieżka jest zgodna z Twoim <link> href i czy plik jest uwzględniony w wynikach kompilacji.
Ile czasu minie, zanim Google zaktualizuje moją ikonę ulubionych w wynikach wyszukiwania?+
Ponowne zaindeksowanie może potrwać od kilku dni do tygodni. Upewnij się, że ikona ma wymiary co najmniej 48×48, jest kwadratowa i jest publicznie dostępna pod stabilnym adresem URL.
Czy adblock lub tryb prywatności ukrywają ikony ulubionych?+
Rzadko w przypadku ikon własnych. Serwery proxy favicon innych firm mogą być blokowane; ikony hostowane samodzielnie w Twojej domenie pozostają niezmienione.
Czy powinienem usunąć pamięć podręczną ikon ulubionych przeglądarki?+
Wyczyść dane witryny swojej domeny w ustawieniach przeglądarki lub przetestuj w prywatnym oknie z wyłączoną pamięcią podręczną.