Konwerter favicon

Utwórz z jednego obrazu rastrowego pliki potrzebne do dodania favicony do witryny. Wybierz sposób dopasowania źródła do kwadratowego obszaru, ustaw tło i pobierz archiwum ZIP zawierające wielorozmiarowy plik ICO, siedem ikon PNG, manifest aplikacji internetowej, konfigurację kafelka Windows oraz gotowy do skopiowania fragment HTML do nagłówka strony. Konwersja obrazu i tworzenie archiwum ZIP odbywają się lokalnie w przeglądarce.

Jak przekształcić obraz w pakiet favicon

  1. 1

    Wybierz obraz rastrowy

    Wybierz plik PNG, JPEG lub WebP, który mieści się w wyświetlonych limitach rozmiaru pliku i wymiarów obrazu. Pliki SVG, GIF i AVIF nie są obsługiwane.

  2. 2

    Wybierz sposób dopasowania

    Użyj opcji Wypełnij, aby zapełnić kwadrat i przyciąć krawędzie, albo opcji Dopasuj, aby zachować cały obraz i dodać wolną przestrzeń wokół niego.

  3. 3

    Ustaw tło

    Wybierz kolor tła dla przezroczystych pikseli i wolnej przestrzeni powstałej w trybie Dopasuj, a następnie sprawdź wygenerowane podglądy.

  4. 4

    Pobierz i zainstaluj

    Pobierz archiwum ZIP, umieść ikony i pliki konfiguracji w swojej witrynie, a dostarczone znaczniki linków skopiuj do nagłówka dokumentu.

Zawartość archiwum ZIP

Element pakietu Zastosowanie
favicon.ico Jeden kontener ICO zawierający warianty 16, 32, 48 i 256 px dla przeglądarek i programów korzystających z tradycyjnej ścieżki favicony
favicon-16x16.png Mały plik PNG do kart przeglądarki i innych niewielkich miejsc
favicon-32x32.png Ikona o większej gęstości do kart i zakładek przeglądarki
favicon-48x48.png Dodatkowy rozmiar dla pulpitu i skrótów
mstile-150x150.png Plik PNG 150 × 150 wskazany w konfiguracji kafelka Windows
apple-touch-icon.png Plik PNG 180 × 180 przeznaczony do skrótów na ekranie początkowym urządzeń Apple
android-chrome-192x192.png Ikona aplikacji 192 × 192 wskazana w manifeście aplikacji internetowej
android-chrome-512x512.png Ikona aplikacji 512 × 512 wskazana w manifeście aplikacji internetowej
site.webmanifest Metadane JSON kierujące zgodne przeglądarki do ikon 192 i 512 px
browserconfig.xml Konfiguracja kafelka Windows odwołująca się do wygenerowanych ikon
favicon-head.html Gotowe do skopiowania znaczniki łączące stronę z plikiem ICO, plikami PNG, ikoną Apple, manifestem i konfiguracją przeglądarki

Pliki ICO i PNG są celowo oddzielne. Przeglądarki i systemy operacyjne wybierają ikony na różne sposoby, dlatego pełny pakiet obsługuje zarówno tradycyjne żądanie /favicon.ico, jak i jawne deklaracje współczesnych ikon.

Znaczniki HTML w nagłówku

Pobrany pakiet zawiera fragment w następującej postaci:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-config" content="/browserconfig.xml">

Jeśli pliki znajdują się w podkatalogu lub na osobnym serwerze zasobów, zmień ścieżki przed wklejeniem znaczników do sekcji <head>. Nazwy plików i ścieżki w site.webmanifest oraz browserconfig.xml muszą odpowiadać faktycznie opublikowanym plikom.

Wypełnianie, dopasowanie i tło

  • Wypełnij całkowicie zajmuje każdy kwadratowy obszar wynikowy. Szeroki lub wysoki obraz źródłowy jest równomiernie przycinany przy przeciwległych krawędziach, dlatego ważne elementy warto umieścić blisko środka.
  • Dopasuj zachowuje widoczność całego obrazu. Niewykorzystana przestrzeń staje się marginesem w wybranym kolorze tła.
  • Tło może pozostać przezroczyste lub mieć wybrany jednolity kolor. W trybie Dopasuj wybór ten określa również kolor marginesu wokół obrazu. Przed publikacją sprawdź podglądy na jasnym i ciemnym tle strony.

Aby uzyskać możliwie ostre małe ikony, zacznij od prostego kwadratowego obrazu o wymiarach co najmniej 512 × 512 pikseli. Delikatne litery, bardzo cienkie linie i drobne szczegóły mogą zniknąć w wersji 16 px, nawet jeśli obraz źródłowy jest duży.

Limity danych wejściowych i umieszczanie plików

Ten konwerter obsługuje wyłącznie obrazy rastrowe PNG, JPEG i WebP. Sprawdza sygnaturę obrazu oraz odrzuca SVG, GIF, AVIF i wszystkie inne niewymienione formaty. Plik źródłowy może mieć maksymalnie 20 MiB, żaden bok nie może przekraczać 8192 pikseli, a cały obraz nie może mieć więcej niż 24 megapiksele. Wymiary są sprawdzane przed pełnym zdekodowaniem obrazu.

Po pobraniu rozpakuj archiwum ZIP i prześlij wygenerowane pliki do lokalizacji użytych w dostarczonym fragmencie. Ścieżki względem katalogu głównego, takie jak /favicon.ico, zakładają, że pliki są dostępne w katalogu głównym bieżącej domeny. Podczas zastępowania istniejącej favicony wyczyść pamięć podręczną witryny lub CDN, ponieważ przeglądarki często przechowują pliki ikon dłużej niż zwykłe zasoby strony.

Dołączony manifest zawiera metadane ikon, ale sam manifest i zestaw ikon nie wystarczą, aby witryna stała się instalowalną progresywną aplikacją internetową. Możliwość instalacji zależy także od strony, bezpieczeństwa transmisji i wymagań poszczególnych przeglądarek.

Najczęściej zadawane pytania

Możesz użyć formatu PNG, JPEG lub WebP. Konwerter sprawdza sygnaturę pliku zamiast polegać wyłącznie na jego nazwie i odrzuca SVG, GIF, AVIF oraz inne formaty.

Opcja Wypełnij powiększa obraz do całkowitego zapełnienia kwadratu i przy niekwadratowych proporcjach przycina równe części przy krawędziach. Opcja Dopasuj zachowuje cały obraz i wypełnia pozostałą część kwadratu wybranym kolorem tła.

ICO jest kontenerem, który może przechowywać kilka małych rozmiarów ikon w jednym tradycyjnym pliku favicony. Osobne pliki PNG zapewniają przeglądarkom i platformom zasoby o konkretnych wymiarach do kart, skrótów na ekranie początkowym oraz ikon aplikacji. Zachowanie obu formatów poprawia rzeczywistą zgodność.

Nie. Manifest opisuje wygenerowane ikony aplikacji i powiązane metadane wyświetlania, ale możliwość instalacji zależy od dodatkowych wymagań przeglądarki oraz od sposobu budowy i udostępniania samej witryny.

Dostarczony fragment używa ścieżek względem katalogu głównego, dlatego najprościej umieścić rozpakowane pliki w katalogu głównym domeny. Jeśli korzystasz z innego folderu lub serwera zasobów, zaktualizuj fragment oraz ścieżki w manifeście i konfiguracji przeglądarki.

Nie. Przetwarzanie obrazu i tworzenie archiwum ZIP odbywają się w przeglądarce. W wieloetapowym procesie szkic IndexedDB może przechowywać obraz w tej przeglądarce przez maksymalnie 30 minut, aby przekazywać go między etapami. Takie lokalne przekazanie nie jest wysyłaniem pliku na serwer.

Powiązane narzędzia