Ikona na belce tytułowej przeglądarki (favicon)
Aby uatrakcyjnić naszą witrynę, możemy dodać do belki tytułowej przeglądarki dowolny obrazek – ikonę (tzw. favicon). Będzie on dodany przed adresem naszej strony i po wrzuceniu na przykład linka ze stroną na pulpit – komputera, tabletu, aparatu. Istnieją różne metody jego wykonania, gdyż przeglądarki obsługują różne metody. W pierwszej kolejności powinniśmy w programie graficznym utworzyć sobie obrazek – najlepiej niech nie będzie mniejszy niż 114×114 pikseli. Kolor przezroczysty uznaje się pierwszy piksel w lewym górnym rogu obrazu.
Skalowanie obrazu
Mając przygotowany obraz skalujemy go po kolei do poniższych rozmiarów i zapisujemy w podanych formatach (nazwa dowolna np. favicon114):
- 114x114px – format png – nowsze urządzenia Apple
- 57x57px – format png – starsze urządzenia Apple
- 48x48px – format png – przeglądrki
- 48x48px – format ico – Internet Explorer
- 32x32px – format png – przeglądarki
- 32x32px – format ico – Internet Explorer
Przygotowaliśmy tych ikon trochę na wyrost, ale lepiej to zrobić za jednym zamachem i mieć za dużo, niż za mało. W przyszłości raczej powszechne będą ikony w formacie png, z którymi IE może mieć problem. Takie obrazki nie zajmują dużo miejsca, a mogą się przydać później. Jeżeli masz problem z formatem ico to możesz spróbować na 2 sposoby:
- otwórz obrazek w ms paint i zapisz go z rozszerzeniem .ico (nawet jeżeli takiego domyślnie nie ma – nie wybieraj rozszerzenia)
- ściągnij program IrfranView – obsługuje potężną ilość formatów – warto go mieć
Dodanie ikony
1. Kopiujemy ikonę 48x48px do katalogu głównego strony i nazywamy ją favicon.ico. Sprawdzamy czy działa w IE i innych przeglądarkach. Jeżeli nie to przesyłamy format 32x32px. Może się zdarzyć, że nie będzie działało w Firefoxie – nie przejmujemy się tym. W przypadku Joomla katalogiem głównym jest tutaj nasz katalog szablonu (/templates/nazwa_szablonu) w którym mamy plik index.php
2. Kopiujemy przygotowane pliki do jakiegoś katalogu na serwerze.
3. Otwieramy nasz główny plik strony (np. index.php – w Joomla ten z katalogu z szablonem) i dodajemy kod dla pozostałych przeglądarek i urządzeń Apple:
<link rel="shortcut icon" href="http://mojastrona.domena/ikona.ico" />dla urządzeń Apple:
<link rel="apple-touch-icon" href="http://mojastrona.domena/ikona.png" />lub (z cieniem dodawanym przez Apple)
<link rel="apple-touch-icon-precomposed" href="http://mojastrona.domena/ikona.png" />Jeżeli nie mamy możliwości sprawdzenia czy ikony 114×114 będą działały na starszych „Jabłkach” to zastosujmy format 57x57px – nie wiem tego niestety i nie mam specjalnie możliwości, by sprawdzić. Podobnie z ikonami 48x48px – niegdyś generalnie były używane ikony 16x16px z 256 kolorami (to jest zawsze najpewniejszy format, ale nie jest to w końcu aż tak istotny element strony)
