¿Qué es Generador de favicons?

Este generador de favicons crea todos los tamaños que tu sitio necesita: a partir de una imagen, de unas iniciales escritas o de un emoji. Elige una fuente y obtén archivos ICO de 16x16, 32x32 y 48x48, un SVG escalable y versiones PNG para iconos Apple Touch y pantallas de inicio de Android, listos para integrar en tu proyecto.

Empieza con una imagen, escribe de una a tres letras con su fuente y forma, o elige un emoji. La herramienta genera seis PNG (16, 32, 48, 180, 192, 512 píxeles), un SVG nítido y un ICO multirresolución con los tres tamaños pequeños que Windows todavía pide. Todo se empaqueta en un ZIP con un site.webmanifest y las etiquetas link exactas para pegar en el head. Una fuente SVG o PNG cuadrada da el escalado más limpio.

Cómo usar

1. Elige una fuente: sube una imagen cuadrada (PNG, JPG o SVG, idealmente 512x512 o más), escribe unas iniciales con fuente y forma, o elige un emoji.
2. Previsualiza los favicons generados en todos los tamanos estandar (16px, 32px, 48px, 180px, 192px, 512px).
3. Descarga el paquete completo de favicons como archivo ZIP, que incluye el archivo ICO, todos los tamanos en PNG y las etiquetas HTML link para pegar en el head de tu pagina.

Cuándo usar

• Añadir iconos de pestaña y de pantalla de inicio a una web o app nueva.
• Refrescar la identidad de marca en una web ya existente tras rediseñar el logo.
• Generar iconos PWA que cumplan la spec del manifest para Añadir a pantalla de inicio.

Resultado

Un desarrollador sube el logotipo de 1024x1024 de su startup. La herramienta genera un conjunto completo que incluye favicon.ico (16/32/48), apple-touch-icon.png (180x180) e iconos Android (192/512), ademas de las metaetiquetas HTML.

Preguntas frecuentes

¿Por qué necesito tantos tamaños distintos de favicon?

Cada plataforma pide un tamaño concreto. Las pestañas de Chrome usan 32 píxeles, los marcadores 16, las pantallas de inicio de iOS 180, las de Android 192 y las splash de PWA 512. Si entregas todos, el icono se ve nítido en cualquier sitio.

¿Subo PNG, SVG o JPG?

SVG es lo mejor porque escala sin pérdida a cualquier tamaño. Un PNG de 512×512 es la segunda mejor opción. El JPG funciona, pero la compresión con pérdida puede dejar halos en los bordes, sobre todo a 16 y 32 píxeles.

¿Qué hay dentro del archivo ICO?

ICO es un formato contenedor. El que genera esta herramienta lleva tres capas de bitmap (16, 32 y 48 píxeles) para que Windows elija la adecuada según dónde se muestre el icono: barra de tareas, lista de archivos o pestaña del navegador.

¿Dónde coloco los archivos en mi proyecto?

Descomprime el paquete en la raíz pública de tu sitio, junto a index.html. Las etiquetas link incluidas usan rutas absolutas (/favicon.ico, /apple-touch-icon.png), así que en HTML plano o en frameworks como Next.js, Astro o Vite no hace falta configurar nada más.

He cambiado el favicon pero el navegador sigue mostrando el antiguo. ¿Por qué?

Los navegadores cachean los favicons de forma muy agresiva. Recarga forzada (Ctrl+Shift+R en Windows, Cmd+Shift+R en Mac) o añade una query string a la etiqueta link, por ejemplo /favicon.ico?v=2, para forzar la descarga. La caché suele limpiarse sola en un día.

Herramientas relacionadas