Przejdź do treści

HTML / Nagłówek i treść

Ikona strony <LINK icon>

W jaki sposób wstawić ikonę obok adresu strony WWW?

(interpretuje: Internet Explorer, Netscape 7/Mozilla/Firefox, Opera 7, Chrome)

<head>
	<link rel="shortcut icon" href="adres ikony">
</head>
gdzie jako "adres ikony" należy podać URL, pod którym znajduje się ikona, np.: http://www.mojastrona.pl/favicon.ico

Polecenie to pozwala dodać ikonkę (favicon.ico), która będzie widoczna w przeglądarce przy adresie naszej strony. Typowy rozmiar ikony to 16x16 pikseli. W systemie Windows jest dodatkowa możliwość umieszczenia skrótu na pulpicie - wtedy przydatna może być ikona o rozmiarach 32x32. Format *.ico pozwala zapisać dwie wersje rozmiaru w jednym pliku. Niektóre przeglądarki - nie MSIE 6 - pozwalając również używać innych formatów graficznych, takich jak np. PNG.

Możemy również podać kilka ikon, a przeglądarka samodzielnie wybierze sobie taką, która jej najlepiej pasuje. W przypadku gdy więcej niż jedna z podanych ikon będzie odpowiednia, zostanie wybrana ostatnia z wymienionych. Na przykład:

<link rel="icon" href="favicon.ico" sizes="16x16 32x32" type="image/vnd.microsoft.icon">
<link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
<link rel="icon" href="favicon48.png" sizes="48x48" type="image/png">
<link rel="icon" href="favicon72.png" sizes="72x72" type="image/png">
<link rel="icon" href="favicon96.png" sizes="96x96" type="image/png">
<link rel="icon" href="favicon144.png" sizes="144x144" type="image/png">
<link rel="icon" href="favicon192.png" sizes="192x192" type="image/png">
<link rel='icon" href="favicon.svg" sizes="any" type="image/svg+xml">

gdzie dodatkowe atrybuty oznaczają:

sizes
Może być zapisany w jednym z dwóch formatów:
  • "any" - oznacza, że ikona może być dowolnie skalowana przez przeglądarkę. Najlepiej do tego nadają się grafiki wektorowe, które można bez ograniczeń powiększać bez żadnej utraty jakości.
  • Rozdzielona spacjami lista rozmiarów ikon zapisanych w podanym pliku. Każdy rozmiar składa się z dwóch liczb rozdzielonych znakiem "x" (bez spacji!), które określają kolejno: szerokość i wysokość.
type
Typ MIME - zobacz: sekcja "Filtr typu plików" w rozdziale Selektor plików.

Ikona strony może się wyświetlić automatycznie, nawet bez potrzeby wstawiania powyższego znacznika, jeśli będzie nosiła nazwę favicon.ico i zostanie zapisana w głównym katalogu na serwerze WWW, czyli np. http://www.example.com/favicon.ico (Internet Explorer, Firefox, Opera 12-).

Niestety niektóre przeglądarki pobierają ikonę strony tylko raz, a później rzadko jest ona odświeżana (albo nawet wcale). Więc jeśli kiedyś wprowadzimy nową, może to nie dać żadnego efektu, bo np. Internet Explorer zapisuje ikonę przy dodawaniu strony do ulubionych. Dlatego zanim wprowadzimy taki dodatek, warto go wcześniej dobrze dopracować.

W Internet Explorerze 6 aby ikona była widoczna, trzeba dodać stronę do ulubionych. Aby odświeżyć ikonę, należy usunąć stronę z ulubionych, a następnie dodać ją tam ponownie (ikona będzie widoczna po ponownym otworzeniu przeglądarki). Czasem pomocne okazuje się również wyczyszczenie historii przeglądanych stron.

Komentarze

Zobacz więcej komentarzy

Facebook