(1 głos, średnia ocena 5.00 na 5)
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
PrzygotowaliÅ›my tych ikon trochÄ™ na wyrost, ale lepiej to zrobić za jednym zamachem imieć 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ć
Teraz jedziemy:

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)