Un favicon HTML fiable no depèn d'una única etiqueta màgica. Fa servir un conjunt petit de fitxers accessibles i enllaços col·locats al head. Aquest procediment cobreix les pestanyes modernes, els clients antics i les dreceres mòbils sense multiplicar les variants històriques.
Prepara els fitxers
Parteix d'un símbol quadrat que continuï sent llegible quan sigui molt petit. Posa favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest i els PNG referenciats pel manifest a la carpeta pública que se serveix a l'arrel del domini.
Un camí com /favicon.svg és absolut respecte del domini. Per tant, continua sent correcte a /products o /blog/article, a diferència de favicon.svg, que es pot resoldre respecte de la pàgina.
Afegeix els elements al head
Declara primer l'SVG amb rel icon i type image/svg+xml, i després l'ICO amb rel icon i sizes any. Afegeix rel apple-touch-icon per a iOS i rel manifest per a la instal·lació d'aplicacions web.
El tipus ha de correspondre al fitxer que realment se serveix. No canviïs el nom d'un PNG a .ico: el contingut i la capçalera han de fer servir el format ICO.
| Finalitat | Relació | Fitxer |
|---|---|---|
| Navegador modern | icon | /favicon.svg |
| Compatibilitat | icon | /favicon.ico |
| Pantalla d'inici d'iOS | apple-touch-icon | /apple-touch-icon.png |
| Aplicació web | manifest | /site.webmanifest |
Desplega sense trencar els camins
Obre directament l'URL de cada fitxer després del desplegament. La resposta ha de ser una imatge o un manifest amb un codi d'èxit, no una pàgina HTML d'inici de sessió o d'error 404 retornada amb un estat enganyós.
Si el lloc es publica en un subdirectori, ajusta els camins o la base pública. Inspecciona la pàgina final amb les eines de desenvolupament: el navegador ha de demanar els URL previstos sense redirigir a un altre amfitrió.
Verifica el resultat
Torna a carregar amb la memòria cau desactivada i inspecciona els elements link del DOM generat. Després prova una pestanya, un marcador i, si escau, afegir el lloc a la pantalla d'inici d'un dispositiu real.
El favicon dels resultats de cerca també està subjecte a les regles i al calendari de rastreig del cercador. Per tant, veure la icona al navegador no garanteix una actualització immediata als resultats de cerca.
Fonts primàries
Preguntes freqüents
L'element del favicon va al body?
No. Els elements link que descriuen les icones i el manifest van al head del document.
N'hi ha prou amb un favicon.ico a l'arrel?
És una alternativa útil, però no descriu una icona Apple Touch ni icones instal·lables del manifest. Declara els formats corresponents a aquests usos.
Per què cal fer servir un camí que comenci amb /?
Comença a l'arrel del domini i evita que una pàgina imbricada cerqui el fitxer dins de la seva pròpia carpeta.