Ikona na belce tytułowej przeglądarki
Czwartek, 19. Styczeń 2012 09:53 | 
Author: Maciej Włodarczak (Eskim) | Znaków: 3613
| Webmaster - Joomla |
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ż 114x114 pikseli. Kolor przezroczysty uznaje się pierwszy piksel w lewym górnym rogu 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
- 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ć
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 114x114 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)