Favicon i ikony jako Base64: jak osadzac w HTML i CSS
Favicon to mala ikona widoczna w zakladce przegladarki i zakladkach. Zazwyczaj jest plikiem zewnetrznym (favicon.ico lub favicon.svg). Ale mozna ja rowniez osadzic bezposrednio w HTML jako Base64 - eliminujac dodatkowe zadanie HTTP. WikiPlus Image to Base64 ulatwia generowanie takich ciAgow.
Favicon jako data URI w HTML
<link rel='icon' href='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg=='>. Alternatywnie dla PNG: <link rel='icon' type='image/png' href='data:image/png;base64,...'>. Zalete: eliminujesz zewnetrzne zadanie HTTP dla favicon, co moze nieco przyspieszyc ladowanie strony. Wada: favicon nie jest cachowana oddzielnie przez przegladarke - zmieniajac logo musisz zmienic caly HTML.
Ikony SVG jako inline Base64
SVG jako ikony maja przewage nad PNG: sa skalowalne bez utraty jakosci i lekkie. Mozesz zakodowac SVG na Base64 i uzyc jako tlo CSS: .icon-home { background-image: url('data:image/svg+xml;base64,...'); width: 24px; height: 24px; }. Alternatywnie mozesz wklejac SVG bezposrednio jako inline: <svg xmlns='...'> bez kodowania Base64.
Ikony Bootstrap i Font Awesome jako Base64
Biblioteki ikon jak Bootstrap Icons lub Material Icons dostarczaja swoje ikony jako SVG. Mozna je zakodowac na Base64 i uzyc bez zaleznosci od zewnetrznej biblioteki. Proces: pobierz plik SVG ikony, zakoduj go w WikiPlus Image to Base64, uzyj wygenerowanego data URI w CSS lub HTML. Zaleta: brak zewnetrznych zaleznosci, mniejszy bundle JS/CSS, szybsze ladowanie.
Kiedy NIE uzywac Base64 dla ikon
Base64 nie jest zawsze lepsza opcja niz plik zewnetrzny. Dla duzych zestawow ikon (ponad 10-20 ikon) lepiej uzywac sprite SVG lub zewnetrznych plikow cachowanych przez przegladarke. Dla ikon uzywanych na wielu stronach: zewnetrzny plik jest cachowany raz i uzywa na wszystkich stronach - Base64 musi byc osadzony na kazdej stronie osobno. Dla SEO: wyszukiwarki nie indeksuja obrazow Base64 jako oddzielnych zasobow. Dla duzych ikon (powyzej 5 KB): zysk z eliminacji HTTP jest mniejszy niz koszt parsowania wiekszego dokumentu HTML.
Często zadawane pytania
- Czy favicon Base64 dziala we wszystkich przeglAdarkach?
- Tak, w nowoczesnych przeglAdarkach (Chrome 4+, Firefox 2+, Safari 4+, Edge 12+). Internet Explorer mial ograniczone wsparcie ale jest juz wycofany.
- Jak male powinny byc ikony konwertowane na Base64?
- Optymalna wielkosc to ponizej 5 KB. Dla favicon 32x32 PNG to zazwyczaj 1-3 KB. Dla ikony SVG to moze byc nawet mniej - SVG kompresuje sie dobrze.
- Czy moge uzyc Base64 dla Apple Touch Icon?
- Tak. <link rel='apple-touch-icon' href='data:image/png;base64,...'> zadziala dla ikon dodawanych do ekranu domowego iOS.