Jak używać
- Przeciągnij plik .ico na pole upuszczania, kliknij, aby go wybrać, lub wklej obraz.
- Pozostaw opcję „Zachowaj oryginał”, aby wszystkie rozmiary zapisane w ikonie trafiły do wyniku.
- Sprawdź rozmiar po zakodowaniu; ikona z wieloma rozmiarami może być większa, niż się wydaje.
- Skopiuj data URI do znacznika link z ikoną favicon albo skopiuj znacznik img, CSS lub Markdown.
Format ICO
ICO to format ikon systemu Windows i pierwotny format ikon favicon. Jest kontenerem: krótki katalog wymienia jeden lub więcej obrazów wraz z ich szerokością, wysokością i głębią kolorów, a każdy obraz jest zapisany jako dane mapy bitowej lub, w przypadku dużych rozmiarów takich jak 256 na 256, jako osadzony PNG. Typowy plik favicon.ico zawiera wersje 16, 32 i 48 pikseli, dzięki czemu przeglądarka może wybrać najostrzejszą.
Zarejestrowany typ MIME to image/vnd.microsoft.icon, ale znacznie częściej stosuje się image/x-icon, a przeglądarki akceptują oba. Dane ICO w Base64 zaczynają się od AAABAA, czyli zakodowanego nagłówka pliku.
Favicon jako data URI
<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBA...">Osadzenie ikony favicon przydaje się w jednoplikowych dokumentach HTML, takich jak eksportowane raporty, pulpity nawigacyjne zapisane na dysku i dokumentacja offline, a także w prototypach i narzędziach wewnętrznych, w których wdrażanie osobnego pliku byłoby zbędnym kłopotem. W witrynie z wieloma stronami zwykle lepszy jest zwykły plik /favicon.ico: jest pobierany raz i buforowany, podczas gdy data URI powtarza się w każdej odpowiedzi HTML.
Jeśli strona ma nie mieć żadnej ikony, <link rel="icon" href="data:,"> powstrzymuje przeglądarkę przed żądaniem pliku /favicon.ico.
Favicon w formacie ICO, PNG czy SVG
Aktualne przeglądarki akceptują też ikony favicon w formatach PNG i SVG, np. <link rel="icon" type="image/png" href="data:image/png;base64,...">. Pojedynczy PNG 32 na 32 piksele często jest mniejszy niż wielorozmiarowy plik ICO; do takich ikon użyj narzędzia PNG na Base64 lub SVG na Base64.
Konwersja pliku ICO na PNG, JPEG lub WebP w tym narzędziu zachowuje tylko jeden obraz – ten, który przeglądarka wybierze do wyświetlenia. Aby pójść w drugą stronę i utworzyć plik ICO, zakoduj PNG i wklej wynik do narzędzia Base64 na ICO, które zapisuje ikony w rozmiarach od 16 do 256 pikseli.
Najczęściej zadawane pytania
Którego typu użyć: image/x-icon czy image/vnd.microsoft.icon?
image/vnd.microsoft.icon to oficjalnie zarejestrowany typ, natomiast image/x-icon stosuje większość witryn. Jeśli jakiś system oczekuje konkretnego typu, zmień prefiks po skopiowaniu.Czy wynik Base64 zawiera wszystkie rozmiary ikony?
Tak, jeśli oryginalny format zostanie zachowany. Kodowany jest cały plik, więc przeglądarka nadal może wybrać potrzebny rozmiar. Konwersja na inny format zachowuje tylko jeden obraz.
Czy ikony favicon w postaci data URI działają w każdej przeglądarce?
Aktualne przeglądarki na komputery wyświetlają je na karcie. Zakładki, skróty na ekranie głównym i niektóre starsze przeglądarki mogą ignorować osadzoną ikonę, dlatego publiczne witryny nadal powinny udostępniać plik favicon.