Generador de favicon

Crea todos los iconos que necesita una web a partir de una imagen o de un par de letras: favicon.ico, tamaños PNG, el Apple touch icon y los iconos de Android, con el HTML listo para pegar.

Tus archivos no salen de tu dispositivo. Todo funciona en tu navegador.

Cómo funciona

  1. Elige el origenUna imagen o un logo SVG, o de una a tres letras.
  2. Ajusta el aspectoColor de fondo, forma y margen; revisa la vista previa de la pestaña.
  3. Descarga el paqueteDescomprímelo en la raíz de tu web y pega el código HTML en el head.

Todo lo que pide un navegador

Los navegadores, los móviles y los buscadores buscan archivos de icono distintos: favicon.ico para navegadores antiguos y Windows, PNG pequeños para las pestañas, un Apple touch icon de 180 píxeles para la pantalla de inicio del iPhone e iconos de 192 y 512 píxeles para Android y las apps web instaladas. El generador dibuja cada tamaño por separado, así la versión de 16 píxeles se ve nítida en lugar de ser una reducción borrosa de la grande.

El icono de Apple lleva un fondo sólido porque iOS rellena la transparencia con negro. El paquete incluye también site.webmanifest y un archivo de texto con las líneas HTML.

Los buenos favicons son sencillos

A 16 píxeles los detalles desaparecen. Usa un símbolo marcado o una o dos letras con mucho contraste y poco margen, y revisa tanto la vista previa de la pestaña clara como la de la oscura.

Preguntas frecuentes

¿Dónde pongo los archivos?

En la carpeta raíz de tu web, junto a index.html, y luego pega el código HTML en la sección head.

¿Puedo usar un logo SVG?

Sí. Los archivos SVG se dibujan nítidos en todos los tamaños.

¿Se suben mis archivos?

No. Todo se crea en tu navegador.