Diseño

Generador de Favicon

Sube una imagen PNG, JPG, SVG o WebP y genera favicons en todos los tamaños estándar (16×16 a 512×512). Todo el procesamiento es local; tu imagen nunca se envía al servidor.

[[ labels.upload_title ]]

[[ labels.upload_hint ]]

[[ labels.upload_formats ]]

[[ labels.drop_active ]]
preview
[[ imageFile?.name ]]

[[ labels.result_title ]]

[[ g.def.size ]]×[[ g.def.size ]]
[[ sizeLabel(g.def) ]]
[[ g.def.filename ]]

[[ labels.html_title ]]

[[ labels.html_desc ]]

[[ htmlSnippet ]]

Consejos

  • La imagen que subes nunca se envía a ningún servidor. Todo el procesamiento ocurre en tu navegador.
  • Imagen recomendada: Usa un PNG cuadrado (mínimo 512×512 px) para obtener un escalado nítido en todos los tamaños. La transparencia (canal alfa) es totalmente compatible.
  • Los favicons SVG pueden usarse directamente como <link rel="icon" type="image/svg+xml"> en algunos navegadores modernos. Sin embargo, iOS Safari requiere un Apple Touch Icon en formato PNG.
  • Si estás desarrollando una PWA (Progressive Web App), registra los iconos PNG de 192×192 y 512×512 en tu manifest.json.

Preguntas frecuentes

Esta herramienta genera archivos en formato PNG. Todos los navegadores modernos (Chrome, Firefox, Edge, Safari) admiten favicons PNG, por lo que el formato ICO no es necesario en la práctica. Solo se requiere ICO si necesitas compatibilidad con IE11 o versiones anteriores, algo muy poco frecuente hoy en día.

Como mínimo, recomendamos proporcionar 32×32 (pestaña del navegador) y 180×180 (Apple Touch Icon / pantalla de inicio de iOS). Si estás construyendo una PWA, también necesitas 192×192 y 512×512.

La versión actual escala la imagen para ajustarla a un lienzo cuadrado manteniendo la proporción de aspecto. Si tu imagen contiene un logotipo o texto, te recomendamos recortarla en forma cuadrada antes de subirla para obtener el mejor resultado.

A propósito — La historia del favicon — Una pequeña revolución de 16px

En 1999, Internet Explorer 5 fue el primer navegador en mostrar pequeños iconos junto a los favoritos. Esto introdujo la convención de colocar un archivo llamado favicon.ico en la raíz del sitio. La palabra "favicon" es una contracción de "favorite icon".

El formato ICO fue tomado prestado de los archivos de iconos de Windows y podía contener múltiples tamaños (16×16, 32×32, 48×48) en un solo archivo. Hoy en día, PNG y SVG son alternativas viables. Los favicons SVG (image/svg+xml) destacan por ser independientes de la resolución y compatibles con el modo oscuro. La etiqueta <link rel="icon"> se estandarizó formalmente a mediados de los años 2000, pero colocar favicon.ico en la raíz persiste como convención de compatibilidad.

Cuando Apple presentó el iPhone en 2007, introdujo su propia especificación de Apple Touch Icon (apple-touch-icon.png): el icono que se muestra cuando un usuario añade un atajo a su pantalla de inicio de iOS. Originalmente era de 57×57 px, pero creció hasta el estándar actual de 180×180 px con la proliferación de las pantallas Retina. El auge de las PWA añadió 192×192 y 512×512 a la ecuación, haciendo que la gestión de favicons sea cada vez más compleja.

Más herramientas en esta categoría