Artículo
Crear un favicon desde un PNG
Un favicon es un pequeño gráfico que los navegadores muestran en pestañas, marcadores y listas de historial. Hacerlo correctamente implica más que redimensionar un logotipo: el formato .ico empaqueta múltiples resoluciones en un solo archivo, los navegadores modernos prefieren PNG, los dispositivos móviles tienen su propio apple-touch-icon, y los manifiestos de aplicaciones web necesitan su propio conjunto de iconos. Este artículo cubre cada pieza y explica cómo producir el conjunto completo desde un único PNG de origen.
Qué es un favicon y dónde lo usan los navegadores
La palabra favicon es una contracción de "favorite icon" (icono favorito). Los navegadores lo mostraron por primera vez en la barra de direcciones en Internet Explorer 5 (1999), luego lo adoptaron para los marcadores. Hoy aparece en las pestañas del navegador, la barra de marcadores, el historial de navegación, la página de nueva pestaña en algunos navegadores y las barras de tareas del sistema operativo cuando un sitio está anclado. En móvil, si un usuario añade un sitio a su pantalla de inicio, el dispositivo usa una imagen relacionada pero distinta llamada apple-touch-icon en lugar del favicon estándar. Los motores de búsqueda a veces muestran favicons junto a los resultados en su interfaz. El gráfico es pequeño por diseño, lo que lo hace eficaz para la identificación visual rápida pero también exigente de producir bien: a 16x16 píxeles, un logotipo detallado se convierte en una mancha indistinta. El propio archivo de favicon ha pasado por varios formatos a lo largo de las décadas, con .ico como el más ampliamente compatible y PNG como el predeterminado moderno para la mayoría de los navegadores.
El contenedor .ico: múltiples resoluciones en un solo archivo
El formato .ico es un contenedor, no una sola imagen. Un único archivo .ico puede contener múltiples imágenes de mapa de bits a diferentes resoluciones, cada una almacenada como una entrada separada en un índice al inicio del archivo. Los tres tamaños más comunes son 16x16, 32x32 y 48x48 píxeles. Cuando Windows muestra un favicon en el Explorador o en la barra de tareas, elige la entrada que mejor se adapta al contexto de visualización. Las versiones antiguas de Windows necesitaban una entrada de 48x48 para las ranuras de barra de tareas de alta densidad. Los navegadores solicitan el favicon a 16x16 para las pestañas, pero pueden usar una entrada más grande si se detecta una pantalla de mayor densidad. Empaquetar los tres tamaños en un solo archivo .ico significa que una única solicitud HTTP cubre todos los casos de uso. Distribuirlos como PNG separados también es válido, pero requiere etiquetas de enlace adicionales y añade solicitudes HTTP. Las imágenes internas dentro de un archivo .ico son datos BMP o PNG estándar, por lo que el contenedor añade solo una pequeña sobrecarga de encabezado por entrada.
Diseñar para tamaños pequeños: simplifica el símbolo
A 16x16 píxeles tienes 256 píxeles en total. Un logotipo típico con texto o detalles finos se vuelve ilegible a ese tamaño. El enfoque estándar es crear un símbolo simplificado: una sola letra, una forma abstracta o un icono que represente la marca sin depender del detalle. Algunos problemas específicos a anticipar: los trazos finos desaparecen por completo en tamaños pequeños, especialmente en pantallas no retina. Las parejas de letras y los detalles de espacio negativo se fusionan en ruido gris. Los degradados se vuelven casi invisibles. El alto contraste entre el símbolo y su fondo es el factor más importante en la legibilidad. Una forma sólida sobre un fondo liso casi siempre se lee mejor que una ilustración detallada a 16x16. Los tamaños 32x32 y 48x48 son más permisivos y pueden admitir algo más de detalle, pero la versión de 16x16 debe tratarse como la restricción vinculante. Si el símbolo todavía no se lee a 16x16, el diseño necesita una mayor simplificación.
El conjunto moderno: .ico, iconos PNG, apple-touch-icon, manifiesto y etiquetas de enlace HTML
Una configuración completa de favicon para un sitio público actualmente necesita cinco cosas. Primero, un favicon.ico en la raíz del sitio (los navegadores solicitan /favicon.ico directamente sin una etiqueta de enlace como alternativa). Segundo, un PNG de 32x32 para navegadores de escritorio modernos, declarado con una etiqueta de enlace: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. Tercero, un PNG de 16x16 para el tamaño de la pestaña: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. Cuarto, un apple-touch-icon de 180x180 píxeles para marcadores de pantalla de inicio de iOS: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. Quinto, un manifiesto de aplicación web (site.webmanifest) con un PNG de 192x192 y uno de 512x512 para Android y aplicaciones web progresivas. La transparencia es compatible con PNG y con las entradas codificadas en PNG dentro de .ico, aunque el apple-touch-icon debería tener un fondo opaco porque iOS ignora el canal alfa y rellena las áreas transparentes con negro.
Hacerlo localmente: favicon-generator mantiene tu imagen en tu dispositivo
El favicon-generator de este sitio toma un PNG y produce el conjunto completo: un favicon.ico de resolución múltiple empaquetado con entradas de 16x16, 32x32 y 48x48, los tamaños PNG individuales para uso directo con etiquetas de enlace, y el apple-touch-icon de 180x180. Todo esto ocurre en tu navegador usando la API Canvas y un codificador .ico de JavaScript. Tu imagen de origen nunca se sube a ningún lugar; permanece en tu dispositivo. Esto importa cuando el archivo de origen es el logotipo de una empresa o cualquier recurso que no debería salir de tu máquina antes de que controles a dónde va. Cada archivo generado se ofrece como su propia descarga, con los nombres de archivo convencionales. Los copias a la raíz de tu sitio y añades las etiquetas de enlace correspondientes al encabezado HTML. Si tu logotipo de origen tiene detalles finos que no sobreviven al renderizado de 16x16, puedes recortarlo o simplificarlo antes de soltarlo en el generador, o proporcionar una imagen de origen diferente preparada específicamente para el favicon.
Herramientas en este artículo
- Generador de faviconsGenera PNGs de favicon de 16/32/48/180/192/512 px a partir de cualquier imagen. Sin subida.
- Redimensionar imágenesRedimensiona y convierte tus imágenes (JPEG, PNG, WebP) sin subirlas.
- Comprimir imágenesReduce el tamaño de las imágenes sin subirlas. Control de calidad o tamaño objetivo en KB. Compatible con lotes.
Preguntas frecuentes
¿Sigo necesitando un favicon.ico si declaro etiquetas de enlace PNG?
Sí, por dos razones. Primero, los navegadores que no leen tu HTML (rastreadores web, lectores RSS, algunos navegadores móviles antiguos) buscan /favicon.ico directamente en la raíz del dominio. Si ese archivo no está, generan una solicitud 404 en cada carga de página, lo que añade ruido a tus registros del servidor y un pequeño viaje de ida y vuelta innecesario. Segundo, las versiones antiguas de Internet Explorer solo reconocen el formato .ico e ignoran las etiquetas de enlace PNG. Proporcionar ambos cubre todos los casos.
¿Puedo usar un SVG como favicon?
Chrome y Firefox admiten favicons SVG mediante `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. Safari no admite favicons SVG. Dado que los favicons SVG son independientes de la resolución, se ven nítidos en cualquier densidad de pantalla, incluidas las pantallas retina, sin necesitar múltiples variantes de tamaño. La recomendación práctica es declarar la etiqueta de enlace SVG para los navegadores que la admiten e incluir igualmente el .ico alternativo para cobertura completa. Los favicons SVG también pueden incluir una consulta de medios `prefers-color-scheme` para cambiar automáticamente entre una versión clara y una oscura.
¿Desde qué imagen debo partir para obtener el mejor resultado?
Un PNG cuadrado de 512x512 o más con fondo transparente ofrece la mayor flexibilidad. Empezar grande y reducir el tamaño preserva más detalle que empezar desde una imagen pequeña. Si tu logotipo principal incluye texto, considera preparar una versión simplificada separada que muestre solo el icono o símbolo, ya que el texto no será legible a 16x16 independientemente de la resolución de origen. El alto contraste entre el símbolo y su fondo es el predictor más fiable de si los tamaños pequeños se verán con claridad.