Cómo crear un favicon
Un favicon moderno va mucho más allá de una imagen de 16×16. Aquí tienes el proceso completo para una configuración que se ve nítida en cada navegador, sistema operativo y dispositivo.
¿Qué es un favicon?
Un favicon es el pequeño icono que el navegador muestra en la pestaña, la barra de marcadores y el historial. En móviles es el icono de la pantalla de inicio. En Windows es el icono de acceso directo.
Los sitios modernos sirven múltiples resoluciones y formatos para que cada superficie obtenga una representación nítida.
Prepara tu imagen de origen
Empieza con una imagen cuadrada de al menos 512×512 — idealmente un SVG con viewBox cuadrado. Cualquier cosa más pequeña se verá borrosa al reducir.
Evita líneas finas y texto pequeño. Desaparecen a 16×16.
Genera un .ico multiresolución
Empaqueta 16, 32, 48, 64, 128 y 256 dentro de un único favicon.ico. Los navegadores eligen el tamaño adecuado de forma automática.
Nuestro generador de favicons lo hace del lado del cliente en menos de un segundo.
Añade las etiquetas HTML
Coloca favicon.ico en la raíz de tu sitio. Luego añade el SVG, apple-touch-icon y los iconos del manifest en <head> para una configuración completa.
Verifica en cada navegador
Haz una recarga forzada (Ctrl+F5) en Chrome, Safari, Firefox y Edge. Comprueba la barra de marcadores, la pestaña y una instalación en pantalla de inicio.