UX del favicon: què fa que un favicon sigui excel·lent

Un bon favicon és una marca senzilla i d'alt contrast, normalment el teu logosímbol o una o dues lletres, que continua sent llegible a 16x16 píxels tant en pestanyes del navegador clares com fosques, encaixa amb la teva marca i canvia poques vegades. Tota la resta d'aquesta guia (alineació de píxels, color, marges, transparència, mida del fitxer) serveix per a aquests objectius: que el teu lloc sigui fàcil de trobar a l'instant entre desenes de pestanyes obertes.

Un favicon és minúscul, però apareix en molts llocs: pestanyes del navegador, barres de marcadors, llistes d'historial, el menú de cerca de pestanyes, els resultats de cerca de Google al mòbil i a l'ordinador, i les pantalles d'inici dels telèfons. Quan un usuari té moltes pestanyes obertes, el títol sovint queda truncat fins a desaparèixer i la icona és l'única pista que queda. Això el converteix en un element de navegació real, no en una decoració.

1. Llegibilitat a 16x16

La mida clàssica d'un favicon és de 16x16 píxels CSS. En una pantalla estàndard són literalment 256 píxels; en una pantalla retina 2x, el navegador sol triar una imatge de 32x32 per al mateix espai. Tot el que dissenyis ha de sobreviure a aquesta reducció.

Fes-ho senzill

• Una sola forma o una o dues lletres. Funcionen una sola lletra en negreta, un cercle amb un símbol o una marca geomètrica senzilla. Tres lletres o una paraula es convertiran en soroll.
• Un sol punt focal. Si no pots descriure la icona en cinc paraules, és massa complicada.
• Sense degradats, ombres ni textures fines. En mides petites es converteixen en taques borroses.

Alinea'l amb la quadrícula de píxels

A 16x16, una línia situada mig píxel fora de la quadrícula es suavitza (antialiàsing) entre dues files de píxels i es veu grisa i difusa. Situa les vores sobre límits de píxel sencers i fes servir amplades parelles quan la forma sigui simètrica. Si exportes des d'una eina vectorial, activa l'ajust als píxels, o comprova el resultat reduït i corregeix-lo a mà.

Evita les línies fines

Els traços més prims de 2 píxels a 16x16 (aproximadament un 12 per cent de l'amplada de la icona) solen desaparèixer o tremolar entre mides. Engrosseix els traços, elimina els detalls interiors i uneix els buits petits. Un glif en negreta, lleugerament pesat, normalment es llegeix millor que una miniatura fidel d'un logotip detallat.

Retoca-ho a mà

Els fitxers ICO i PNG no tenen cap mena de hinting tipogràfic, de manera que l'equivalent és l'edició manual de píxels: ajustes píxels individuals perquè les corbes, les diagonals i els contraforats (els forats de lletres com la «a» o la «e») es mantinguin nítids. La reducció automàtica és un bon primer esborrany, però uns quants píxels col·locats a mà sovint marquen la diferència entre una taca i una lletra reconeixible. L'editor de píxels de MakeFav està pensat per a això: obre el llenç de 16x16, corregeix els píxels problemàtics i exporta.

2. Contrast en pestanyes clares i fosques

Avui és habitual que els navegadors funcionin en mode fosc, i molts usuaris tenen barres de pestanyes que no coincideixen amb el tema de la pàgina. Una icona blau marí fosc amb fons transparent pot ser perfecta en una pestanya blanca i gairebé invisible en una de gris fosc. Prova-ho sempre en tots dos.

Solucions pràctiques

• Afegeix una forma de fons. Un quadrat arrodonit o un cercle ple d'un color de marca garanteix que la marca tingui el seu propi contrast, sigui quina sigui la pestanya.
• Fes servir un contorn fi o un halo. Una vora d'1 px més clara al voltant d'un glif fosc (o a l'inrevés) manté la silueta visible en qualsevol dels dos temes, però a 16x16 ha de quedar nítida, així que prova-ho.
• Tria colors de marca de to mitjà. Colors com el blau intens, el taronja, el verd o el magenta solen funcionar tant sobre superfícies blanques com gairebé negres. El groc molt clar o el blau marí molt fosc són els arriscats.
• Fes servir un favicon SVG adaptatiu. Un SVG pot incloure una media query prefers-color-scheme perquè la icona canviï amb el tema del sistema.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

Tingues en compte que la media query reflecteix el tema del sistema operatiu o del navegador, que normalment és el que segueix la barra de pestanyes, però no sempre. A més, la compatibilitat amb els favicons SVG varia: Chrome i Firefox els admeten, mentre que Safari històricament ha anat enrere, així que mantén sempre alternatives en PNG o ICO. Un disseny amb fons sòlid és l'opció més robusta, perquè no necessita cap lògica de tema.

3. Reconeixement i coherència de marca

Fes servir el logosímbol (el símbol o monograma), no la versió completa del logotip amb el logotip tipogràfic. El text dins d'una icona de 16x16 és il·legible, i un logotip horitzontal ample reduït a un quadrat et deixa només una franja minúscula al mig.

• Si la teva marca té un símbol, simplifica'l per a mides petites en lloc de limitar-te a reduir-lo. Una «versió favicon» amb menys detalls és una pràctica habitual.
• Si la teva marca és només un logotip tipogràfic, agafa la primera lletra o una parella de lletres distintiva i composa-la amb la tipografia de la marca en un pes gruixut.
• Mantén els colors coherents amb el teu logotip, la icona de l'aplicació i els avatars de les xarxes socials, perquè l'usuari reconegui la mateixa marca arreu.

La distinció importa tant com la fidelitat. Mira una fila de pestanyes: si altres tres llocs també fan servir un cercle blau, el teu no destacarà. Una forma o un color diferents són més útils que una reducció perfectament fidel.

4. Color: una paleta limitada i saturada

Amb tan pocs píxels, cada color addicional afegeix desordre. Apunta a un o dos colors més, com a màxim, blanc o negre. Els colors saturats es veuen millor en mides petites que els pastels, que tendeixen a fondre's amb el fons de la pestanya.

Pren una mica de la mentalitat de l'accessibilitat. Les WCAG demanen un contrast d'almenys 3:1 per als objectes gràfics significatius (criteri d'èxit 1.4.11, Contrast no textual). Un favicon no hi està formalment inclòs, ja que és part de la interfície del navegador i no del contingut de la pàgina, però un 3:1 entre el glif i el seu fons, i entre la icona i la pestanya, és un objectiu sensat. Evita també comunicar res només amb el to: les variants vermella i verda d'una mateixa icona són indistingibles per a molts usuaris daltònics, així que varia la forma o afegeix un símbol.

5. Forma, marges i zones segures

Omple el quadrat

Les pestanyes del navegador mostren el favicon en una mida petita fixa, així que un marge addicional només fa més petita la teva marca. Per a les icones de pestanya estàndard, fes servir la major part del llenç, amb només un o dos píxels d'espai, perquè la marca sigui tan gran com sigui possible.

Arrodonida o quadrada?

Els navegadors generalment no retallen els favicons de les pestanyes, així que la forma que dibuixes és la que veuen els usuaris. Un quadrat amb les cantonades lleugerament arrodonides es veu ordenat i dona un fons coherent; un glif lliure o un cercle sobre transparència pot semblar més lleuger i més distintiu. Totes dues opcions són vàlides. Tria'n una i mantén coherent tot el teu conjunt d'icones.

Icones Apple touch

iOS afegeix les seves pròpies cantonades arrodonides a l'apple-touch-icon (180x180 és la mida habitual). Proporciona un quadrat de sagnat complet, sense cantonades arrodonides prèviament, o et pot quedar algun tros fosc o blanc visible a les cantonades.

Icones maskable per a Android i PWA

Les icones maskable són retallades pel sistema operatiu en cercles, squircles o altres formes. Mantén tot el contingut important dins de la zona segura: un cercle centrat a la icona amb un radi del 40 per cent de l'amplada de la icona. Estén el color de fons fins a les vores perquè qualsevol màscara quedi bé. No reutilitzis com a icona maskable un favicon de pestanya ajustat de vora a vora, perquè la màscara el retallaria.

6. Transparència

La transparència va bé per als favicons de pestanya, i és el que permet que una icona només de glif quedi neta sobre qualsevol color de pestanya. És un problema per a les icones Apple touch: iOS omple les àrees transparents amb un color sòlid (normalment negre), cosa que pot arruïnar el disseny. Dona sempre a l'apple-touch-icon un fons opac del color de la teva marca. El mateix val per a les icones maskable i per a la majoria d'usos a la pantalla d'inici d'Android, on un fons opac dona resultats previsibles.

7. Estabilitat: no el canviïs massa sovint

Un favicon construeix reconeixement a base de repetició. Canviar-lo sovint obliga els usuaris a tornar a aprendre quina pestanya és la teva, i a més causa maldecaps tècnics. Els navegadors guarden els favicons a la memòria cau de manera agressiva, i Google els obté i els emmagatzema per separat de les teves pàgines, així que una icona nova pot trigar dies o setmanes a aparèixer als resultats de cerca. Google també demana una URL de favicon estable, una icona amb una mida múltiple de 48 píxels (48x48, 96x96, etc.) i un fitxer que pugui rastrejar (no bloquejat per robots.txt). Tracta un canvi de favicon com una decisió de nivell de redisseny de marca, no com una decoració de temporada.

8. Estats de notificació i favicons dinàmics

Algunes aplicacions web canvien el favicon per indicar missatges no llegits, l'estat d'una gravació o un error. Ben fet, és útil; si s'exagera, és irritant.

• Fes servir una insígnia petita (un punt o un recompte curt) en una cantonada, no un redisseny complet. La icona base ha de continuar sent reconeixible.
• Sigues auster. Reserva les insígnies per a esdeveniments que requereixin una acció de l'usuari. No animis la icona contínuament.
• Limita els números. A 16x16 només són llegibles un o dos dígits; mostra «9+» o un simple punt en lloc de «137».
• Restableix-la de pressa quan l'usuari hagi atès l'element, i restaura la icona per defecte.
• No et refiïs només del color. Un punt vermell també s'ha de reforçar amb el títol de la pàgina, com ara «(3) Safata d'entrada», perquè la informació estigui disponible per a tothom.

Els favicons dinàmics normalment es dibuixen en un canvas i s'intercanvien actualitzant l'href de l'element link de la icona. Limita la freqüència d'actualització, perquè canviar constantment el favicon pot consumir CPU i distreure els usuaris.

9. Rendiment

Els favicons són petits, però continuen sent peticions que es poden fer malament.

• Mantén els fitxers petits. Un favicon PNG sol ocupar d'unes centenars de bytes a uns quants kilobytes. Un SVG senzill pot fer menys d'1 KB.
• Evita els fitxers ICO inflats. Un ICO multimida amb imatges de 16, 32 i 48 píxels és suficient. Incrustar-hi una imatge de 256x256 multiplica la mida del fitxer sense cap benefici visible a les pestanyes del navegador.
• Defineix capçaleres de memòria cau. Serveix les icones amb una durada llarga de Cache-Control, per exemple public, max-age=31536000, immutable, i fes servir un nom de fitxer versionat o amb hash quan les canviïs.
• Declara les icones explícitament. Els navegadors demanen /favicon.ico per defecte, així que proporciona'n un encara que declaris altres icones, per evitar soroll de 404 als registres.
• Comprimeix. Passa els PNG per un optimitzador sense pèrdua i minimitza els SVG.

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

Si vols generar tots aquests fitxers a partir d'una única imatge d'origen, el generador de favicons de MakeFav produeix el conjunt estàndard, i la pàgina per a desenvolupadors explica les opcions d'integració.

10. Accessibilitat

Un favicon no té text alternatiu i els lectors de pantalla no l'anuncien, de manera que les eines d'accessibilitat tradicionals, com els atributs alt, no s'hi apliquen. Què sí que importa:

• El títol de la pàgina porta el significat. Escriu elements <title> únics i descriptius. No et refiïs mai de la icona per transmetre un estat; reflecteix qualsevol insígnia al títol.
• Visibilitat per a usuaris amb baixa visió. Un alt contrast, una forma contundent i una marca gran ajuden els usuaris que busquen visualment entre les pestanyes.
• Independència del color. Assegura't que siguin les formes o les lletres les que distingeixin els estats, no només el to.
• Menys distracció. Evita els favicons intermitents o animats, que poden ser un problema per a usuaris sensibles al moviment.

Llista de verificació d'UX del favicon

Llista de proves

No et refiïs de la previsualització gran de la teva eina de disseny. Prova la icona real en condicions reals:

1. Diversos navegadors. Comprova Chrome, Firefox, Safari i Edge, ja que cadascun tria icones i mides de manera lleugerament diferent.
2. Mode clar i fosc. Canvia el tema del sistema operatiu i del navegador i mira la barra de pestanyes cada vegada.
3. Pantalles retina i estàndard. Comprova en un monitor 1x i en una pantalla 2x o 3x, i fes zoom al navegador.
4. Barra de marcadors. Afegeix la pàgina als marcadors i mira si la icona continua sent llegible al costat d'altres llocs.
5. Moltes pestanyes. Obre 20 pestanyes i mira si pots trobar la teva d'una ullada.
6. Previsualització a la SERP de Google. Comprova un resultat de cerca al mòbil un cop la icona s'hagi tornat a rastrejar. Recorda que pot trigar a actualitzar-se.
7. Pantalla d'inici. Afegeix el lloc a les pantalles d'inici d'iOS i Android i confirma que la icona no queda retallada, no té cantonades negres i no és massa petita dins de la seva màscara.
8. Comprovació tècnica. Passa el teu domini pel verificador de favicons de MakeFav per confirmar que els fitxers existeixen, retornen l'estat 200, tenen les mides correctes i estan ben declarats al teu HTML.

Un flux de treball pràctic

1. Parteix del teu logosímbol i simplifica'l fins a una sola forma o lletra.
2. Crea un llenç quadrat amb un fons sòlid o amb forma que funcioni en tots dos temes.
3. Exporta les mides de 32x32 i 16x16 i refina la versió petita a mà a l'editor de píxels.
4. Genera el conjunt complet (ICO, PNG, apple-touch-icon, icones del manifest) amb el generador.
5. Afegeix les etiquetes link, defineix les capçaleres de memòria cau, desplega i verifica amb el verificador.

Un favicon és un dels recursos més petits del teu lloc i un dels que més es veuen. Unes poques decisions acurades sobre contrast, senzillesa i coherència fan que funcioni a totes les pestanyes, temes i dispositius.

Preguntes freqüents

Quina mida ha de tenir un favicon?

Dissenya per a 16x16 i 32x32 per a les pestanyes del navegador (el navegador fa servir 32x32 en pantalles d'alta densitat), proporciona un apple-touch-icon de 180x180 per a iOS, i PNG de 192x192 i 512x512 per a Android i PWA. Per als resultats de cerca de Google, fes servir una icona quadrada amb una mida múltiple de 48 píxels, com 48x48 o 96x96. Una font SVG s'escala a totes aquestes mides.

He de fer servir el meu logotip complet com a favicon?

Normalment no. Els logotips complets amb logotip tipogràfic són massa detallats i massa amples per a una icona quadrada de 16x16. Fes servir el logosímbol o un monograma d'una o dues lletres, i simplifica'l perquè continuï sent reconeixible quan és minúscul.

Com faig que un favicon funcioni en mode fosc?

L'enfocament més segur és donar a la icona la seva pròpia forma de fons sòlida o un contorn contrastat, perquè no depengui del color de la pestanya. Alternativament, fes servir un favicon SVG amb una media query prefers-color-scheme per canviar els colors, i mantén alternatives en PNG o ICO per als navegadors que no admeten icones SVG. Prova sempre en els temes clar i fosc.

Per què no apareix el meu favicon nou?

Els navegadors guarden els favicons a la memòria cau durant molt de temps, i Google en desa una còpia pròpia, que actualitza segons el seu propi calendari, sovint trigant dies o setmanes. Fes una actualització forçada de la pàgina, esborra la memòria cau del navegador, fes servir un nom de fitxer versionat nou i assegura't que les etiquetes link i un /favicon.ico a l'arrel apuntin al fitxer correcte. Pots verificar la configuració amb el verificador de MakeFav.

És bona idea mostrar insígnies de notificació en un favicon?

Sí, si es fan servir amb moderació. Un petit punt o un recompte d'un o dos dígits ajuda els usuaris a adonar-se que alguna cosa requereix una acció, però l'animació constant o els números grans perjudiquen la llegibilitat i l'atenció. Reflecteix sempre l'estat al títol de la pàgina, restaura la icona per defecte quan l'element estigui atès i no et refiïs només del color.