Przejdź do treści
FlexiConvert

Generator favicon

Wszystkie ikony Twojej strony z logo, gotowe do wgrania.

Inne narzędzia: JPEG na JPG Kompresuj JPG Kompresuj PNG Kompresuj WebP Zmień rozmiar zdjęcia Przytnij zdjęcie Połącz zdjęcia

Jeden plik naraz, do 20 MB.

Dopasowanie do kwadratu

Ikony są kwadratowe. Jeśli Twój obraz nie jest, wybierz, czy ma być widoczny w całości (z przezroczystymi marginesami), czy ma wypełnić kwadrat.

Dla ikony Apple, która nie może być przezroczysta, i jako kolor motywu na Androidzie.

Twoje pliki są automatycznie usuwane po konwersji i najpóźniej godzinę po przesłaniu. Jak postępujemy z Twoimi plikami

Utwórz kompletny favicon swojej strony na podstawie logo: ikonę na karcie przeglądarki, ikony ekranu głównego iPhone’a i Androida, manifest oraz kod HTML, który wszystko łączy. Prześlij obraz PNG, JPG, WebP lub SVG i pobierz plik ZIP ze wszystkim, bez rejestracji i bez znaku wodnego.

Jak utworzyć favicon

  1. Wybierz logo lub ikonę w formacie PNG, JPG, WebP lub SVG, najlepiej kwadratową i o boku co najmniej 512 pikseli.
  2. Wybierz, czy obraz ma być widoczny w całości, czy wypełnić kwadrat, oraz kolor tła ikony Apple.
  3. Kliknij „Utwórz favicon” i pobierz plik ZIP.
  4. Umieść pliki w katalogu głównym strony i wklej kod z head.html do znacznika head swoich stron.

Co zawiera paczka

Plik Do czego służy
favicon.ico Klasyczna ikona karty z rozmiarami 16, 32 i 48 pikseli w jednym pliku. Przeglądarki szukają jej, nawet jeśli jej nie podłączysz.
favicon-16x16.png i favicon-32x32.png Ikony karty i zakładek w nowoczesnych przeglądarkach.
apple-touch-icon.png Ikona 180-pikselowa, której używają iPhone i iPad, gdy ktoś doda Twoją stronę do ekranu głównego.
android-chrome-192x192.png i android-chrome-512x512.png Ikony dla Androida i instalowalnych aplikacji internetowych.
site.webmanifest Manifest, który deklaruje ikony Androida i kolor Twojej strony.
head.html Znaczniki do podłączenia ikon na Twoich stronach.

Jak zainstalować go na stronie

  1. Rozpakuj plik ZIP i umieść wszystkie pliki oprócz head.html w katalogu głównym strony (tam, gdzie jest strona główna).
  2. Skopiuj te znaczniki, które znajdziesz też w head.html, do znacznika head swoich stron:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
  1. Jeśli chcesz, wpisz nazwę strony w polach name i short_name w pliku site.webmanifest.

Przeglądarki przechowują favicon w pamięci podręcznej: jeśli nie widzisz nowego od razu, odśwież stronę z wymuszeniem lub chwilę poczekaj.

Zmieść czy wypełnić

Wszystkie ikony są kwadratowe. Jeśli Twój obraz nie jest, możesz go zmieścić, by był widoczny w całości z przezroczystymi marginesami, albo wypełnić nim kwadrat, przycinając to, co wystaje po bokach. W przypadku poziomego logo z tekstem często lepiej użyć samego sygnetu, przyciętego do kwadratu.

Ikona Apple nie może być przezroczysta: iOS wypełniłby tło na czarno. Dlatego tworzymy ją z wybranym kolorem tła, który służy też jako kolor Twojej strony na Androidzie. Pozostałe ikony zachowują przezroczystość.

Wskazówki dla dobrego efektu

  • Zacznij od dużego obrazu, co najmniej 512 × 512 pikseli, a najlepiej od SVG: małe ikony są z niego obliczane.
  • Upraszczaj: przy 16 pikselach tekst i drobne szczegóły są nieczytelne. Symbol lub inicjał w kontrastowych kolorach sprawdza się dużo lepiej.

Jeśli potrzebujesz tylko pliku .ico, możesz przekonwertować PNG na ICO.

Ograniczenia

  • Jeden obraz naraz, do 20 MB i 100 megapikseli.
  • Nie ingerujemy w Twoją stronę: pliki trzeba wgrać i dodać znaczniki samodzielnie albo poprosić o to osobę, która zarządza stroną.

Najczęściej zadawane pytania

Jaki rozmiar powinien mieć obraz, z którego tworzę favicon?

Im większy, tym lepiej: co najmniej 512 × 512 pikseli lub plik SVG. Wszystkie ikony, od 512 do 16 pikseli, są z niego obliczane.

Gdzie umieścić pliki favicon?

W katalogu głównym strony, w tym samym folderze co strona główna. Potem wklej znaczniki z head.html do znacznika head swoich stron.

Dlaczego nie widzę nowego favicona w przeglądarce?

Bo przeglądarki przechowują favicon w pamięci podręcznej. Odśwież stronę z wymuszeniem, otwórz ją w oknie prywatnym lub chwilę poczekaj.

Dlaczego ikona Apple ma kolorowe tło?

Bo iOS nie akceptuje przezroczystości w ikonach ekranu głównego i wypełniłby tło na czarno. Tworzymy ją z wybranym przez Ciebie kolorem tła, żeby dobrze wyglądała.

Czy mogę tak utworzyć favicon strony na WordPressie?

WordPress ma własną opcję, „Ikona witryny” (w menu Wygląd › Dostosuj › Tożsamość witryny lub, zależnie od wersji i motywu, w ustawieniach ogólnych): wgrywasz kwadratowy obraz, a WordPress tworzy rozmiary. Paczka z tego narzędzia jest przeznaczona dla stron, na które możesz wgrywać pliki i edytować kod.

Konwertuj też pliki PNG, JPG, WebP lub SVG