Generator Favicon Online
Utwórz favicon we wszystkich wymaganych rozmiarach za darmo, bezpośrednio w przeglądarce.
.jpg, .png, .webp · do 50 MB
Dlaczego warto
Właściwy favicon dla każdego urządzenia i przeglądarki
Wszystkie formaty
Generuje .ico, .png i wszystkie rozmiary dla iOS, Android i PWA.
100% prywatne
Przetwarzanie odbywa się w przeglądarce. Twoje logo nigdy nie opuszcza Twojego urządzenia.
Wszystkie rozmiary
16×16, 32×32, 180×180, 192×192 i 512×512. Gotowe do wdrożenia.
Natychmiastowe
Wynik od razu. Bez kolejek, bez rejestracji, bez limitów.
Jak to działa
Trzy kroki, żadnych komplikacji
Wgraj swój obraz lub logo
Przeciągnij i upuść lub wybierz kwadratowy plik PNG, SVG, JPG lub WebP. Zalecane minimum 512×512 px.
Przeglądaj wygenerowane rozmiary
Automatycznie otrzymasz pliki 16×16, 32×32, 180×180 (Apple Touch Icon), 192×192 i 512×512 px.
Pobierz pakiet favicon
Pobierz wszystkie wygenerowane rozmiary, gotowe do dodania do Twojego projektu webowego.
FAQ
Masz pytania?
Kompletny nowoczesny zestaw favicon wymaga: 16×16 px (karta przeglądarki w Windows/Linux), 32×32 px (karta na macOS i zakładki), 180×180 px (Apple Touch Icon, zapisywany na ekranie głównym iOS), 192×192 px (dodawanie do ekranu głównego w Android Chrome) i 512×512 px (ekran powitalny PWA na Androidzie). Plik favicon.ico w katalogu głównym witryny może zawierać wiele osadzonych rozdzielczości (16, 32, 48 px) w jednym pliku. W nowoczesnych przeglądarkach wystarczy jeden PNG 32×32 wskazany w HTML. Jednak dla maksymalnej zgodności z urządzeniami Apple, aplikacjami do zakładek i PWA konieczny jest pełny zestaw.
Format .ico to oryginalny format favicon, wprowadzony przez Internet Explorer 5 w 1999 roku. Może zawierać wiele rozdzielczości w jednym pliku i ma powszechne wsparcie, w tym w bardzo starych przeglądarkach. Format .png jest prostszy: jeden plik na rozmiar, natywna obsługa we wszystkich nowoczesnych przeglądarkach i lepsza jakość kompresji niż .ico dla wysokich rozdzielczości. Format .svg jako favicon jest obsługiwany przez nowoczesne Chrome, Firefox i Edge, ale nie przez Safari ani iOS. Zaletą SVG jest idealne skalowanie do dowolnego rozmiaru i możliwość dostosowania wyglądu do trybu ciemnego systemu za pomocą zapytań CSS (@media (prefers-color-scheme: dark)). Aktualne zalecenie: użyj .ico dla podstawowej zgodności, .png dla konkretnych rozmiarów i opcjonalnie .svg dla nowoczesnych przeglądarek.
Apple Touch Icon to ikona używana przez iOS i macOS Safari, gdy użytkownik zapisuje witrynę na ekranie głównym iPhone'a/iPada lub dodaje ją do docka na Macu. W przeciwieństwie do zwykłych faviconów (które iOS ignoruje w tym celu), Apple Touch Icon musi być plikiem PNG 180×180 px (dla ekranów Retina), bez warstw przezroczystości (iOS automatycznie dodaje zaokrąglone narożniki i połysk), zadeklarowanym w HTML jako: <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>. Jeśli Apple Touch Icon nie zostanie określony, iOS automatycznie przechwytuje zrzut ekranu strony jako ikonę, z bardzo słabym efektem wizualnym.
Poprawny sposób deklarowania nowoczesnych faviconów w sekcji HTML <head>: <link rel='icon' type='image/x-icon' href='/favicon.ico'> dla podstawowej zgodności, <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'> dla nowoczesnych przeglądarek, <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'> dla iOS oraz <link rel='manifest' href='/site.webmanifest'> dla PWA. Plik site.webmanifest to JSON deklarujący ikony 192×192 i 512×512. Nowoczesne przeglądarki preferują manifest nad indywidualnymi tagami link, więc manifest jest szczególnie ważny dla PWA.
favicon.ico to de facto standard od 1999 roku, interpretowany przez wszystkie przeglądarki nawet bez żadnego tagu HTML (przeglądarki automatycznie szukają /favicon.ico w katalogu głównym). Web app manifest (manifest.json lub site.webmanifest) to nowoczesny standard dla PWA (Progressive Web Apps), wprowadzony wraz ze standardem W3C Web App Manifest w 2013 roku. Poza ikonami manifest deklaruje nazwę, kolory motywu, tryb wyświetlania i inne właściwości aplikacji. Dla zwykłej witryny bez funkcji PWA wystarczy favicon.ico + PNG + Apple Touch Icon. Dla pełnego PWA z instalacją na ekranie głównym manifest jest niezbędny.
Favicon: historia, standardy webowe i branding w karcie przeglądarki
Favicon to jeden z najmniejszych i najbardziej rozpoznawalnych elementów identyfikacji wizualnej witryny. Jego historia rozpoczyna się w marcu 1999 roku, gdy Microsoft Internet Explorer 5 wprowadził obsługę favicon.ico jako część funkcji 'Ulubione': podczas zapisywania witryny IE5 wysyłał żądanie do /favicon.ico, aby wyświetlić ikonę obok zakładki. Nazwa 'favicon' pochodzi od 'favorites icon'. Standard został sformalizowany w RFC 2616 i W3C w 2000 roku przez tag <link rel='shortcut icon'>. Dziś, ponad 25 lat później, favicon ewoluował od prostego pliku .ico 16×16 pikseli do ekosystemu ikon dla kart przeglądarki, zakładek, ekranów głównych urządzeń mobilnych i ekranów powitalnych aplikacji.
Format ICO to technicznie kontener obrazów, który może zawierać wiele rozdzielczości i głębi kolorów w jednym pliku. Został pierwotnie opracowany przez Microsoft dla ikon na pulpicie Windows i zaadaptowany do sieci. Ciekawostka techniczna: plik .ico może zawierać skompresowane obrazy PNG wewnątrz kontenera ICO od Windows Vista (2007), co znacznie zmniejsza rozmiar pliku. Favicony SVG, obsługiwane przez Chrome 80+ i Firefox 41+, mają unikalną zaletę: mogą używać zapytań CSS do automatycznego dostosowania projektu do trybu ciemnego systemu. Pozwala to mieć czarny favicon na białym tle w trybie jasnym i biały na czarnym w trybie ciemnym — wszystko w jednym pliku wektorowym o rozmiarze kilku kilobajtów.
W kontekście Google Core Web Vitals favicon ma związek z wydajnością, który jest często pomijany. Przeglądarka pobiera favicon w osobnym żądaniu podczas ładowania strony, a jeśli plik favicon.ico nie istnieje, serwer odpowiada błędem 404, który może zawierać stronę HTML z błędem o rozmiarze kilku kilobajtów. Dla witryn obsługujących miliony odwiedzin ten powtarzający się błąd 404 może generować znaczną ilość niepotrzebnego ruchu. Rozwiązaniem jest zawsze posiadanie pliku favicon.ico w katalogu głównym, nawet jeśli jest to minimalny plik 16×16 px, aby uniknąć tych błędów 404 przy każdej wizycie.