Guies de favicons
Respostes clares als dubtes que apareixen quan crees un favicon: quines mides, quins formats i quin codi has d'enganxar.
Mides dels favicons: formats i usos
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è.
Llegeix la guiaConverteix un PNG a ICO gratis
El .ico continua sent el format esperat a l'arrel d'un lloc web i la majoria de conversors en línia et demanen que pugis la imatge al seu servidor. Aquí expliquem com obtenir un favicon.ico correcte amb diverses mides a partir d'un PNG, sense pujar res.
Llegeix la guiaapple-touch-icon: mida, format i codi
La icona Apple Touch proporciona expressament la imatge que es fa servir quan un visitant afegeix el teu lloc a la pantalla d'inici d'un iPhone. És independent del favicon de les pestanyes i de les icones declarades al manifest d'aplicació web.
Llegeix la guiaFavicon en mode fosc amb un SVG
Un logotip negre sobre fons transparent queda perfecte en una pestanya clara i desapareix en una de fosca. El format ICO no es pot adaptar, però el favicon SVG sí: inclou una regla CSS que canvia els colors segons el tema del navegador.
Llegeix la guiaAfegeix un favicon en HTML
Un favicon HTML fiable no depèn d'una única etiqueta màgica. Fa servir un conjunt petit de fitxers accessibles i enllaços col·locats al head. Aquest procediment cobreix les pestanyes modernes, els clients antics i les dreceres mòbils sense multiplicar les variants històriques.
Llegeix la guiaEl favicon no apareix o no s'actualitza
Quan falta un favicon, el problema no sempre és el fitxer. El navegador, una CDN, un service worker i un cercador poden conservar cadascun una versió diferent. Un diagnòstic ordenat evita canviar diverses variables alhora.
Llegeix la guiaFavicons a Next.js App Router
L'App Router pot generar elements d'icona a partir de fitxers convencionals o de l'objecte metadata. Tots dos enfocaments són vàlids, però barrejar-los sense una regla clara pot crear fàcilment declaracions en conflicte.
Llegeix la guiaGuia del favicon SVG
SVG manté les vores nítides amb qualsevol densitat de píxels i pot adaptar els colors al tema. Aquesta flexibilitat té una condició: el fitxer ha de continuar sent autònom, senzill i llegible en un espai diminut.
Llegeix la guia