Jak używać
- Wklej ciąg Base64 lub data URI ikony albo obrazu, który chcesz zamienić w ikonę.
- Sprawdź podgląd i wymiary. Najczystszą ikonę daje kwadratowy obraz źródłowy.
- Format ICO jest wstępnie wybrany. W polu „Rozmiar ikony” wybierz jeden rozmiar (16, 32, 48, 64, 128 lub 256 pikseli) albo opcję „Wiele rozmiarów (16, 32, 48, 256)”.
- Pobierz plik .ico. Jeśli dane wejściowe są już plikiem ICO i wszystkie zawarte w nim obrazy mają pozostać bez zmian, wybierz „Oryginał”.
Pliki ICO w Base64
Plik ICO to niewielki kontener: nagłówek, katalog wpisów i po jednym obrazie na każdy wpis, zapisanym jako dane BMP lub PNG. Nagłówek zaczyna się od bajtów 00 00 01 00, więc Base64 ikony rozpoczyna się od AAABAA. Ikony w Base64 występują w data URI favicon, takich jak <link rel="icon" href="data:image/x-icon;base64,...">, w jednoplikowych stronach HTML oraz w interfejsach API zwracających ikony witryn.
Zarejestrowany typ MIME to image/vnd.microsoft.icon, ale image/x-icon jest znacznie popularniejszy i działa wszędzie.
Jaki rozmiar ikony wybrać
| Rozmiar | Typowe zastosowanie |
|---|---|
| 16 × 16 | Karta przeglądarki i zakładka na zwykłych ekranach |
| 32 × 32 | Karta przeglądarki na ekranach o wysokiej gęstości pikseli |
| 48 × 48 | Ikony na pulpicie i w Eksploratorze Windows |
| 64, 128 | Większe podglądy i listy aplikacji |
| 256 × 256 | Widoki „Duże ikony” i „Bardzo duże ikony” w systemie Windows |
Opcja wielu rozmiarów łączy rozmiary 16, 32, 48 i 256 w jednym pliku, dzięki czemu każdy system może wybrać najlepiej dopasowany obraz. Zawarte w nim obrazy są skompresowane jako PNG, co zachowuje przezroczystość i jest obsługiwane przez system Windows Vista i nowsze oraz przez wszystkie nowoczesne przeglądarki.
Użycie ikony jako favicon
Przeglądarki automatycznie pobierają plik /favicon.ico z katalogu głównego witryny, więc zapisanie go tam działa nawet bez żadnych znaczników. Data URI w Base64 w atrybucie href oszczędza to żądanie, ale wtedy ikona jest pobierana ponownie z każdą stroną, zamiast być buforowana osobno. Nowoczesne przeglądarki akceptują też ikony PNG i SVG, a popularna konfiguracja łączy oba formaty:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">Zacznij od kwadratowego obrazu o prostych kształtach i wyraźnym kontraście, ponieważ drobne szczegóły znikają przy 16 pikselach. Aby uzyskać wersję PNG do innych zastosowań, użyj narzędzia Base64 na PNG.
Najczęściej zadawane pytania
Jaki rozmiar powinien mieć plik favicon.ico?
Ikona wielorozmiarowa zawierająca obrazy o rozmiarach 16, 32 i 48 pikseli wystarcza dla przeglądarek i systemu Windows. Opcja wielu rozmiarów w tym narzędziu dodaje też rozmiar 256 dla widoków dużych ikon.
Czy można przekonwertować PNG lub SVG w Base64 na ICO?
Tak. Wklej dane, w polu „Pobierz jako” pozostaw ICO i wybierz rozmiar. Przekonwertować można każdy obraz, który przeglądarka potrafi wyświetlić.
Dlaczego podgląd pokazuje tylko jeden rozmiar ikony?
Plik ICO może zawierać kilka obrazów, ale podgląd pokazuje tylko jeden z nich. W polu „Pobierz jako” wybierz „Oryginał”, aby zachować wszystkie zawarte w nim obrazy.
Czy plik ICO zachowuje przezroczystość?
Tak. Ikony są zapisywane jako dane PNG z pełnym kanałem alfa, więc zaokrąglone rogi i miękkie krawędzie pozostają przezroczyste.
Jak umieścić ikonę w data URI?
href znacznika <link rel="icon">.