Generator faviconów
Utwórz pełny pakiet favicon z SVG, PNG lub JPG
Zamień jedno logo SVG, PNG lub JPG w favicon.ico, pliki PNG dla przeglądarek, ikonę Apple Touch, ikony Android Chrome, site.webmanifest i gotowe tagi HTML. Pobierz cały pakiet jako ZIP; wszystko jest generowane prywatnie w przeglądarce.
Edytowanie ustawień domyślnych dla nowych plików
Dodaj logo, aby zobaczyć je w każdym rozmiarze favicony.
Wynik
head-tags.html
<link rel="icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Umieść wszystkie pliki poza index.html w folderze, z którego serwowana jest Twoja strona, a potem wklej te znaczniki w sekcji head każdej podstrony.
Nie ma jeszcze plików. Upuść pliki powyżej lub kliknij WYBIERZ PLIKI.
Czym jest favicon?
Favicon to mała ikona, którą przeglądarka pokazuje obok tytułu strony: w karcie, w zakładkach, w historii i w wynikach niektórych wyszukiwarek. Zaczynał jako pojedynczy plik favicon.ico 16 × 16 w katalogu głównym witryny. Dziś to samo zadanie wykonuje zestaw plików w różnych rozmiarach, ponieważ karta przeglądarki, skrót na ekranie głównym i monit o instalację renderują ikonę w zupełnie innej skali.
Dlaczego pakiet faviconów zamiast jednego pliku
Pojedynczy favicon.ico wciąż działa, ale sam w sobie już nie wystarcza. Karty przeglądarki odczytują z pliku .ico wpis 16 lub 32 px, Safari prosi o apple-touch-icon 180 px, gdy strona trafia na Home Screen, a Android Chrome czyta z manifestu webowego pliki PNG 192 i 512 px na potrzeby monitu o instalację i ekranu powitalnego. Eksportowanie ich po kolei to sześć eksportów, sześć okazji, żeby coś inaczej przyciąć, i manifest pisany ręcznie. Wygenerowanie ich z jednego źródła sprawia, że każdy rozmiar jest identyczny, i wymaga jednego upuszczenia pliku.
Jak wygenerować pakiet faviconów
- 1
Przeciągnij swoje logo albo kliknij WYBIERZ PLIKI, aby je dodać. Działają SVG, PNG, JPG, WebP, GIF, BMP, AVIF i TIFF, do 40 naraz.
- 2
Ustaw tło, promień rogów, padding, skalę i wyrównanie, a potem wpisz nazwę aplikacji i nazwę skróconą, które trafią do manifestu. Każdy rozmiar odrysowuje się, gdy je zmieniasz.
- 3
Kliknij ZAPISZ WSZYSTKO, aby pobrać favicon-package.zip, a potem wklej cztery znaczniki link z zakładki Znaczniki HTML w sekcji head każdej podstrony.
Prywatność: Twoje pliki nie opuszczają przeglądarki
Konwersja przebiega lokalnie w przeglądarce przy użyciu JavaScript i WebAssembly. Nie ma przesyłania plików ani konwersji po stronie serwera, więc dodane pliki pozostają na Twoim urządzeniu.
Przetwarzanie lokalne pomaga chronić poufne logo, dokumenty wewnętrzne i niepublikowane grafiki klientów. Strony i kod konwersji są zapisywane w pamięci podręcznej w miarę ich używania, więc narzędzia, które już otworzyłeś, mogą nadal działać bez połączenia sieciowego.
Najczęściej zadawane pytania
Jakie pliki dostaję i gdzie je umieścić?
favicon.ico (z rozmiarami 16, 32 i 48 px w jednym pliku), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest oraz index.html ze znacznikami. Skopiuj wszystko poza index.html do folderu, z którego serwowana jest Twoja strona, a potem wklej cztery znaczniki link w sekcji head każdej podstrony.
Czy zamiast SVG mogę użyć logo w PNG lub JPG?
Tak. Działają SVG, PNG, JPG, WebP, GIF, BMP, AVIF i TIFF. SVG i tak pozostaje lepszym źródłem, bo każdy rozmiar jest rysowany z wektorów, a nie próbkowany ponownie. Logo rastrowe mniejsze niż 512 px jest powiększane na potrzeby największych ikon i będzie wyglądać miękko; wiersz pliku ostrzeże Cię, gdy tak się stanie.
Czy favicon.ico jest nadal potrzebny, skoro dostarczam ikony PNG?
Zostaw go. To ten plik, o który przeglądarki i roboty pytają w katalogu głównym witryny, gdy żaden znacznik nie kieruje ich gdzie indziej, i jedyny, który niesie kilka rozmiarów w jednym pliku. Wpisy PNG obsługują przeglądarki, które je wolą, a manifest obsługuje monit o instalację w Androidzie.