Un favicon podría parecer solo un pequeño icono en la pestaña del navegador, pero para verse bien en cada contexto —pestaña, marcadores, pantalla de inicio de iOS, icono de una PWA instalada— hace falta todo un conjunto de archivos en distintos tamaños y formatos, no uno solo.
El apple-touch-icon: una convención de Apple, no un estándar web
iOS nunca adoptó favicon.ico para la pantalla de inicio. Apple definió su propia etiqueta, <link rel="apple-touch-icon">, que espera un PNG cuadrado de 180×180 sin transparencia: el propio sistema añade las esquinas redondeadas al colocarlo entre las demás apps.
El Web App Manifest, la puerta de entrada de las PWA
Las aplicaciones web progresivas necesitan además un archivo site.webmanifest en formato JSON con la lista de iconos, el nombre corto de la app y el color del tema. Android Chrome usa exactamente esos datos para mostrar el icono y la pantalla de carga cuando el sitio se instala como aplicación.
Una letra como logo: útil en cualquier idioma latino
Un patrón habitual para marcas sin logo propio es usar una sola letra mayúscula sobre fondo de color como favicon. Funciona bien en español porque el alfabeto latino tiene formas simples a 16 píxeles, aunque conviene evitar letras con tilde (Á, É, Ñ) en tamaños tan pequeños, donde el acento tiende a desaparecer o a verse como una mancha.
Para qué sirve esto
- Generar un conjunto completo de iconos en los tamaños necesarios a partir de una sola imagen de origen.
- Obtener el código HTML de las etiquetas <link> listo para pegar en <head>.
- Asegurarse de que el sitio se ve bien al añadirlo a la pantalla de inicio de un dispositivo móvil.