Cercar «mida de favicon» encara retorna llistes de quinze fitxers heretades de 2014. A la pràctica, avui sis dimensions cobreixen les pestanyes del navegador, els resultats de cerca, iOS, Android i les PWA. Aquí tens quines són i per què.
Les mides que realment necessites
Cada fila correspon a un ús documentat del paquet proposat. La taula prioritza un conjunt petit i interoperable en lloc d'una col·lecció de variants històriques.
| Fitxer | Dimensions | Per a què serveix |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Pestanyes, marcadors, navegadors antics i rastrejadors |
| favicon.svg | vectorial, quadrat | Navegadors moderns, nítid a qualsevol mida i compatible amb el mode fosc |
| favicon-96x96.png | 96×96 | Resultats de cerca de Google al mòbil |
| apple-touch-icon.png | 180×180 | Pantalla d'inici d'iOS i iPadOS, sense transparència |
| web-app-manifest-192x192.png | 192×192 | Pantalla d'inici d'Android, declarada al manifest web |
| web-app-manifest-512x512.png | 512×512 | Pantalla de presentació de PWA, versió «maskable» |
Per què 16, 32 i 48 conviuen al mateix .ico
ICO és un format contenidor: un sol fitxer pot incloure diverses imatges i el navegador tria la que s'ajusta a la visualització. És justament el que convé, perquè la mida sol·licitada canvia segons el context.
16×16 cobreix una pestanya en una pantalla estàndard. 32×32 ofereix una variant per a pantalles d'alta densitat i altres interfícies del navegador. 48×48 completa el contenidor i també segueix la regla del múltiple de 48 que Google documenta per als favicons dels resultats de cerca.
Publicar un .ico que només contingui 16×16 és l'error més habitual: en una pantalla Retina, la icona s'amplia i es veu sempre borrosa.
180×180 per a iOS, 192 i 512 per a Android
iOS no llegeix el manifest web per obtenir la icona de la pantalla d'inici: cerca una etiqueta apple-touch-icon. N'hi ha prou amb una mida, 180×180, que cobreix tots els iPhone i iPad recents. El sistema mateix la redueix per als dispositius més antics.
Android, en canvi, fa servir el manifest web. N'hi ha prou amb dues entrades: 192×192 per a la icona de la pantalla d'inici i 512×512 per a la pantalla de presentació quan el lloc s'instal·la com a aplicació. La versió de 512 s'ha de declarar amb purpose «maskable», és a dir, dissenyada per continuar funcionant si es retalla en forma de cercle o quadrat arrodonit.
En una icona emmascarable, mantén els elements essencials dins del 80% central. Tot el que quedi a fora es pot retallar segons el fabricant del telèfon.
Amb quina imatge d'origen cal començar
El millor punt de partida és un SVG: es pot escalar sense pèrdues a totes les mides anteriors. Si no en tens, fes servir un PNG quadrat d'almenys 512×512 píxels, de manera que fins i tot la icona de presentació d'Android s'obtingui reduint la imatge i mai ampliant-la.
Un logotip horitzontal amb text no funciona a 16×16: a aquesta mida, una paraula es converteix en una taca de tres píxels. Extreu-ne el símbol o parteix d'una o dues lletres sobre un fons contrastat.
Finalment, comprova el contrast tant sobre fons clars com foscos: un logotip negre desapareix en una pestanya amb tema fosc. Precisament per això serveix la variant fosca del favicon SVG.
Les mides que ja no necessites
Els generadors antics encara produeixen fitxers per a integracions històriques, com els mosaics de Windows amb mstile-150x150.png i browserconfig.xml. Afegeix-los només si la teva matriu de compatibilitat inclou expressament aquestes interfícies.
La llarga sèrie apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 i 152x152 ve d'una època en què iOS no podia canviar la mida. Una sola imatge de 180×180 les substitueix totes.
Eliminar declaracions que no es fan servir simplifica el repositori i l'HTML. Comprova els navegadors i les plataformes als quals dones suport abans de retirar una integració existent.
Fonts primàries
Preguntes freqüents
Encara cal un favicon.ico?
Sí, però només a l'arrel del lloc web. Els navegadors moderns prefereixen l'SVG, però molts rastrejadors, agregadors i clients de correu encara demanen /favicon.ico sense llegir l'HTML. El fitxer pesa uns quants kilobytes: conserva'l.
Quina mida de favicon fa servir Google als resultats de cerca?
Google demana una icona amb un costat múltiple de 48 píxels i habitualment la representa a 48×48. Un PNG de 96×96 o un SVG ho cobreix sense problemes. La icona ha de ser rastrejable i no ha d'estar bloquejada per robots.txt.
El meu favicon pot ser rectangular?
Tècnicament sí; visualment, no convé. Tots els contextos de visualització reserven un quadrat: una imatge rectangular es deforma o es centra amb franges buides. Parteix sempre d'un quadrat i afegeix espai al voltant del símbol si cal.