Generador de Favicon
Genera PNG de favicon en todos los tamaños estándar y un archivo .ico multirresolución a partir de cualquier imagen, enteramente en tu navegador.
Cargando Generador de Favicon… Si no ocurre nada, activa JavaScript.
Un favicon es el pequeño icono que un navegador muestra junto al título de una página en la barra de pestañas, en la barra de marcadores y en la lista del historial. El nombre es una contracción de favorite icon (icono favorito), un término que se remonta a Internet Explorer 5 en 1999, cuando Microsoft introdujo la compatibilidad con un archivo llamado favicon.ico en la raíz del sitio. Dos décadas y media después, el humilde favicon ha crecido hasta convertirse en una pequeña familia de recursos: un clásico .ico multitamaño para los navegadores de escritorio heredados, un conjunto de PNG para los navegadores modernos, un apple-touch-icon de 180x180 para las pantallas de inicio de iOS, y PNG de 192x192 y 512x512 referenciados desde un manifiesto de aplicación web para Android y las aplicaciones web progresivas instalables.
Preguntas frecuentes
¿Se sube mi imagen a algún sitio?
¿Qué tamaños produce el generador y por qué?
¿Puede un archivo .ico contener realmente datos PNG?
¿Qué imagen de origen debería usar para el mejor favicon?
¿Cómo añado los favicons generados a mi sitio web?
¿Por qué mi favicon se ve borroso o pixelado?
¿La herramienta conserva la transparencia de la imagen?
¿Por qué mi favicon no se actualiza en el navegador?
Acerca de Generador de Favicon
Este generador toma una sola imagen de origen y produce todos esos tamaños de una vez. Dibuja tu imagen en lienzos HTML a 16, 32, 48, 180, 192 y 512 píxeles, manteniendo la relación de aspecto y centrando la ilustración dentro de cada cuadrado, y luego codifica cada uno como un PNG nítido que puedes descargar individualmente. También ensambla un archivo .ico real que agrupa las versiones de 16, 32 y 48 píxeles en un solo contenedor, para que un navegador pueda elegir la resolución que necesite. Los archivos .ico modernos pueden incrustar entradas comprimidas en PNG en lugar de mapas de bits sin procesar, y eso es exactamente lo que escribe esta herramienta, produciendo un icono más pequeño y más nítido que el antiguo formato BMP sin comprimir.
Todo ocurre localmente dentro de tu navegador usando la API Canvas y la API Blob. Tu imagen nunca se sube a un servidor, no hay ninguna cuenta que crear y no hay ninguna cola en la que esperar. Eso hace que la herramienta sea segura para logotipos inéditos, trabajo de clientes bajo acuerdo de confidencialidad y cualquier ilustración que prefieras no entregar a un servicio de terceros. Una vez cargada la página, también funciona sin conexión, y los archivos generados se producen al instante en tu propio dispositivo.
Para obtener el mejor resultado, parte de un origen cuadrado y de alta resolución, idealmente de 512x512 o mayor, con un fondo transparente o sólido y formas atrevidas y simples. El detalle fino y las líneas delgadas desaparecen a 16 píxeles, así que los favicons que se leen bien casi siempre son versiones simplificadas de un logotipo completo. Prueba las vistas previas de 16 y 32 píxeles a su tamaño real antes de publicar, porque así es como la mayoría de los usuarios verán realmente tu icono en una fila abarrotada de pestañas del navegador.
De un solo archivo oculto a todo un ecosistema de iconos
El favicon nació en marzo de 1999 con Internet Explorer 5. La implementación de Microsoft fue silenciosamente ingeniosa y un poco invasiva: el navegador solicitaba automáticamente un archivo llamado favicon.ico desde la raíz de cualquier sitio que añadieras a marcadores, sin necesidad de marcado. Los administradores web descubrieron la función al notar misteriosas solicitudes de ese nombre de archivo en los registros de su servidor. Como la solicitud ocurría solo al añadir a marcadores, una métrica extraoficial temprana de la popularidad de un sitio era contar los accesos a favicon.ico.
La especificación original ligaba los favicons al contenedor ICO de Windows, un formato heredado de Windows 3.0 que puede albergar varias imágenes de diferentes tamaños y profundidades de color dentro de un solo archivo. Durante años, esas entradas fueron mapas de bits BMP sin comprimir, lo que hacía que los iconos de alta resolución fueran sorprendentemente grandes. Windows Vista cambió eso al permitir entradas comprimidas en PNG dentro del mismo contenedor, y la web se estandarizó en favicons PNG referenciados a través de etiquetas link rel=icon, liberando a los diseñadores de las restricciones del antiguo formato y manteniendo a la vez vivo el .ico por compatibilidad con versiones anteriores.
La era móvil multiplicó los requisitos. Apple introdujo el apple-touch-icon para que una página añadida a marcadores pudiera situarse en la pantalla de inicio de iOS con el aspecto de una aplicación nativa. Android y la especificación del manifiesto de aplicación web añadieron iconos de 192 y 512 píxeles para las aplicaciones web progresivas instalables y las pantallas de bienvenida. Lo que empezó como un solo archivo oculto de 16x16 se ha convertido en un pequeño sistema de diseño por derecho propio, y generar el conjunto completo a mano en un editor de imágenes es exactamente la tarea tediosa y repetitiva que una herramienta basada en el navegador está pensada para quitarte de encima.