Generador de favicon

Genera todos los tamaños de favicon que necesita un sitio —de 16 a 512 px— a partir de una imagen, con el HTML para instalarlos. En tu navegador.

Sobre esta herramienta

Un favicon es el iconito que los navegadores muestran en la pestaña, en los marcadores y en la pantalla de inicio del móvil. Ya no basta con un archivo: los navegadores quieren un icono de 32 px para la pestaña, iOS pide uno táctil de 180 px y las pantallas de inicio de Android sacan del manifiesto web las versiones de 192 y 512 px.

Sube un logotipo cuadrado y esto genera el conjunto entero de una vez, con el HTML que necesitas para referenciarlo. La reducción usa un suavizado de alta calidad, algo que se nota a 16 px, donde un logotipo detallado se convierte en un borrón: las formas simples y los trazos gruesos sobreviven; las líneas finas y el texto pequeño, no.

Cómo usarla

  1. 1

    Sube una imagen cuadrada

    Lo mejor es un PNG con transparencia. Todo lo que no sea cuadrado se recorta primero al centro.

  2. 2

    Mira las vistas previas pequeñas

    Fíjate en las versiones de 16 y 32 px. Si ahí la marca no se lee, simplifícala en lugar de publicarla así.

  3. 3

    Descarga el conjunto y pega el HTML

    Guarda cada tamaño y copia las etiquetas link en el head de tu sitio.

Preguntas frecuentes

¿Qué tamaños necesita un favicon en 2026?

Un PNG de 32 px cubre las pestañas del navegador, 180 px cubre la pantalla de inicio de iOS (apple-touch-icon) y 192 px más 512 px cubren Android a través del manifiesto web. Un icono SVG es un buen añadido porque escala a cualquier tamaño, y un favicon.ico sigue siendo un respaldo útil para navegadores antiguos.

¿Por qué mi logotipo se ve como una mancha a 16 px?

Porque 16 px son 256 píxeles en total. Cualquier cosa con trazos finos, degradados o palabras desaparece a esa escala. Los favicons que se leen bien suelen ser una sola letra o una forma contundente sobre fondo sólido.

¿Dónde van los archivos?

Ponlos en la raíz de tu sitio y referéncialos desde el head de tu HTML con etiquetas link para icon y apple-touch-icon, y añade las versiones de 192 y 512 px a tu manifiesto de aplicación web.

¿Sigo necesitando favicon.ico?

Los navegadores actuales ya no lo exigen y usan sin problema iconos PNG o SVG, pero no cuesta nada mantener uno en la raíz del sitio para clientes antiguos y para herramientas que aún lo piden por convención.

Revisado por última vez el por el equipo de Kobra IMG.

Herramientas relacionadas