¿Qué es un favicon? Guía completa
Un favicon es el pequeño icono cuadrado que un navegador muestra para tu sitio: en la pestaña, junto a un marcador, en el historial y en la pantalla de inicio de un teléfono. Es un archivo de imagen real servido desde tu dominio y referenciado desde el head de la página, normalmente en varios tamaños para que cada superficie pueda elegir el que necesita.
Dónde aparece realmente un favicon
La pestaña del navegador es la más evidente, pero es la menos exigente. Las barras de marcadores, las listas de historial, las páginas de inicio del navegador, los resultados de búsqueda, las vistas previas de enlaces en apps de chat y las pantallas de inicio de los teléfonos recurren todas a un icono, y varias de ellas quieren un archivo mucho más grande que la pestaña.
Por eso un favicon es en realidad un conjunto y no un único archivo. Un icono de pestaña de 16 píxeles y un icono de pantalla de inicio de iOS de 180 píxeles son imágenes distintas con restricciones de diseño distintas, aunque procedan de la misma marca.
La misma marca en los tamaños que importan
Preguntas frecuentes sobre favicons
¿Es obligatorio un favicon?
Ningún estándar lo exige, pero los navegadores solicitarán /favicon.ico de todas formas, y un icono ausente aparece como un marcador de posición en blanco o genérico. En un producto nuevo eso da sensación de inacabado.
¿Cuál es la diferencia entre un favicon y un icono de aplicación?
Un favicon identifica tu sitio dentro de un navegador; un icono de aplicación representa una app instalada en una pantalla de inicio o un lanzador. En la práctica proceden del mismo diseño y se distribuyen juntos, por eso los generadores exportan ambos.