Ce face <link rel=icon> (favicon)
<link rel="icon"> indică imaginea mică afișată lângă titlul paginii în tab, în istoric și la favorite (favicon). Formatul poate fi ICO, PNG sau SVG. Browserele moderne aleg varianta potrivită după type și sizes.
Dacă pagina nu are niciun rel="icon", browserele încearcă automat /favicon.ico din rădăcina site-ului. Pentru ecranul principal al iPhone-ului se folosește separat rel="apple-touch-icon", o imagine PNG de 180 × 180 px.
Un set minim care merge în practică: favicon.ico de 32 × 32 px, o iconiță SVG și una apple-touch-icon.
Atribute
| Atribut | Descriere |
|---|---|
href |
Adresa fișierului iconiței. |
type |
Tipul imaginii: image/svg+xml, image/png, image/x-icon. |
sizes |
Dimensiunile, de exemplu 32x32, 192x192 sau any pentru SVG. |
Exemple
Exemplul 1: Set minim de iconițe
Browserele care înțeleg SVG îl folosesc pe el; celelalte iau fișierul ICO.
<head>
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>Ce afișează browserul
În tab, lângă titlul paginii, apare sigla site-ului. Pe iPhone, „Adaugă pe ecranul principal” folosește imaginea de 180 × 180 px.Exemplul 2: Iconiță SVG care se adaptează modului întunecat
În fișierul SVG, o regulă @media (prefers-color-scheme: dark) schimbă culoarea. Funcționează în browserele care afișează favicon-uri SVG.
<!-- icon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
circle { fill: #1d4ed8; }
@media (prefers-color-scheme: dark) { circle { fill: #93c5fd; } }
</style>
<circle cx="16" cy="16" r="14"/>
</svg>Ce afișează browserul
În tema deschisă, cercul din tab este albastru închis; în tema întunecată, albastru deschis.Greșeli frecvente
- Iconița nu se schimbă după ce ai înlocuit fișierul: browserele păstrează favicon-ul în cache mult timp. Schimbă numele fișierului sau adaugă
?v=2la adresă. - O singură imagine PNG mare (512 × 512 px) pentru tot: în tab se micșorează urât și se descarcă degeaba.
- Lipsa fișierului
/favicon.ico: unele unelte și cititoare RSS îl caută direct și primesc eroarea 404.
Comenzi înrudite
<link>: Leagă documentul curent de resurse externe: fișiere CSS, pictograme (favicon), fonturi web sau versiuni canonice.<head>: Conține metadatele documentului, linkuri către fișiere CSS, scripturi și informații pentru motoarele de căutare.<meta>: Specifică metadate despre document: setul de caractere, configurația pentru mobil, descrierea SEO și cuvintele cheie.