Quines mides de favicon necessites el 2026? El conjunt ideal

El 2026 el conjunt ideal de favicons és: un favicon.ico que contingui imatges de 16, 32 i 48 px, un PNG de 96x96 (per a Google Search), un favicon SVG opcional, un apple-touch-icon.png de 180x180 i uns PNG de 192x192 i 512x512 (més un de 512 maskable) declarats en un manifest d'aplicació web. Els mosaics de Windows i les mides antigues d'Apple només calen si has de donar suport a dispositius molt vells. Tot seguit s'explica per què, amb una taula de mides, HTML llest per fer servir i els errors més habituals que cal evitar.

El panorama dels favicons solia ser un embolic: cada navegador i sistema operatiu demanava la seva pròpia mida, cosa que va donar lloc als famosos blocs de 20 línies al <head>. Avui la major part d'això és obsolet. Els navegadors moderns escalen una sola icona de qualitat, iOS en vol una sola mida i Android llegeix el manifest. Aquest article separa el que realment cal d'allò que simplement és agradable de tenir.

La resposta breu: el conjunt ideal d'arxius de favicon

• favicon.ico (16, 32, 48 px en un sol arxiu) a l'arrel del lloc. Els navegadors, els lectors de canals i moltes eines encara demanen /favicon.ico automàticament.
• favicon.svg (opcional però recomanat) per a una visualització nítida a qualsevol mida i compatibilitat amb el mode fosc.
• PNG de 16x16, 32x32 i 96x96 com a alternatives explícites. La versió de 96 px ajuda a Google Search, que requereix un múltiple de 48 px.
• apple-touch-icon.png de 180x180, opac, sense transparència.
• PNG de 192x192 i 512x512 a manifest.json, més una icona maskable de 512x512 per a Android.
• Etiqueta meta theme-color per tenyir la interfície del navegador al mòbil.
• Mosaics de Windows (70, 150, 310 px) amb browserconfig.xml només per a llocs fixats en versions antigues de Windows i IE11.

Taula de mides de favicon: finalitat, noms d'arxiu i prioritat

Fes servir aquesta taula com a llista de verificació. «Obligatori» vol dir que un lloc normal es veurà trencat o inacabat sense aquest arxiu; «Recomanat» vol dir una millora clara de qualitat; «Opcional» vol dir un ús de nínxol o heretat.

favicon.ico: 16, 32 i 48 px en un sol arxiu

Un arxiu ICO és un contenidor que conté diversos mapes de bits. Un bon favicon.ico inclou imatges de 16x16, 32x32 i 48x48 perquè el navegador o el sistema operatiu pugui triar la més propera. Col·loca'l a l'arrel del teu domini (https://example.com/favicon.ico). Tot i que el teu HTML apunti a un altre lloc, molts rastrejadors, lectors RSS i navegadors antics encara demanen aquesta URL exacta, de manera que tenir-lo evita el soroll d'errors 404 als registres.

No et limitis a canviar el nom d'un PNG a .ico. La majoria de navegadors ho toleren, però algunes eines ho rebutgen i perds l'avantatge de les diverses resolucions. Exporta un ICO de veritat.

Favicons PNG: 16, 32 i 96 px

Els enllaços PNG amb sizes explícit permeten que el navegador triï el millor mapa de bits sense haver d'analitzar l'ICO. A la pràctica, 32x32 cobreix les pestanyes d'alta densitat i 16x16 és gairebé redundant avui dia. Val la pena afegir la mida de 96x96 perquè Google Search mostra els favicons al costat dels resultats i requereix una icona quadrada la mida de la qual sigui múltiple de 48 px (48x48, 96x96, 144x144, etc.). Un arxiu de 96 px dona a Google una font més nítida que un de 48 px quan la redueix per als resultats mòbils.

Consell de disseny: a 16 px els detalls fins desapareixen. Fes servir una forma audaç i senzilla, alt contrast i poc text o gens. Pots retocar i previsualitzar la teva icona a l'editor de MakeFav abans d'exportar-la.

Favicon SVG i mode fosc

Un favicon SVG és un únic arxiu minúscul que es manté nítid a qualsevol densitat de pantalla. Els navegadors basats en Chromium i Firefox el suporten. El suport de Safari ha estat històricament limitat, així que mai no et basis només en l'SVG: conserva les alternatives ICO i PNG.

El gran avantatge és la personalització del tema. Com que un SVG pot contenir CSS, pots adaptar la icona a l'esquema de colors de l'usuari amb prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Tingues en compte que la media query reflecteix el tema del navegador o del sistema operatiu, que és el que fa servir la barra de pestanyes. No segueix un interruptor de tema del teu propi lloc web.

Una peculiaritat coneguda: quan s'enllacen tant un ICO com un SVG, Chrome pot triar l'ICO. Si declares l'ICO amb sizes="32x32" i indiques l'SVG després, Chrome prefereix l'SVG, tal com es mostra al codi de més avall.

Apple touch icon: 180x180 i les mides heretades

Quan un usuari afegeix el teu lloc a la pantalla d'inici d'iOS o iPadOS, Safari fa servir l'apple-touch-icon. Avui n'hi ha prou amb un únic PNG de 180x180 px: iOS el redueix per als dispositius més antics i els iPad. Anomena'l apple-touch-icon.png i posa'l a l'arrel; iOS fins i tot busca aquest arxiu per defecte si no hi ha cap etiqueta link.

Normes per a la icona d'Apple:

• Sense transparència. iOS omple els píxels transparents de negre, de manera que un logotip transparent sovint es converteix en una taca negra. Afegeix un color de fons sòlid.
• Sense cantonades arrodonides. iOS aplica la seva pròpia màscara arrodonida. Proporciona un quadrat complet.
• Mantén el contingut important lluny de les vores, ja que les cantonades es retallen.

Quan necessites les mides heretades (57, 72, 76, 114, 120, 144, 152, 167)? Només si dónes suport a iOS 6 o anterior, o si vols un control exacte de píxels per dispositiu per a l'iPad Pro (167 px) i l'iPad (152 px). Per a pràcticament qualsevol lloc el 2026, l'arxiu de 180x180 sol és suficient. La configuració de màxima compatibilitat de més avall n'inclou algunes per completar.

Icones d'Android i PWA: 192, 512 i maskable

Chrome a Android i altres navegadors compatibles amb PWA llegeixen les icones del manifest d'aplicació web, no de <link rel="icon">. Per poder instal·lar l'aplicació necessites, com a mínim, un PNG de 192x192 i un de 512x512. La icona de 192 px es fa servir a la pantalla d'inici i al llançador d'aplicacions; la de 512 px apareix a les pantalles de càrrega i als diàlegs d'instal·lació.

Icones maskable i la zona segura

Les icones adaptatives d'Android es poden retallar en forma de cercle, squircle o una altra forma segons el dispositiu. Una icona maskable està dissenyada per ser retallada sense risc: el contingut important ha d'estar dins de la zona segura, un cercle centrat amb un diàmetre del 80% de la imatge (el radi equival al 40% del costat). Per a un arxiu de 512x512, això vol dir mantenir el logotip dins d'un cercle d'uns 410 px de diàmetre i estendre el color de fons a les quatre vores perquè no apareguin buits després d'aplicar la màscara.

Declara la icona maskable com a entrada pròpia amb "purpose": "maskable". Evita "any maskable" en un sol arxiu: el marge necessari per a l'emmascarament es veu massa petit quan la icona es mostra sense màscara.

Exemple de manifest.json

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

Serveix l'arxiu com a application/manifest+json (o application/json) i enllaça'l des de cada pàgina amb <link rel="manifest" href="/manifest.json">. Alguns projectes l'anomenen site.webmanifest; el nom no importa, l'enllaç sí.

Mosaics de Windows i browserconfig.xml

Windows 8.1 i 10 permeten als usuaris fixar un lloc al menú Inici, i IE11 i l'Edge antic llegeixen les imatges dels mosaics des de browserconfig.xml. Les mides habituals són 70x70 (petit), 150x150 (mitjà), 310x150 (ample) i 310x310 (gran). L'Edge basat en Chromium fa servir el manifest i els favicons habituals, de manera que això és una funcionalitat heretada. Inclou-la només si el teu públic encara inclou instal·lacions antigues de Windows, per exemple en entorns corporatius.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: tenyir la interfície del navegador

L'etiqueta meta theme-color indica als navegadors mòbils (i a alguns d'escriptori) quin color fer servir per a la barra d'adreces o la barra de títol. No és un favicon, però forma part del mateix conjunt de marca. Pots indicar valors diferents per al mode clar i el fosc:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Configuració moderna mínima vs. màxima compatibilitat

Configuració moderna mínima (recomanada per a la majoria de llocs)

Cinc arxius cobreixen més del 99% dels usos reals: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) i les dues icones del manifest (192 i 512). Afegeix el PNG de 96x96 si t'importa la visibilitat a Google Search, i una icona maskable si publiques una PWA.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

Configuració de màxima compatibilitat

Tria-la quan serveixis un públic ampli o empresarial, o quan vulguis cobrir tots els clients possibles. Afegeix mides PNG explícites, mides heretades d'Apple, mosaics de Windows i colors de tema.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

Fixa't en les rutes relatives a l'arrel que comencen per /. Funcionen a qualsevol profunditat de pàgina, cosa que ens porta als errors més habituals.

Errors habituals amb els favicons i com solucionar-los

1. Rutes incorrectes

Un enllaç com href="favicon.ico" es resol en relació amb la URL actual, de manera que funciona a / però falla a /blog/post/. Fes servir URL relatives a l'arrel (/favicon.ico) o absolutes. Comprova també que els arxius existeixin de veritat: obre cada URL directament al navegador i assegura't que retorna HTTP 200, no una redirecció a una pàgina 404 o a un mur d'inici de sessió.

2. Atribut sizes absent o incorrecte

Sense sizes, els navegadors han de descarregar les icones per inspeccionar-les i poden triar la incorrecta. Declara sempre sizes als enllaços PNG i assegura't que coincideixi amb les dimensions reals en píxels. Un arxiu etiquetat com a 32x32 que en realitat és de 64x64 provoca resultats inconsistents.

3. Memòria cau agressiva

Els navegadors desen els favicons a la memòria cau durant molt de temps, sovint independentment de la memòria cau de la pàgina. Després d'un canvi d'imatge de marca, la icona antiga pot persistir durant dies. Canvia el nom de l'arxiu o afegeix una cadena de consulta de versió (/favicon.ico?v=2) i actualitza les etiquetes link. Les recàrregues forçades sovint no refresquen la icona de la pestanya; obrir directament la URL de la icona i recarregar-la normalment sí.

4. Imatges no quadrades

Els favicons han de ser quadrats. Un logotip rectangular s'estira, es retalla o es mostra amb franges de manera imprevisible. Dissenya un símbol quadrat específic, com una inicial o un pictograma, en lloc de reduir un logotip allargat.

5. Apple touch icons transparents que es tornen negres

iOS omple la transparència de negre. Dona a la icona de 180x180 un fons opac i no n'arrodoneixis prèviament les cantonades.

6. Icones maskable sense zona segura

Si el logotip toca les vores d'una icona maskable, Android el tallarà. Mantén-lo dins del cercle central del 80% i omple tot el llenç amb el color de fons.

7. Bloquejar les icones als rastrejadors

Si robots.txt no permet la ruta del teu favicon, Google no pot obtenir-lo i mostrarà una icona genèrica de globus als resultats de cerca. Recorda també que Google necessita el favicon al mateix host que la pàgina i només l'actualitza de tant en tant, de manera que els canvis poden trigar dies o setmanes a aparèixer.

8. Oblidar l'enllaç al manifest o les finalitats

Un manifest que no està enllaçat, o que no té icones de 192 i 512 px, impedeix l'avís d'instal·lació a Chrome. Valida'l a les eines per a desenvolupadors del navegador, a la pestanya Application.

Genera tot el conjunt amb un sol clic

Crear una dotzena d'arxius a mà en un editor d'imatges, convertir-los després a ICO i escriure el manifest és feixuc i propens a errors. MakeFav genera tots els arxius anteriors a partir d'una sola imatge, text o emoji: favicon.ico amb diverses mides, PNG, SVG, Apple touch icon, PNG de 192/512, una icona maskable, mosaics de Windows, manifest.json i browserconfig.xml, a més d'un fragment HTML llest per enganxar, tot en una sola descàrrega ZIP. Pots afinar el fons, el marge i la forma a l'editor, verificar un lloc existent amb el verificador de favicons i automatitzar la generació mitjançant els recursos per a desenvolupadors.

Llista de verificació del desplegament

1. Puja tots els arxius a l'arrel del teu lloc.
2. Enganxa el fragment HTML al <head> de cada pàgina (o a la teva plantilla compartida).
3. Assegura't que les rutes són relatives a l'arrel i retornen HTTP 200.
4. Comprova el mode clar i el fosc, una instal·lació a la pantalla d'inici d'iOS i una instal·lació a Android.
5. Executa el verificador per detectar mides que falten o que no coincideixen.
6. Esborra les memòries cau amb una cadena de versió si has substituït una icona antiga.

Preguntes freqüents

Encara necessito favicon.ico el 2026?

Sí. Tot i que els navegadors moderns accepten PNG i SVG, molts rastrejadors, lectors de canals, clients de correu i navegadors antics encara demanen /favicon.ico directament. Un ICO amb diverses mides, amb imatges de 16, 32 i 48 px, és un arxiu petit que evita icones que falten i errors 404.

Quina mida ha de tenir un favicon per a Google Search?

Google requereix un favicon quadrat la mida del qual sigui múltiple de 48 px, de com a mínim 48x48. Un PNG de 96x96 és una opció segura, i també s'admet un SVG. Google necessita també que l'arxiu sigui rastrejable, així que no el bloquegis a robots.txt. Les actualitzacions poden trigar dies o setmanes a mostrar-se.

Són suficients 180x180 per a l'Apple touch icon?

Per a gairebé tots els llocs, sí. iOS i iPadOS redueixen un PNG de 180x180 per a tots els dispositius actuals. Les mides antigues (de 57 a 152 px) només importen per a versions molt velles d'iOS. Recorda fer servir un fons opac perquè la icona no es torni negra.

Què és una icona maskable i en necessito una?

Una icona maskable és un PNG de 512x512 dissenyat per a les formes d'icona adaptativa d'Android. El seu contingut important és dins d'un cercle del 80% de diàmetre al centre, i el fons omple tot el quadrat. Només la necessites si ofereixes una PWA instal·lable, però fa que la icona es vegi nativa en lloc de quedar dins d'un cercle blanc.

Per què la meva icona antiga encara es mostra després de canviar-la?

Els navegadors desen els favicons a la memòria cau per separat i durant molt de temps. Canvia el nom de l'arxiu o afegeix una cadena de consulta de versió com ?v=2, actualitza les etiquetes link i, després, obre directament la URL de la icona i recarrega-la. Els motors de cerca poden trigar més a refrescar la seva pròpia còpia.