Publicat el 22/09/2026

Obres la teva web al navegador i, al costat del títol de la pestanya, apareix una icona minúscula. Aquest detall —el favicon— és el que molts visitants associen amb la teva marca abans de llegir una sola línia. Si falta, es veu genèric o pixelat, la sensació és la mateixa: una empresa que no cuida els detalls.

En una web d'empresa, el favicon no és decoració. Forma part de la teva identitat digital, apareix en pestanyes, historial, marcadors, resultats de cerca i, si el configures bé, a la pantalla d'inici del mòbil. En aquesta guia repassem quins fitxers necessites, com implementar-los sense errors i quin impacte tenen en confiança, SEO i conversió.

Què és un favicon i on el veu el visitant

El favicon (favorite icon) és la icona que el navegador mostra al costat del títol de la pàgina. Històricament era un fitxer favicon.ico de 16×16 píxels; avui convé oferir diverses mides i formats per contextos diferents:

Pestanya del navegador — identifica el teu lloc entre desenes de pestanyes obertes.
Historial i marcadors — facilita que l'usuari torni a la teva web.
Resultats de Google — des de 2023, Google pot mostrar el favicon al costat del snippet en mòbil i escriptori.
Pantalla d'inici del mòbil — si afegeixes un web app manifest, el visitant pot «instalar» la web com accés directe.

Si ja has treballat la teva identitat de marca, el favicon ha de ser una extensió natural del logotip: reconeixible, llegible a mida petita i coherent amb la resta de la web.

Per què importa més del que sembla

Un favicon ben dissenyat aporta beneficis concrets:

Confiança immediata. Una icona professional transmet que l'empresa és real i cuidada; la icona per defecte del navegador suggereix el contrari.
Reconeixement de marca. En pestanyes múltiples, la teva icona ajuda a localitzar la web a l'instant.
Presència en cerques. Apareixer amb favicon a Google reforça l'autoritat visual davant competidors sense icona.
Experiència mòbil completa. Els app icons permeten que clients habituals accedixin a la web com si fos una app nativa.

Quins fitxers necessites el 2026

Per cobrir navegadors moderns i dispositius, prepara almenys:

favicon.ico — format clàssic multi-mida (16, 32 i 48 px) per compatibilitat.
favicon.svg — vector escalable, ideal per pantalles d'alta densitat.
apple-touch-icon.png — 180×180 px per iOS i Safari en afegir a inici.
icon-192.png i icon-512.png — per Android, Chrome i el web app manifest.
site.webmanifest — fitxer JSON que defineix nom, colors i icones de la «app» web.

No cal inventar 20 mides diferents. Un set ben planificat amb 4–5 fitxers cobre el 99 % dels casos. El crític és que el disseny funcioni a 16 px: simplifica el logotip, evita text minúscul i prova en fons clar i fosc.

Com implementar-lo correctament

Coloca les etiquetes al <head> de totes les pàgines (o al layout principal):

SVG com opció principal: <link rel="icon" href="/favicon.svg" type="image/svg+xml">
ICO com respatller: <link rel="icon" href="/favicon.ico" sizes="any">
Apple touch icon: <link rel="apple-touch-icon" href="/apple-touch-icon.png">
Manifest: <link rel="manifest" href="/site.webmanifest">
Color del tema: <meta name="theme-color" content="#el-teu-color-marca">

Puja els fitxers a la raíz pública o a /assets/icons/, però mantén rutes estables. Si canvies de domini o reestructures URLs, no oblidis actualitzar també les icones — forma part de qualsevol migració web.

Errors freqüents que resten credibilitat

Usar el logotip complet sense adaptar. A 16 px, un logo horitzontal amb text es converteix en una taca il·legible.
Oblidar actualitzar el favicon després d'un rebranding. Incoherència entre web nova i icona antiga genera desconfiança.
No declarar el manifest. Sense ell, Android i Chrome no ofereixen «Afegir a pantalla d'inici» amb la teva icona.
Icones pixelades o comprimides en excés. Usa PNG de qualitat per mides grans; el SVG cobre l'escalat.
Cachear malament les icones. Si canvies el favicon, configura capçaleres de caché o reanomena el fitxer per forçar l'actualització.

Revisa també que el favicon no penalitzi la velocitat web: els fitxers han de ser lleugers (uns pocs KB cadascun).

Favicon, SEO i resultats de cerca

Google mostra el favicon als resultats quan compleix les directrius: ha de ser representatiu de la marca, accessible per Googlebot (sense bloqueig en robots.txt) i d'almenys 48×48 px. No és un factor de ranking direct, però sí influeix en el CTR: un resultat amb icona reconeixible destaca.

Combina-ho amb meta títols i descripcions ben escrits i amb previews socials coherents. El visitant ha de reconèixer la marca a Google, WhatsApp i la pestanya del navegador amb la mateixa identitat visual.

App icons i «Afegir a pantalla d'inici»

Cada vegada més usuaris desen webs freqüents al mòbil. Amb un site.webmanifest correct, la web pot aparèixer a la pantalla d'inici amb nom, icona i color de marca — sense desenvolupar una app nativa.

Un manifest mínim inclou name, short_name, icons (192 i 512), start_url, display i theme_color. Per la majoria de webs corporatives, display: standalone o minimal-ui ofereix una experiència neta sense barra del navegador.

Checklist abans de llançar o auditar la web

Favicon visible a Chrome, Firefox, Safari i Edge (escriptori i mòbil).
Icona llegible a 16 px; versió simplificada del logotip.
apple-touch-icon.png de 180×180 px configurat.
site.webmanifest amb icones 192 i 512 px.
theme-color alineat amb la paleta de marca.
Favicon accessible (HTTP 200, sense bloqueig en robots.txt).
Coherència amb la resta de la identitat després de qualsevol redisseny.

Inclou aquests punts al teu checklist de llançament web: són detalls ràpids d'implementar que moltes empreses obliden.

Conclusió: un detall petit amb impact desproporcionat

El favicon ocupa pocs píxels, però apareix en cada interacció amb la web: cada visita, cada cerca, cada vegada que algú desa la pàgina. Ometre-lo o fer-lo malament és regalar una primera impressió mediocre.

Dedica una hora a dissenyar un set d'icones coherent, implementar-lo al <head> i provar-lo en dispositius reals. És una de les millores amb major retorn i menor esforç que pots aplicar a la web de la teva empresa.

Vols una web on cada detall —des del favicon fins a la conversió— estigui alineat amb la teva marca? A aatsoft dissenyem i desenvolupem webs corporatives cuidades en cada píxel.