Nagłówek i treść - HTML
Ikona strony <link "shortcut icon">
W jaki sposób wstawić ikonę obok adresu strony WWW?
<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. Przeglądarki pozwalają 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 (np. SVG), 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). Dlatego zanim wprowadzimy taki dodatek, warto go wcześniej dobrze dopracować.
Pytania i odpowiedzi <link "shortcut icon">
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!