Favicon Generator - Text to Favicon.ico

Jak zainstalować Favicons na swojej stronie internetowej

Popraw wygląd swojej witryny na wszystkich urządzeniach, instalując niestandardowe favicony. Wykonaj te proste kroki, aby zintegrować nowo wygenerowany pakiet favicon:

1. Wygeneruj swoją Faviconę: Skorzystaj z naszego generatora Favicon, aby utworzyć niestandardowe ikony z żądanym tekstem, kolorami, kształtem i czcionką. Kliknij „Generuj Favicon”, aby pobrać pakiet Favicon.

2. Pobierz i rozpakuj: Po wygenerowaniu pobierz pakiet favicon i wyodrębnij pliki do katalogu głównego swojej witryny.

3. Dodaj kod HTML: Wstaw następujący kod do sekcji „head” swojego pliku HTML, aby zapewnić zgodność z różnymi urządzeniami i przeglądarkami:

<link rel="apple-touch-icon" sizes="57x57" href="/favicon-57x57.png" type="image/png" />
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60x60.png" type="image/png" />
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72x72.png" type="image/png" />
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114x114.png" type="image/png" />
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120x120.png" type="image/png" />
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144x144.png" type="image/png" />
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152x152.png" type="image/png" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png" type="image/png" />
<link rel="icon" sizes="16x16" href="/favicon-16x16.png" type="image/png" />
<link rel="icon" sizes="32x32" href="/favicon-32x32.png" type="image/png" />
<link rel="icon" sizes="96x96" href="/favicon-96x96.png" type="image/png" />
<link rel="icon" sizes="192x192" href="/favicon-192x192.png" type="image/png" />
<link rel="icon" sizes="512x512" href="/favicon-512x512.png" type="image/png" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#FFFFFF" />
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="/favicon-512x512.png" />

Jak Używać Generatora Faviconów

1. Wpisz żądany tekst (1-2 znaki).
2. Dostosuj kolory, kształt i czcionkę.
3. Kliknij 'Generuj Favicon'.
4. Pobierz paczkę faviconów.
5. Zaimplementuj ją, używając dostarczonego kodu.

Rozmiary Generowanych Faviconów

Nasz generator faviconów tworzy ikony w tych kluczowych rozmiarach:

Powszechne Rozmiary Ikon Apple Touch:

• 57x57px: iPhone i iPod touch.
• 60x60px: Ikony dotykowe dla nowszych iPhone'ów.
• 72x72px: Ikony dla iPada.
• 76x76px: iPad z wyświetlaczem Retina.
• 114x114px: iPhone z wyświetlaczem Retina.
• 120x120px: Ikony dotykowe Retina dla nowszych iPhone'ów.
• 144x144px: iPad z wyświetlaczem Retina.
• 152x152px: iPad z wyświetlaczem Retina.
• 180x180px: iPhone 6+ i nowe ikony Retina.

Ogólne Rozmiary Ikon:

• 16x16px: Favicony dla kart przeglądarki.
• 32x32px: Standardowy rozmiar faviconów.
• 48x48px: Skróty Windows.
• 64x64px: Skróty Windows.
• 96x96px: Urządzenia Chrome i Android.
• 192x192px: Urządzenia Android.
• 512x512px: Ikony dla ekranów o wysokiej rozdzielczości i niektórych Progresywnych Aplikacji Webowych (PWA).

Dodatkowe Format:

• favicon.ico (32x32px): Plik ikony z wieloma rozdzielczościami dla maksymalnej kompatybilności z starszymi systemami i przeglądarkami.
• Format SVG: Jeśli włączony, paczka zawiera również skalowalną ikonę grafiki wektorowej (SVG), idealną dla różnych rozmiarów i urządzeń dzięki swojej skalowalności.

Dlaczego Ważne Są Różne Rozmiary Faviconów

W dzisiejszym świecie wielourządzeniowym posiadanie wielu rozmiarów faviconów jest kluczowe:

• Zapewnia kompatybilność na wszystkich urządzeniach i przeglądarkach
• Poprawia klarowność wizualną na ekranach o wysokiej rozdzielczości
• Spełnia wymagania dla Progresywnych Aplikacji Webowych (PWA)
• Zwiększa rozpoznawalność w zatłoczonych kartach przeglądarki