Els favicons
Història i evolució
Els favicons van néixer el 1999 amb Internet Explorer 5, que va introduir el suport per a fitxers ICO de 16×16 píxels associats als marcadors. Inicialment eren una característica propietària de Microsoft, però aviat el W3C va estandarditzar l'etiqueta <link rel="icon"> i la resta de navegadors van adoptar el format.
Amb l'arribada dels dispositius mòbils i les pantalles d'alta densitat, les necessitats van créixer: Apple va introduir l'Apple Touch Icon (2007) per a iOS, Android va requerir icones de 192×192 px, i els navegadors d'escriptori van demanar versions de 32×32 i 48×48 px.
El 2015, el format manifest.json va estandarditzar la gestió d'icones per a aplicacions web progressives (PWA). Avui un favicon modern és un conjunt d'icones en múltiples mides i formats, des de 16×16 px per a pestanyes fins a 512×512 px per a PWA.
Bones pràctiques
Per implementar favicons correctament cal tenir en compte els estàndards actuals i les particularitats de cada plataforma:
Genera múltiples mides. Prepara almenys: 16×16 i 32×32 px per a navegadors d'escriptori, 180×180 px per a Apple Touch Icon, 192×192 i 512×512 px per a Android i PWA.
Dissenya per a dimensions reduïdes. A 16×16 px, els detalls fins desapareixen. Simplifica el disseny: usa formes icòniques clares, colors contrastats i evita text petit.
Implementa correctament les etiquetes HTML. Col·loca favicon.ico a l'arrel del domini i declara les altres versions amb etiquetes <link> al <head>.
Versiona els fitxers en actualitzar. Els navegadors fan memòria cau dels favicons de forma agressiva. Afegeix un paràmetre de versió (ex: favicon.ico?v=2) per forçar la recàrrega.
Casos d'ús
Els favicons tenen un paper pràctic immediat en la gestió de múltiples pestanyes. Quan un usuari té desenes de pestanyes obertes, reconeix visualment cada servei gràcies a la seva icona. Webs de productivitat com Gmail, Notion o Figma cuiden molt el seu favicon perquè saben que els seus usuaris treballen amb moltes pestanyes simultànies.
En entorns de desenvolupament professional, és habitual usar favicons diferenciats per entorn (producció, staging, local), sovint amb colors o icones lleugerament distints, per evitar confusions costoses. Per a botigues en línia i llocs institucionals, un favicon coherent amb la identitat visual corporativa reforça la confiança dels visitants.
Curiositats
- El primer favicon documentat va ser l'estrella de 5 puntes de MSN el 1999, quan Internet Explorer 5 va introduir el suport per a icones als marcadors.
- Twitter canvia el seu favicon dinàmicament per mostrar el nombre de notificacions pendents, una tècnica popularitzada a principis dels anys 2010.
- El format ICO pot contenir múltiples resolucions en un sol fitxer. La majoria d'eines generen automàticament variants de 16, 32 i 48 píxels dins d'un únic favicon.ico.
- Els favicons SVG, escalables vectorialment, estan suportats pels navegadors moderns des del 2020 i permeten adaptar-se al mode fosc del sistema operatiu.