Rozmiary favicon: ICO, Apple touch icon i manifest PWA

Karta przeglądarki, skrót zapisany na ekranie głównym i zainstalowana PWA nie muszą używać tego samego pliku. Mały zestaw z jawnymi odwołaniami łatwiej utrzymać niż jeden duży PNG, który miałby obsłużyć wszystkie sytuacje.

Pliki eksportu Web / PWA

Obecna paczka z Generatora Ikon od Fox'a zawiera poniższe assety. Nazwy PNG w tabeli zakładają domyślną nazwę pliku icon.

Te rozmiary opisują obecny eksport, a nie uniwersalną listę wymagań każdej przeglądarki. Zachowaj wygenerowany manifest razem z obrazami, aby własne nazwy plików nadal pasowały do odwołań.

Dodaj pliki do strony

Skopiuj rozpakowaną paczkę webową do publicznego katalogu strony. Przy eksporcie zbiorczym użyj zawartości web/. W sekcji head strony dodaj:

<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Zmień name, short_name i start_url w manifeście zgodnie z aplikacją. Przykładowe ścieżki zakładają publikację pod /; dostosuj je dla aplikacji w podkatalogu. Jeśli masz już manifest, scal wpisy ikon zamiast zastępować istniejącą konfigurację.

Zmieść grafikę maskable w bezpiecznym kole

Ikona maskable pozostawia platformie miejsce na przycinanie. Gwarantowany bezpieczny obszar to centralne koło o promieniu 40% szerokości obrazu. Ważne elementy powinny mieścić się w kole, a tło pokrywać cały obszar. Zobacz poradnik ikon maskable na web.dev.

Źródło do pobrania zawiera zwarty autorski znak na nieprzezroczystym tle. Osobny diagram pokazuje bezpieczne koło. Nie wgrywaj diagramu jako ikony aplikacji: jego linie i opisy służą do nauki. Generator centruje i ogranicza wielkość grafiki maskable, ale nadal warto sprawdzić kształt własnego źródła.

Sprawdź przed publikacją

Otwórz bezpośrednio manifest i adres każdego wskazanego obrazu. W panelu Application przeglądarki sprawdź błędy manifestu i podglądy ikon. Następnie przetestuj zapisany skrót. Cache favicon może przetrwać odświeżenie strony, dlatego przy starej ikonie sprawdź odpowiedź serwera i ścieżkę pliku.

Google Search ma własne zasady wyświetlania favicon, w tym dostępność zasobów dla robotów i stabilny adres ikony. Poprawne pliki nie gwarantują natychmiastowej aktualizacji wyników wyszukiwania.

Dla natywnej aplikacji Apple użyj eksportu katalogu assetów iOS, a nie webowej ikony touch.

Koło bezpiecznego obszaru w podglądzie

W panelu Kompozycja włącz Koło bezpiecznego obszaru. Suwakiem Średnica koła ustaw wartość od 20% do 100% krótszego boku ikony; domyślnie jest to 80%. Dopasuj skalę i położenie grafiki, obserwując jej odstęp od koła.

Nakładka służy wyłącznie do podglądu — nie trafia do PNG ani ZIP-a. Jej ustawienia są zapamiętywane w tej przeglądarce, ale nie są częścią udostępnianego projektu. Koło ułatwia ocenę centralnego ułożenia znaku. Samo włączenie nakładki nie dodaje marginesu do plików; sprawdź też małe favicony oraz wariant maskable w podglądzie.