Generator favicon HTML
Wygeneruj znaczniki <head>, które Twoja witryna potrzebuje dla faviconu, ikony dotyku i kolorów motywu.
Generator favicon HTML
Favicon to nie jeden plik: przeglądarka na karcie chce .ico, ekran główny telefonu chce 180x180 apple-touch-icon, przypięta karta Safari chce jednolitą SVG mask, a monit instalacji PWA czyta ikony wymienione w manifeście. Narzędzie to zapisuje dokładne znaczniki <link> i <meta> dla wszystkich z nich na podstawie ścieżki podstawowej i zestawu rozmiarów ikon, więc kopiujesz jeden blok do <head> zamiast składania go z pięciu różnych specyfikacji.
Ustaw ścieżkę podstawową tam, gdzie będą przechowywane pliki ikon — root lub podfolder taki jak /icons/ — a każdy href jest zbudowany względem niego. Niezależnie przełączaj ICO, PNG i SVG: PNG również dodaje apple-touch-icon o stałym rozmiarze 180x180, którego oczekuje Apple, a SVG dodaje mask-icon, którego kolor pochodzi z Twojego jasnego theme-color (lub ciemnego, jeśli zostawiłeś jasny pusty). Zarówno jasny jak ciemny theme-color stają się oddzielnym znacznikiem <meta name="theme-color"> z zapytaniem prefers-color-scheme, tak aby chrom przeglądarki pasował do strony w każdym trybie. Oddzielny przełącznik dodaje starsze znaczniki msapplication, które niektóre scenariusze kafelków Windows wciąż czytają.
Pole rozmiarów przyjmuje listę oddzieloną przecinkami lub nową linią — "16x16, 32x32, 192x192" — a zwykła liczba taka jak "48" to skrót na kwadratową ikonę; nierozpoznane wpisy są usuwane, a nie odrzucane. Włącz listę plików, a wynik kończy się komentarzem zawierającym każdą referencyjną ścieżkę w porządku, czyli listę do przesłania.
Wszystko uruchamia się w Twojej przeglądarce: nic, co wpisujesz, nigdzie nie jest wysyłane. Skopiuj wynik do <head> swojej strony, pobierz go jako plik .txt lub wyślij do wejścia innego narzędzia, aby kontynuować pracę.