Jak stworzyć favicon.

Otwórz Generator Favicon / ICO i wybierz Obraz. Prześlij PNG, JPG, JPEG, WebP lub GIF, albo wybierz Wypróbuj próbkę. Przykład wykorzystuje favicon-orbit.png, znak fioletowej orbity o wymiarach 512 × 512 pikseli z przezroczystymi rogami. Dane wejściowe mają 202,491 bajtów.

Dla marki bez gotowego logo, wybierz Tekst na stronie narzędzia. Wpisz jedną lub dwie litery i wybierz Kontynuuj. Edytor oferuje czcionki Modern sans, Classic serif i Monospace, oraz oddzielne kolory tekstu i tła. Akceptowane są do trzech znaków, ale dodatkowe znaki mogą stać się trudne do rozpoznania w małych rozmiarach.

Zachowaj oryginalną grafikę. Generator tworzy nowe pliki ikon i nie nadpisuje źródła. Dane wejściowe GIF stają się statyczną ikoną, a nie animowanym faviconem.

Dla monogramu menu Czcionka zaczyna się od trzech dołączonych stylów. Wybierz Użyj czcionek systemowych w obsługiwanej przeglądarce na komputerze i zezwól na dostęp, aby dodać czcionki zainstalowane na urządzeniu. Użyj strzałek poprzedni i następny, aby porównać sąsiednie czcionki, lub wybierz rodzinę i sprawdź podgląd na żywo, szczególnie przy 16 pikselach. Czcionki pozostają na urządzeniu; dołączone style działają bez zezwolenia.

Edytor wyświetla jasne i ciemne karty przeglądarki oraz podglądy w typowych rozmiarach ikon. Sprawdź najpierw przykład 16-pikselowy; to najsurowszy test, czy znak pozostaje rozpoznawalny. Podgląd Apple Touch reprezentuje eksport 180-pikselowy i jest wyświetlany mniejszy w obszarze roboczym.

Na telefonie otwórz Ustawienia. Pozostaw Twórz z ustawione na Przesłany obraz, a Dopasowanie obrazu na Pokaż cały obraz. Dla tej próbki ustaw Odstęp wokół zawartości na 0 i włącz Przezroczyste tło. Źródło zawiera już własny zaokrąglony fioletowy kształt i wyraźne marginesy, więc nie potrzebuje dodatkowego kolorowego tła.

Przy innym źródle Pokaż cały obraz zachowuje krawędzie, podczas gdy Wypełnij ikonę może je przyciąć. Zaokrąglony kwadrat, Kwadrat i Koło definiują zewnętrzny kształt. Przezroczyste tło zachowuje czyste obszary, ale nie może usunąć nieprzezroczystego tła już narysowanego na zdjęciu. Sprawdzaj najmniejszy podgląd po każdej zmianie kadrowania.

W sekcji Pobierz wybierz Pakiet ikon strony (ZIP) dla tego przykładu. Pozostaw nazwę strony jako My website dla próbki lub zastąp ją prawdziwą nazwą marki dla własnego projektu. Ta nazwa jest używana w site.webmanifest; nie jest dodawana jako tekst na obrazie.

Wybierz Start. Przeglądarka wygeneruje siedmioklatkowy favicon.ico z kwadratowymi obrazami o wymiarach 16, 24, 32, 48, 64, 128 i 256 pikseli. Stworzy również ikony PNG o wymiarach 16, 32, 48, 180, 192 i 512 pikseli, manifest oraz instrukcje instalacji. Wynikiem jest jeden plik ZIP zamiast osobnego przycisku pobierania dla każdej ikony.

Jeśli potrzebujesz tylko klasycznego favicon.ico, wybierz zamiast tego Multi-size ICO. Jest to przydatne, gdy platforma strony internetowej akceptuje przesłanie ICO i nie wymaga osobnego pakietu.

Pobieranie zapisuje website-icons.zip. Rzeczywisty przykład zawiera dziewięć plików i ma 304,351 bajtów. Powyższe porównanie pokazuje źródło o wymiarach 512 pikseli obok oryginalnej klatki 256 pikseli wyodrębnionej z wyeksportowanego ICO, zamiast symulowanego zrzutu ekranu przeglądarki.

Rozpakuj ZIP, prześlij pliki ikon do katalogu głównego swojej strony i przeczytaj INSTALL.txt. Zawiera on tagi linków HTML dla ICO, ikony PNG, ikony Apple Touch oraz manifestu internetowego. Jeśli umieścisz pliki w podfolderze, zaktualizuj zarówno ścieżki HTML, jak i ścieżki ikon wewnątrz site.webmanifest.

Sprawdź swoją stronę w nowej karcie przeglądarki i na urządzeniach, na których Ci zależy. Przeglądarki mogą przechowywać ikony w pamięci podręcznej, więc stara ikona nie oznacza od razu, że instalacja się nie powiodła. Zachowaj obraz źródłowy i pobrany pakiet przed odświeżeniem edytora, ponieważ odświeżenie powoduje powrót do głównej strony narzędzia.