W języku HTML, aby dołączyć ikonę strony (favicon) z pliku ikona.png, wyświetlaną na karcie przeglądarki, należy w sekcji head użyć zapisu
<img rel="icon" src="ikona.png">
<img> wstawia obraz do treści strony, a nie ikonę na karcie przeglądarki.<link rel="icon" href="ikona.png">
<link> z rel="icon" i ścieżką w href dołącza ikonę strony.<meta name="icon" content="ikona.png">
<meta> zawiera metadane i nie dołącza plików. Przeglądarka nie rozpozna name="icon".<title icon="ikona.png">Moja strona</title>
<title> zawiera tylko tekst tytułu i nie ma atrybutu icon.Ikonę strony dołącza się znacznikiem <link> w sekcji <head>. Atrybut rel określa rodzaj powiązania, tu icon, a href wskazuje plik. Przeglądarka pobiera go i pokazuje obok tytułu na karcie, w zakładkach i w historii.
Ten sam znacznik <link> dołącza arkusz stylów: <link rel="stylesheet" href="styl.css">, różni się tylko wartość rel. Ikonę można podać w kilku formatach, np. PNG, SVG albo tradycyjne ICO, a atrybut type i sizes doprecyzowują format i rozmiar. Gdy znacznika brak, przeglądarka sama szuka pliku favicon.ico w katalogu głównym serwera.
Po zmianie ikony przeglądarka często pokazuje starą z pamięci podręcznej, więc wymuś odświeżenie.
Każdy z błędnych zapisów używa znacznika, który ma inne zadanie. <meta> opisuje stronę metadanymi, takimi jak kodowanie, opis czy słowa kluczowe, ale nie dołącza plików. Wartość name="icon" nie jest przez przeglądarki rozpoznawana, więc ikona się nie pojawi.
<img> wstawia obraz do widocznej treści strony i należy do <body>. Atrybut rel nie ma dla niego znaczenia, więc taki zapis w nagłówku po prostu nie zadziała, a w treści pokazałby obrazek na stronie zamiast na karcie.
<title> przyjmuje wyłącznie tekst tytułu i nie ma atrybutu icon. Tytuł i ikona są wyświetlane razem na karcie, stąd pomyłka, ale w kodzie to dwa osobne znaczniki.
Zapamiętaj, że wszystko, co dołącza do strony zewnętrzny plik dla przeglądarki, czyli styl albo ikonę, robi się przez <link> z odpowiednią wartością rel.