Què és un favicon i per què és important per al teu lloc web?

Un favicon (abreviatura de «favorite icon», «icona preferida») és la petita imatge quadrada que representa un lloc web a les pestanyes del navegador, als marcadors, a l'historial, als resultats de cerca de Google, a les pantalles d'inici dels mòbils i a les aplicacions web instal·lades. És important perquè dona al teu lloc una cara fàcilment recognoscible, el fa més fàcil de trobar entre moltes pestanyes obertes, transmet que el lloc és professional i de confiança, i ara es mostra al costat del nom del teu lloc als resultats de Google. Sense favicon, els visitants veuen una icona genèrica d'un globus terraqüi o d'una pàgina en blanc, i el teu servidor omple els registres d'errors 404. Pots crear un conjunt de favicons complet gratis amb el generador de favicons MakeFav.

Què és un favicon?

Un favicon és un petit gràfic de marca, normalment una versió simplificada d'un logotip o bé una sola lletra o símbol, que els navegadors i altres programes descarreguen del teu lloc web i mostren allà on cal un identificador visual compacte. En un navegador d'escriptori se sol dibuixar a 16 per 16 píxels CSS, tot i que el fitxer en si hauria de ser més gran perquè es vegi nítid en pantalles d'alta densitat.

Tècnicament, un favicon és simplement un fitxer d'imatge referenciat des del teu HTML (o ubicat en una ruta per defecte) que els agents d'usuari baixen per separat del contingut de la pàgina. Avui dia, un «favicon» rarament és un sol fitxer. Un lloc modern sol incloure diverses versions de la mateixa icona perquè els navegadors, els cercadors, iOS i Android rebin un format i una mida que els convingui.

Una breu història del favicon

El favicon es remunta al març de 1999, quan Microsoft va llançar l'Internet Explorer 5. El navegador permetia als usuaris desar pàgines en una llista de «Favorits», i també buscava un petit fitxer d'icona anomenat favicon.ico a l'arrel del lloc per mostrar-lo al costat de cada entrada desada. La idea era senzilla: si un lloc oferia /favicon.ico, la icona apareixia al costat del marcador.

Aviat altres navegadors van adoptar la funció, i la navegació amb pestanyes la va fer molt més útil. A mesura que les pestanyes es van convertir en la manera principal de navegar, el favicon va passar de ser una decoració dels marcadors a ser una eina bàsica de navegació. Amb els anys, l'enfocament ha evolucionat:

• Principis dels anys 2000: l'element <link rel="icon"> va permetre als llocs apuntar a una icona des de qualsevol URL en lloc de només l'arrel, i els navegadors diferents d'IE van començar a acceptar fitxers PNG i GIF.
• Anys 2010: Apple va introduir l'apple-touch-icon per a les pantalles d'inici d'iOS, i Android i Windows van afegir les seves pròpies convencions, com les icones del manifest i les imatges de mosaic.
• Actualitat: els favicons SVG, els manifests d'aplicacions web, les icones adaptades al mode fosc i els requisits de Google sobre els favicons als resultats de cerca han convertit el favicon en una part petita però real de la configuració tècnica d'un lloc.

On apareixen els favicons avui dia

El teu favicon es mostra en molts més llocs que la pestanya del navegador. Els principals són:

• Pestanyes del navegador: el lloc més visible, on sovint la icona és l'única cosa que es veu quan hi ha moltes pestanyes obertes.
• Marcadors i preferits: la icona se situa al costat del títol de la pàgina a les barres i als menús de marcadors.
• Historial i pàgines més visitades: els navegadors mostren els favicons a les llistes de l'historial i a les pàgines de pestanya nova.
• Resultats de cerca de Google: tant al mòbil com a l'escriptori, Google mostra el favicon del lloc al costat del nom i de l'URL.
• Pantalles d'inici: quan un visitant afegeix el teu lloc a la pantalla d'inici d'iOS o d'Android, la icona tàctil o la icona del manifest esdevé la drecera amb aspecte d'aplicació.
• PWA instal·lades: una aplicació web progressiva utilitza les icones del seu manifest per a la icona del llançador, la pantalla de benvinguda i el selector de tasques.
• Mosaics de Windows i llocs fixats: les versions antigues de Windows i d'Edge feien servir imatges de mosaic definides per als llocs fixats; les modernes sobretot reutilitzen les teves icones estàndard.
• Previsualitzacions d'enllaços en algunes aplicacions: certes eines de xat i de productivitat (Slack n'és un exemple conegut) mostren el favicon d'un lloc al costat d'un enllaç desplegat. La majoria de previsualitzacions es basen sobretot en les imatges Open Graph, però sovint el favicon aporta la petita marca de la identitat.

Per què és important un favicon per al teu lloc web

Reconeixement de marca

Les persones reconeixen els colors i les formes més ràpid del que llegeixen el text. Una icona coherent que es repeteix a les pestanyes, als marcadors i als resultats de cerca crea familiaritat cada vegada que algú la veu, cosa que suposa exposició de marca gratuïta a cada visita.

Confiança i credibilitat

La manca de favicon fa que un lloc sembli inacabat. Una icona neta i ben renderitzada és un petit senyal que algú es preocupa pels detalls, cosa que reforça la percepció que el lloc és legítim. No és una mesura de seguretat, i els llocs de phishing poden copiar icones, però una icona buida per defecte rarament ajuda una empresa a semblar sòlida.

Taxa de clics als resultats de cerca

Com que Google mostra el favicon al costat del teu resultat, aquest passa a formar part de l'aspecte del teu resultat davant de la competència. Google no ha publicat cap efecte dels favicons en el posicionament, i no hauries d'esperar un impuls en el rànquing. El benefici és de reconeixement visual: els usuaris que coneixen la teva icona tenen més probabilitat de detectar i triar el teu resultat, sobretot al mòbil, on els resultats són compactes.

Usabilitat amb moltes pestanyes obertes

Quan un navegador té vint pestanyes obertes, els títols es redueixen a no res i el favicon és l'únic que queda. Una icona distintiva permet trobar la teva pestanya a l'instant i tornar-hi en lloc d'obrir-ne un duplicat o oblidar-la.

Impressió professional

Un favicon ben dissenyat mostra la mateixa cura pels detalls que la resta del teu lloc. Tant en pàgines de producte com en documentació, blogs i aplicacions web, és un dels acabats més econòmics que pots afegir.

Accessibilitat per trobar pestanyes

Les icones ajuden els usuaris que exploren visualment en lloc de llegir, incloses les persones amb dislèxia o diferències cognitives, i qualsevol que canviï ràpidament entre tasques. Una icona d'alt contrast i de forma simple és més fàcil de distingir. Tanmateix, recorda que el favicon és un complement: no substitueix un títol de pàgina clar, en què es basen els lectors de pantalla i les tecnologies d'assistència.

Què passa si no tens favicon

Els navegadors sol·liciten automàticament /favicon.ico a l'arrel del teu domini, encara que el teu HTML no n'esmenti cap. Si el fitxer no existeix, passen diverses coses:

• Icona genèrica: els visitants veuen una icona per defecte d'un globus, d'un document o en blanc a la pestanya i als marcadors, cosa que dona un aspecte anònim.
• Errors 404 als registres: cada navegador que demana el fitxer genera una sol·licitud fallida. En llocs amb molt de trànsit, això afegeix soroll als registres d'accés, al monitoratge d'errors i a les analítiques, i pot amagar problemes reals.
• Sense icona als resultats de Google: sense un favicon vàlid i rastrejable, Google mostra la seva icona per defecte al costat del teu resultat.
• Sol·licituds malgastades: els navegadors poden reintentar-ho, afegint una càrrega petita però inútil al teu servidor.

Fins i tot una icona molt senzilla és millor que cap, perquè elimina els errors 404 i dona als usuaris alguna cosa recognoscible.

Els formats de favicon, explicats

Cap format únic cobreix totes les plataformes, de manera que la majoria de llocs utilitzen un petit conjunt de fitxers.

Les imatges de mosaic antigues de Windows (configurades mitjançant browserconfig.xml) eren necessàries per a l'Internet Explorer 11 i l'antic Edge. Ara rarament són necessàries, tret que hagis de donar suport a aquests entorns.

Les directrius de Google sobre favicons per als resultats de cerca

Si vols que la teva icona aparegui a la Cerca de Google, segueix els requisits publicats per Google:

• Mida: la imatge ha de ser quadrada (1:1) i múltiple de 48 píxels, com ara 48x48, 96x96 o 144x144. Després Google la redueix a 16x16 per mostrar-la. La mida mínima admesa és 8x8, però es recomana 48x48 o més.
• Formats: serveix qualsevol format compatible amb els navegadors, inclosos ICO, PNG i SVG.
• URL estable: no canviïs l'URL del favicon amb freqüència. Una adreça estable ajuda Google a mantenir la teva icona actualitzada.
• Rastrejable: tant el fitxer del favicon com la pàgina d'inici han de ser accessibles per a Googlebot. No els bloquegis a robots.txt ni darrere d'un inici de sessió.
• Una declaració per lloc: la icona està associada a la pàgina d'inici del lloc, així que posa l'etiqueta <link> al head de la pàgina d'inici.
• Representativa i adequada: la icona ha de reflectir la teva marca, i Google pot substituir per la seva icona per defecte una que sigui ofensiva o enganyosa.

Després de publicar o canviar un favicon, Google pot tardar dies o setmanes a tornar-lo a rastrejar i actualitzar-lo, així que no esperis un canvi immediat.

Com crear un favicon ràpidament amb MakeFav

No necessites programari de disseny ni línia d'ordres. El generador MakeFav converteix una única imatge d'origen en els fitxers descrits més amunt.

1. Prepara la teva imatge. Utilitza un logotip o símbol quadrat de 512 x 512 px o més gran. Les formes simples funcionen millor perquè la icona es veurà a 16 px.
2. Puja-la a la pàgina d'inici de MakeFav, o obre l'editor per ajustar la imatge, el fons i el marge interior abans d'exportar.
3. Previsualitza el resultat en mides petites i sobre fons clars i foscos per assegurar-te que continua sent llegible.
4. Descarrega el paquet. Conté l'ICO, les mides PNG, la icona tàctil d'Apple, les icones del manifest i el fragment HTML per enganxar.
5. Puja els fitxers a l'arrel del teu lloc web perquè siguin accessibles en rutes com /favicon.ico.
6. Afegeix l'HTML al <head> de totes les pàgines, o al teu disseny o plantilla compartits.
7. Verifica-ho amb el verificador de favicons, i després buida la memòria cau del navegador i recarrega per veure la icona nova.

Exemple de fragment HTML

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

L'atribut sizes="48x48" a l'enllaç de l'ICO ajuda els navegadors a preferir l'SVG quan és compatible, mentre es conserva l'ICO com a alternativa. El PNG de 96 px compleix la regla de Google del múltiple de 48.

Exemple de manifest d'aplicació web

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Si treballes amb pipelines de compilació o vols automatitzar la creació d'icones, consulta els recursos per a desenvolupadors.

Consells de disseny per a un favicon que funcioni

• Mantén-lo simple. Una forma, una lletra o un monograma contundent supera un logotip detallat que es converteix en una taca a 16 px.
• Utilitza un contrast fort. Assegura't que la icona es vegi tant en temes de navegador clars com foscos. Un mosaic de fons de color hi ajuda.
• Evita el text. Una sola inicial va bé; les paraules són il·legibles en aquesta mida.
• Deixa una mica de marge interior per a icones maskable i de vores arrodonides, perquè no es retalli res d'important.
• Sigues coherent amb el teu logotip i els colors de la marca perquè el favicon reforci el reconeixement.
• Prova'l en dispositius reals i comprova com es veu en una pestanya, en un marcador i en un resultat de Google.

Problemes habituals amb els favicons

Si la teva icona no apareix, les causes habituals són la memòria cau, les rutes incorrectes i els fitxers bloquejats. Els navegadors desen els favicons a la memòria cau de manera agressiva, així que sovint n'hi ha prou amb una recàrrega forçada o una finestra privada nova per veure les actualitzacions. Comprova que l'URL del fitxer retorni un estat 200 i el tipus de contingut correcte, i que l'etiqueta <link> sigui dins del <head>. Per a la cerca, assegura't que robots.txt no bloquegi la icona ni la pàgina d'inici. El verificador de MakeFav t'ajuda a detectar aquests problemes ràpidament.

Preguntes freqüents

Què vol dir favicon?

Favicon és l'abreviatura de «favorite icon» («icona preferida»). El nom ve de l'Internet Explorer 5, que el 1999 va utilitzar per primera vegada un petit fitxer d'icona per decorar les entrades de la llista de Favorits del navegador. El terme es va quedar, tot i que ara la icona apareix en molts altres llocs.

Un favicon ajuda al SEO?

Un favicon no és un factor de posicionament directe. Tanmateix, apareix al costat del nom del teu lloc als resultats de Google tant al mòbil com a l'escriptori, de manera que pot millorar el reconeixement de marca i l'atractiu visual del teu resultat, cosa que pot afavorir indirectament els clics. Seguir les directrius de Google és el que fa que la icona sigui elegible per mostrar-se.

Quina mida ha de tenir un favicon?

Per a la Cerca de Google, utilitza una imatge quadrada múltiple de 48 píxels, com ara 48x48 o 96x96. Per a una cobertura més àmplia, proporciona també un fitxer ICO, una icona tàctil d'Apple de 180x180 i icones del manifest de 192x192 i 512x512. Un SVG és un bon complement per a l'escalabilitat.

Encara necessito favicon.ico si faig servir PNG o SVG?

Encara és una bona idea. Els navegadors i algunes eines sol·liciten /favicon.ico per defecte, i el programari més antic hi confia. Mantenir un fitxer ICO a l'arrel del lloc evita errors 404 i t'ofereix una alternativa segura quan l'SVG o el PNG no són compatibles.

Per què no s'actualitza el meu favicon?

Els navegadors i els cercadors desen els favicons a la memòria cau durant molt de temps. Prova una recàrrega forçada, una finestra privada o buidar la memòria cau. Assegura't que la ruta del fitxer sigui correcta i que s'estigui servint el fitxer nou. A la Cerca de Google, una icona canviada pot tardar dies o setmanes a ser rastrejada de nou i actualitzada.