Laravel / WWW / Icons
Favicon w Laravelu: jak podłączyć eksport ikon i sprawdzić wynik?
Pobrany ZIP z ikonami nie zmienia jeszcze wyglądu karty przeglądarki. Pliki muszą trafić pod dostępne adresy, a layout strony powinien wskazywać właściwe zasoby. Poniższy przykład dotyczy aplikacji Laravel z widokami Blade i eksportu WWW z Icons byFox.
1. Przygotuj ikonę do małego podglądu
W generatorze Icons byFox wybierz format Web / PWA. Zacznij od krótkiego znaku i kontrastowego tła. Zanim pobierzesz paczkę, obejrzyj kompozycję w małym podglądzie: pełna nazwa firmy może być czytelna w dużym PNG, lecz zniknąć w ikonie karty.
Przy domyślnej nazwie eksport zawiera favicon.ico, apple-touch-icon.png, obrazy icon-16.png, icon-32.png, icon-48.png, icon-180.png, icon-192.png i icon-512.png oraz warianty maskable-192.png i maskable-512.png. Generator dołącza też site.webmanifest i README. Jeśli zmieniasz nazwę eksportu, sprawdź nazwy w pobranym archiwum przed wpisaniem ścieżek do layoutu.
W tym przykładzie trzymamy się domyślnych nazw i publikacji pod głównym adresem domeny. Umieszczenie aplikacji w podkatalogu wymaga dopasowania adresów; nie kopiuj bez sprawdzenia ścieżek zaczynających się od ukośnika.
2. Oddziel pliki publiczne od archiwum projektu
Rozpakuj ZIP poza publicznym katalogiem aplikacji. Eksport Icons zawiera również dane umożliwiające powrót do edycji, w tym manifest.json i sources/. Do instalacji favicon nie trzeba publikować oryginalnych materiałów ani całego archiwum. Wybierz pliki ikon oraz site.webmanifest, a projekt zachowaj osobno.
Umieść wybrane pliki w public/ projektu Laravel. Po wdrożeniu plik public/favicon.ico powinien być dostępny pod adresem /favicon.ico, a nie /public/favicon.ico. Katalog public jest katalogiem wejściowym serwera WWW; nie dopisuj jego nazwy do publicznego URL.
Sprawdź pliki, które już istnieją w aplikacji. Podmiana favicon.ico nie usunie starego odwołania do innego PNG lub SVG z layoutu. Zrób przegląd istniejących deklaracji ikon i świadomie wybierz, które mają pozostać.
3. Dodaj odwołania we wspólnym layoucie Blade
W sekcji head wspólnego layoutu umieść trzy odwołania: link rel="icon" do /favicon.ico, link rel="apple-touch-icon" do /apple-touch-icon.png oraz link rel="manifest" do /site.webmanifest. Pełne znaczniki znajdziesz w README eksportu. W Blade możesz generować adresy do tych plików funkcją asset(), zgodnie z konfiguracją swojej aplikacji.
Nie musisz importować tych plików do JavaScript ani dodawać ich jako punktów wejścia Vite, jeżeli publikujesz je bezpośrednio w public/. Sprawdź natomiast, czy layout jest używany także przez podstrony, stronę kontaktową i widoki błędów, na których chcesz zachować tę samą identyfikację.
W aplikacjach webowych Laravel wspólny layout ogranicza liczbę miejsc wymagających aktualizacji. Jeśli frontend składa się z kilku osobnych szablonów, przejrzyj każdy z nich — poprawna ikona na stronie głównej nie potwierdza konfiguracji całej witryny.
4. Dostosuj manifest do swojej witryny
Generator wpisuje do site.webmanifest przykładowe wartości name i short_name. Zastąp je nazwą swojej aplikacji, sprawdź start_url oraz kolory background_color i theme_color. Manifest ma opisywać publikowany produkt, a nie ustawienia przykładu z generatora.
Sprawdź tablicę icons i otwórz adres każdego wymienionego w niej pliku. Ścieżki względne są rozpatrywane względem adresu manifestu. Przeniesienie samego site.webmanifest do innego katalogu bez dostosowania ścieżek może więc zerwać odwołania do obrazów.
Eksport rozdziela zwykłe ikony oznaczone purpose: any i warianty purpose: maskable. Wariant maskable zachowuje większy margines wokół znaku, aby lepiej znosił przycinanie. Sam manifest i zestaw ikon nie są kompletnym wdrożeniem PWA ani gwarancją dostępności instalacji w każdej przeglądarce.
5. Odróżnij błąd ścieżki od starej kopii w cache
Po wdrożeniu otwórz bezpośrednio adres favicon.ico, ikonę Apple i site.webmanifest. Następnie w panelu Network przeglądarki sprawdź żądania z dokumentu HTML. Odpowiedź 200 nie wystarczy, jeśli serwer zamiast obrazu zwraca HTML strony błędu lub głównego widoku aplikacji.
Jeśli bezpośredni URL pokazuje nową grafikę, a karta nadal starą, sprawdź cache przeglądarki i ewentualnego CDN. Do diagnostyki możesz zmienić URL odwołania, na przykład dodając parametr wersji. Nie zmieniaj jednocześnie nazwy pliku, położenia manifestu i konfiguracji serwera — trudniej będzie ustalić, która zmiana pomogła.
Na koniec otwórz przynajmniej dwie podstrony i sprawdź zachowanie na telefonie. Ikona karty oraz ikona skrótu na ekranie początkowym to różne miejsca użycia. Zachowaj źródło i ZIP projektu, aby następna zmiana kolorów nie wymagała odtwarzania kompozycji z gotowego favicon.ico.
Dokumentacja do dalszej pracy
Instrukcje wdrożeniowe dobierz do wersji używanej w swoim projekcie. Poniższe źródła rozwijają opisane zagadnienia.