Generador de favicon

Cómo generar un favicon en 3 pasos

Este generador de favicon hace dos cosas que casi ninguno hace: te enseña cómo queda a 16 píxeles antes de generar nada, y te da los archivos que hoy hacen falta en lugar de un ZIP con veintidós.

1. 01
   Agrega tu logotipo

   Arrástralo al recuadro de arriba, haz clic para elegirlo o pégalo con Ctrl+V. Un SVG da el mejor resultado, porque cada tamaño se dibuja desde el vector.

2. 02
   Comprueba cómo se ve a 16 píxeles

   La vista previa te enseña el icono en una pestaña real y en una pantalla de inicio de iOS, a píxeles reales. Es el momento de decidir si el logotipo entero cabe o si conviene recortarlo.

3. 03
   Genera y pega el HTML

   Descargas un ZIP con los archivos y el README, y copias las cuatro líneas de HTML. Todo se genera en tu equipo: el logotipo no se sube a ningún sitio.

Qué archivos debe darte un generador de favicon en 2026

Tres archivos cargan con casi todo: un ICO en la raíz de tu sitio, un SVG para los navegadores modernos y un PNG de 180×180 para iOS. Agrega dos iconos de Android y un manifiesto y ya está.

Los tres que importan

favicon.ico es el suelo: lo que responde cuando no puede responder nada más. favicon.svg es lo que un navegador moderno va a usar de verdad, a cualquier tamaño y en cualquier pantalla. Y apple-touch-icon.png a 180×180 es lo que iOS pone en la pantalla de inicio, que además Android toma prestado cuando no hay manifiesto.

Este generador de favicon añade además site.webmanifest y dos PNG de 192 y 512 si te importan las pantallas de inicio de Android o quieres que el sitio se pueda instalar, y ese es el juego moderno completo. Seis archivos, donde un generador de favicon de 2015 te daba veintidós y te dejaba a ti averiguar la diferencia. El PNG de 96 píxeles del paquete es el único extra realmente opcional: Google dibuja los iconos de los resultados desde una caja de 48 píxeles y toma la versión al doble cuando la encuentra.

Los que puedes saltarte

Aquí es donde un generador de favicon se gana el sueldo o te hace perder la tarde. Todo lo que sigue lo siguen produciendo herramientas que puedes usar hoy:

• browserconfig.xml y los mosaicos de Windows. Esas imágenes mstile existían para los mosaicos anclados en la pantalla de inicio de Windows 8 y 10. Esa función desapareció. Se siguen generando porque nadie quitó el código, no porque tu sitio las necesite.
• La docena de PNG sueltos. Un generador que te entrega favicon-16.png, favicon-32.png y favicon-48.png te está dando píxeles que ya están dentro del favicon.ico. La misma imagen, una segunda copia y más líneas de HTML que mantener.

¿Sigue haciendo falta el favicon.ico?

Qué hacen de verdad los navegadores modernos

Si el HTML que te da el generador de favicon declara un favicon.svg, eso es lo que va a usar un navegador actual: escala solo, se ve nítido en cualquier pantalla y puede adaptarse al modo oscuro. En ese escenario el ICO no se toca.

Dónde se sigue pidiendo la raíz

El problema es todo lo que no lee tu HTML y por tanto ignora la mitad de lo que produjo el generador de favicon. Los rastreadores, los lectores de contenidos, las previsualizaciones de enlaces en aplicaciones de mensajería, las herramientas internas y los navegadores antiguos piden /favicon.ico directamente a la raíz del sitio y aceptan lo que encuentren. Si no hay nada, no hay icono, y nadie te avisa.

Por qué lo incluimos igualmente, como suelo

Porque cuesta unos kilobytes y elimina toda una categoría de fallos silenciosos. Este generador de favicon lo mete siempre en el paquete, con 16, 32 y 48 dentro, y deja que el SVG haga el trabajo visible.

Qué no hace este generador de favicon

Decir lo que un generador de favicon no hace ahorra más tiempo que alargar la lista de lo que sí.

• No dibuja vistas previas de plataformas. Verás cómo queda en una pestaña y en una pantalla de inicio de iOS, a píxeles reales, porque son los dos sitios donde de verdad se mira. No hay maquetas de escritorios ni de aplicaciones que nadie usa para decidir.
• No genera el icono de pestaña anclada de Safari a partir de un mapa de bits. Ese formato exige un SVG monocromo de trazo, y convertir una imagen a eso automáticamente da resultados malos. Si lo necesitas, hay que dibujarlo.
• No comprueba el favicon de un sitio ya publicado. Esto genera archivos; revisar una web en producción es otra herramienta distinta.

Instalar lo que te da el generador de favicon: cuatro líneas

Dónde van los archivos

Los archivos que te da el generador de favicon van en la raíz de tu sitio, al mismo nivel que la página principal. El favicon.ico tiene que estar ahí sí o sí, porque es la ruta que se pide sin preguntar. Después pega en el <head> las líneas que el generador te copia, que declaran el SVG, el icono de iOS y el manifiesto.

Si tu sitio está en WordPress o en Shopify y no puedes dejar archivos en la raíz, usa el ajuste propio de cada plataforma (el «icono del sitio» en WordPress, el equivalente en el editor de temas de Shopify) y súbele el PNG grande del paquete. Si además tu tema te deja tocar el <head>, pega las líneas para ganar el SVG y el icono de iOS.

Por qué el navegador lo guarda para siempre

Da igual lo bien que funcione el generador de favicon: los iconos se cachean con más insistencia que casi cualquier otro recurso, así que después de publicar hay que forzar una recarga completa. Si sigue apareciendo el anterior, abre la ruta del archivo directamente para confirmar que el nuevo está donde debe. Un icono viejo puede sobrevivir días si no lo fuerzas.

Errores de favicon que sobreviven hasta producción

Un logotipo ilegible a 16 píxeles

Es el error más común que sale de cualquier generador de favicon. Un logotipo con el nombre de la empresa al lado del símbolo se convierte en una mancha con un borrón: a 16 píxeles no hay sitio para texto. La solución casi siempre es usar solo el símbolo, y la vista previa de esta página está puesta ahí para que lo veas antes de publicar.

Un recuadro blanco sobre una pestaña oscura

Pasa cuando lo que le diste al generador de favicon era un JPG, que no puede guardar transparencia. El fondo blanco viaja con la imagen y aparece como una losa clara en un navegador en modo oscuro. Parte de un SVG o de un PNG con fondo transparente; si solo tienes el JPG, el convertidor de JPG a PNG puede quitar un fondo liso antes.

Olvidarse de la raíz

Poner los archivos del generador de favicon en una carpeta de recursos y declararlos solo en el HTML funciona para los navegadores y falla para todo lo demás. El favicon.ico tiene que estar también en la raíz.

Probarlo una sola vez, en tu propio equipo

Tu navegador ya tiene el icono en caché, así que ves lo que quieres ver, no lo que produjo el generador de favicon. Compruébalo en una ventana privada, en otro navegador y en un teléfono antes de dar por bueno el trabajo del generador de favicon.

Preguntas frecuentes

Más herramientas gratuitas de conversión

Este generador de favicon forma parte de una familia de herramientas gratuitas que funcionan dentro del navegador en pngconvert.net. ¿Solo necesitas el favicon.ico a partir de una imagen? Usa el convertidor de PNG a ICO. ¿Tu logotipo está en vectorial? El convertidor de SVG a ICO da el icono más limpio posible.