Generador de Favicon

¿Qué es un generador de favicon?

Un favicon es el pequeño icono que se muestra en las pestañas del navegador, marcadores, resultados de búsqueda y accesos directos de aplicaciones de un sitio web. Habitualmente de 16x16, 32x32 o 48x48 píxeles, los favicons ayudan a los usuarios a identificar tu sitio entre muchas pestañas abiertas. Esta herramienta genera favicons en todos los tamaños y formatos requeridos a partir de una única imagen fuente.

Los sitios web modernos necesitan varios tamaños de favicon: 16x16 y 32x32 para pestañas del navegador, 180x180 para iconos de Apple Touch, 192x192 y 512x512 para accesos directos en pantalla de inicio de Android, y a veces SVG para visualización escalable. Esta herramienta genera todos los tamaños requeridos a partir de una sola subida, además de las etiquetas link HTML necesarias.

Dónde aparecen los favicons

Los favicons aparecen en más lugares de los que la mayoría de la gente imagina. El lugar más conocido es la pestaña del navegador: cada página abierta muestra su favicon a la izquierda del título, lo que permite identificar una pestaña de un vistazo cuando tienes docenas abiertas. También aparecen en la barra de marcadores y el gestor de marcadores del navegador, en el historial de navegación y en la barra de direcciones de algunos navegadores cuando empiezas a escribir una URL.

En dispositivos móviles, cuando un visitante pulsa «Añadir a la pantalla de inicio» en Safari o Chrome, el sistema operativo usa el apple-touch-icon (180×180 en iOS) o el icono del manifiesto PWA (192×192 en Android) como acceso directo en la pantalla de inicio del dispositivo. En escritorio, las aplicaciones web progresivas instaladas a través de Chrome o Edge aparecen en la barra de tareas del sistema y en el menú Inicio de Windows usando el icono de 512×512 del manifiesto. Los motores de búsqueda, incluido Google, a veces muestran el favicon de un sitio en los resultados de búsqueda junto a la URL de la página, haciendo que un icono cuidado forme parte de la imagen de marca incluso antes de que los usuarios hagan clic.

Cómo usar esta herramienta

Sube una imagen cuadrada (idealmente al menos 512x512 píxeles). La herramienta genera todos los tamaños y formatos estándar de favicon. Previsualiza cómo se ve cada tamaño. Descarga el paquete completo, incluido el archivo ICO, las versiones PNG y las metaetiquetas HTML para pegar en la sección head de tu sitio.

Formatos de favicon explicados

Los navegadores y sistemas operativos modernos requieren varios formatos de favicon diferentes. Cada formato sirve a un contexto específico, y omitir uno significa que algunos dispositivos o navegadores recurrirán a un icono genérico en blanco.

• favicon.ico — El formato de favicon original. Un archivo ICO es un contenedor que puede incluir múltiples tamaños de imagen (normalmente 16×16, 32×32 y 48×48) en un solo archivo. Colócalo en el directorio raíz de tu sitio como /favicon.ico. Los navegadores obtienen esta ruta automáticamente, incluso sin una etiqueta <link>, garantizando la compatibilidad con navegadores antiguos y lectores de feeds.
• Favicons PNG (32×32) — Los navegadores modernos prefieren PNG. Un PNG de 32×32 es el favicon estándar de propósito general usado en pestañas del navegador en pantallas de alta densidad. Decláralo con: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
• apple-touch-icon (180×180) — Los dispositivos Apple usan esto cuando un visitante guarda tu sitio en la pantalla de inicio de iOS o iPadOS. Sin él, iOS captura una captura de pantalla de tu página en su lugar. Decláralo con: <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">. No uses fondo transparente aquí: Apple superpone el icono sobre un cuadrado blanco, lo que hace que las áreas transparentes queden mal.
• Iconos del manifiesto PWA (192×192 y 512×512) — Las aplicaciones web progresivas declaran sus iconos en un archivo de manifiesto JSON. El icono de 192×192 se usa para accesos directos en la pantalla de inicio en Android, y el de 512×512 se usa para la pantalla de presentación que aparece mientras la aplicación se carga. Referencia el manifiesto con: <link rel="manifest" href="/site.webmanifest">
• Favicon SVG — Los navegadores modernos (Chrome 80+, Firefox 41+ y Safari 16+) admiten un favicon SVG declarado con: <link rel="icon" type="image/svg+xml" href="/favicon.svg">. Los favicons SVG son independientes de la resolución y pueden incluir una consulta de medios prefers-color-scheme dentro del SVG para cambiar automáticamente entre versión clara y oscura. Coloca la etiqueta SVG antes del fallback PNG para que los navegadores capaces usen el vector, mientras que los más antiguos recurren al PNG.

Las etiquetas HTML link que necesitas

Copia estas etiquetas en el <head> de cada página de tu sitio. El orden importa ligeramente: pon el SVG primero, luego el PNG y después el ICO. Los navegadores eligen el primer formato compatible.

Tu archivo site.webmanifest debe incluir como mínimo un name, un short_name, un array de icons (con entradas de 192×192 y 512×512), theme_color, background_color y el modo de visualización configurado como standalone para PWA instalables.

Tamaños de favicon necesarios

• 16x16 — icono de pestaña del navegador (el tamaño clásico de favicon).
• 32x32 — acceso directo en barra de tareas, pestañas de navegador en alta DPI.
• 180x180 — Apple Touch Icon para pantalla de inicio de iOS.
• 192x192 y 512x512 — pantalla de inicio y splash de Android (manifest PWA).

Consejos de diseño de favicon

Los favicons deben ser reconocibles a tamaños diminutos. Usa formas en negrita, geometría simple y alto contraste. El texto rara vez funciona por debajo de 32x32. Una sola letra o un símbolo abstracto de tu marca es lo más eficaz. Prueba tu favicon a tamaño real (16x16): los detalles que se ven geniales a 512x512 se vuelven manchas invisibles a tamaño favicon. Usa fondo transparente para favicons PNG.

Usa alto contraste

Los favicons se muestran sobre el chrome del navegador, que varía del gris claro al casi negro según el tema del sistema del usuario. Un diseño que se ve nítido sobre fondo blanco puede desaparecer en una barra de pestañas oscura. Apunta a una relación de contraste de al menos 4,5:1 entre el primer plano y el fondo del icono. Un icono oscuro sobre un fondo vivo, o uno claro sobre fondo oscuro, funcionan bien.

Diseña para el reconocimiento de silueta

A 16×16 píxeles tu icono es solo 256 píxeles en total. El cerebro lee los favicons más por forma que por detalle. Una silueta distintiva —una sola letra, una marca geométrica, un símbolo reconocible— funciona mucho mejor que una ilustración detallada. Los logotipos que muestran el nombre completo de la empresa son casi ilegibles al tamaño de favicon. Aísla el elemento más reconocible de tu marca y céntraralo con un margen generoso para que no quede recortado.

Errores comunes con los favicons

• Proporcionar solo un PNG de 16×16: se ve borroso en pantallas retina y de alta densidad. Incluye siempre al menos un PNG de 32×32.
• Olvidar el apple-touch-icon: iOS usará una captura de pantalla en su lugar, resultando en una versión ilegible y diminuta de tu página completa.
• Fondo transparente en el apple-touch-icon: Apple renderiza las áreas transparentes en negro, arruinando el diseño. Usa un color de fondo sólido para el icono de 180×180.
• Usar un logotipo recargado y detallado: los detalles finos desaparecen por debajo de 64×64 píxeles. Simplifica el diseño hasta su marca esencial.
• No añadir un cache-buster tras una actualización: los navegadores almacenan en caché los favicons de forma agresiva. Añade una cadena de versión (?v=2) al href para forzar a los navegadores a descargar el nuevo archivo.

Generación en el cliente y privacidad

Este generador de favicons se ejecuta íntegramente dentro de tu navegador usando la API Canvas de HTML. El texto, los colores y los ajustes de radio de esquina que introduces nunca se envían a ningún servidor. Tu diseño permanece en tu dispositivo y descargas los archivos generados directamente en tu ordenador. Esto significa que la herramienta funciona sin conexión una vez que la página se ha cargado, y no se requiere ninguna cuenta ni registro.

Preguntas frecuentes

¿Cuál es la diferencia entre favicon.ico y favicons PNG?

El formato ICO puede contener varios tamaños en un solo archivo y es compatible con todos los navegadores, incluidos los muy antiguos. Los favicons PNG son más simples (un tamaño por archivo) y los usan los navegadores modernos. La mayoría de los sitios incluyen ambos: un archivo ICO para máxima compatibilidad y PNG/SVG para navegadores modernos. Las etiquetas link HTML indican al navegador cuál usar.

¿Por qué no aparece mi favicon?

Causas comunes: el navegador ha cacheado un favicon antiguo (prueba a borrar la caché o cargar en ventana privada), la ruta del archivo en la etiqueta link HTML es incorrecta, el formato es erróneo o el favicon no está en el directorio raíz. Los navegadores cachean los favicons de forma agresiva: puede tardar días en aparecer un favicon actualizado. Añadir una query string (favicon.ico?v=2) puede forzar una recarga.

¿Sigo necesitando un archivo favicon.ico?

Sí, por ahora. Algunos navegadores más antiguos, clientes de correo electrónico, lectores RSS y rastreadores web siguen buscando /favicon.ico en la raíz de tu dominio sin leer ninguna etiqueta HTML link. Mantener un favicon.ico de 32×32 en tu directorio raíz ocupa un espacio insignificante y cubre estos casos extremos. Los navegadores modernos preferirán las versiones SVG o PNG declaradas en tus etiquetas <link> sobre el fallback ICO.

¿Puedo usar un emoji como favicon?

Sí, con favicons SVG. Puedes declarar un SVG en línea que contenga un elemento de texto con un emoji, y los navegadores modernos lo renderizan perfectamente a cualquier resolución. El enfoque SVG también admite modo oscuro: envuelve diferentes rellenos en una consulta de medios prefers-color-scheme dentro del archivo SVG. Este generador te permite escribir cualquier emoji o carácter en el campo de texto y exportarlo como favicon SVG listo para usar.