Favicon - Docs de MetricSpot

Què comprova aquesta auditoria

Busca al <head> un <link rel="icon"> o <link rel="shortcut icon"> (o, com a fallback, un /favicon.ico a l’arrel del domini) i verifica que el fitxer referenciat carregui correctament.

Per què importa

Hi ha tres llocs on s’utilitza el teu favicon, tots de cara a l’usuari:

Pestanyes del navegador i marcadors, identificació visual immediata quan un usuari té 30 pestanyes obertes.
Resultats de cerca de Google, Google mostra favicons al costat del nom del lloc a les SERP mòbils i cada cop més a les d’escriptori. Els llocs sense favicon mostren una icona genèrica de món, que sembla inacabada al costat dels competidors.
Historial del navegador, descàrregues, commutador d’aplicacions del sistema operatiu, qualsevol lloc on l’SO o el navegador guardi la identitat del teu lloc.

No tenir favicon és l’equivalent visual a enviar una carta sense remitent. El lloc funciona, però no sembla seriós.

Com solucionar-ho

Publica dos fitxers d’icona i enllaça’ls correctament:

1. El clàssic .ico, per a navegadors antics i per al camí d’autodetecció.

Col·loca’l a l’arrel del domini:

public/favicon.ico   (ICO multiresolució 16×16, 32×32)

La majoria de navegadors carreguen /favicon.ico automàticament fins i tot sense una etiqueta <link>, però ser explícit és millor.

2. Una icona SVG, per a navegadors moderns, escala a qualsevol mida.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

El navegador tria la que prefereix (Chrome i Firefox prefereixen SVG; Safari recorre a ICO).

3. Ús per a PWA / icona gran, combina-ho amb apple-touch-icon i el manifest web.

<link rel="apple-touch-icon" href="/apple-touch-icon.png">  <!-- 180×180 -->
<link rel="manifest" href="/site.webmanifest">

Vegeu les comprovacions Apple touch icon i manifest d’aplicació web.

Bloc complet per al head:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Això és tot el que la majoria de llocs necessita.

Genera tot el conjunt des d’una sola font:

RealFaviconGenerator accepta una imatge font (idealment SVG o PNG 512×512) i genera tota la família d’icones més l’HTML per enganxar. Cobreix iOS, Android, mosaics de Windows i instal·labilitat PWA.

Astro: posa els fitxers a public/ i enllaça’ls al <head> del teu layout. Astro ja configura el link rel="icon" des de astro:assets si el fas servir.

Next.js (App Router): posa favicon.ico i opcionalment icon.svg directament a app/. El framework injecta automàticament les etiquetes <link>.

app/
  favicon.ico       # auto-enllaçat
  icon.svg          # opcional, auto-enllaçat
  apple-icon.png    # opcional, 180×180, auto-enllaçat

WordPress: Aparença → Personalitza → Identitat del lloc té un carregador d‘“Icona del lloc”. WordPress genera i enllaça tot el conjunt automàticament.

Notes de disseny:

Fes servir un disseny quadrat. Els navegadors retallen a quadrat de totes maneres.
Alt contrast, els favicons es mostren a 16×16 a les pestanyes, on els detalls fins desapareixen.
Prova-ho en mode fosc. Un logotip sobre fons transparent que funcionava sobre blanc pot fer-se invisible sobre pestanyes fosques.

Requisits SERP de Google:

Google té regles addicionals per al favicon de la SERP: quadrat, almenys 8×8 i amb una URL estable. Els llocs que canvien la URL del favicon en cada desplegament poden aparèixer com un globus a Google. Fes servir un nom de fitxer estable i no hi afegeixis query strings.

Preguntes freqüents

Necessito `.ico` o n’hi ha prou amb SVG?

Tots dos, de moment. SVG és el futur, ICO és el present, Safari i algunes versions antigues de Chrome encara prefereixen ICO per a la pestanya. Fins al 2027 més o menys, publica’n tots dos.

Per què no es veu el meu favicon als resultats de Google?

Tres causes habituals:

La URL retorna un 404 o 403, comprova-ho amb curl -I https://elteudomini.com/favicon.ico.
La icona és massa petita (per sota de 8×8), genera un ICO multiresolució a 16, 32 i 48.
Google no ha tornat a rastrejar el lloc des que el vas afegir, espera fins a una setmana o demana indexació a Search Console.

I el truc del favicon clar/fosc?

Els navegadors moderns admeten icones SVG amb media query:

<link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)" type="image/svg+xml">
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)" type="image/svg+xml">

O incrusta totes dues en un SVG amb una etiqueta <style> que faci servir prefers-color-scheme. Tots dos funcionen; el segon estalvia una petició HTTP.