Nagłówek i treść - HTML
Ikona strony <link icon>
W jaki sposób wstawić ikonę obok adresu strony WWW?
(interpretuje: Internet Explorer, Firefox, Opera 7, Chrome)
<head> <link rel="shortcut icon" href="adres ikony"> </head>
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
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.
Pytania i odpowiedzi
Jaki rozmiar ikony strony?
Ikona strony powinna mieć rozmiary 16x16 pikseli. Ponadto format graficzny *.ico umożliwia zapisanie w jednym pliku kilku ikon o różnych wymiarach. W ten sposób można dodatkowo zapisać ikonę o wymiarach 32x32 piksele, co może być przydatne, jeśli użytkownicy będą chcieli umieścić skrót do strony na pulpicie swojego systemu operacyjnego.
Jak zrobić ikonę strony?
Ikona strony może się wyświetlać w przeglądarce internetowej na karcie ze stroną oraz w wynikach wyszukiwania np. Google. Do przygotowania ikony możemy użyć dowolnego programu graficznego, który obsługuje format *.ico (np. darmowy GIMP). Obrazek ikony powinien mieć wymiary 16x16 pikseli. Należy go zapisać w pliku o nazwie favicon.ico (ważna jest również wielkość liter!) w głównym folderze ze stroną WWW. Na przykład jeśli serwis znajduje się pod adresem https://www.example.com/, to adres pliku ikony powinien być następujący: https://www.example.com/favicon.ico.
Jak ustawić ikonę w HTML?
Aby ustawić ikonę strony, która została zapisana w pliku favicon.ico, należy umieścić w nagłówku dokumentu - tzn. gdziekolwiek wewnątrz elementu <head>...</head> - następujący znacznik: <link rel="shortcut icon" href="/favicon.ico">. Trzeba jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden nagłówek dokumentu. Zatem ikonę dodajemy wewnątrz istniejącego elementu, a nie wstawiamy nowego!