Generador de favicons
Una imagen de entrada y un conjunto completo de favicons, con vista previa real de 16 px antes de confirmar
Suelta tu logotipo aquí
o haz clic para elegir un archivo: PNG, JPG o WebP. Funciona mejor una imagen cuadrada de 512 px o más.
No se sube nada. Cada archivo se dibuja y codifica en tu navegador.
Antes de empezar con Generador de favicons
Genera un conjunto de favicons de varios tamaños, un icono de pantalla de inicio de Apple, iconos de Android y fragmentos HTML listos para copiar a partir de una imagen en el navegador.
Ideal para
- Crear los archivos habituales de favicon e iconos móviles para un sitio web
- Comprobar la legibilidad de un logotipo al tamaño real de 16 px del navegador
- Copiar fragmentos listos de encabezado y manifiesto a un sitio
Lo que debes saber antes de empezar
- El generador parte de un original ráster y no rediseña un logotipo
- Las marcas muy detalladas pueden no ser legibles a 16 px
- Los navegadores pueden mantener en caché un favicon modificado después del despliegue
Continúa el flujo de trabajo
Cómo utilizarlo
1. Carga tu marca
Suelta un PNG, JPG o WebP: una imagen cuadrada de al menos 512 px da los mejores resultados, porque 512 es el archivo más grande producido y no se inventa nada al ampliar. Una imagen no cuadrada recibe un marco de recorte cuadrado que puedes desplazar por su lado largo, o puedes cambiar a Ajustar y añadir bandas. En ningún caso se estira. El panel indica las dimensiones y si tiene transparencia, y avisa cuando el original está por debajo de 512 px, porque entonces el archivo de 512 px se amplía y pierde nitidez. Ajustar es la opción sincera cuando no se puede cortar nada, pero ten en cuenta su coste: un logotipo ancho se convierte en una marca pequeña con franjas vacías arriba y abajo, mucho espacio desperdiciado en una pestaña de 16 px.
2. Comprueba la vista previa a tamaño real
Los tres cuadrados se dibujan a 16, 32 y 180 píxeles reales sobre fondos claros y oscuros; la pestaña simulada coloca la versión de 16 px junto al título. Es el paso que muchos generadores omiten y el que te salva: si a 16 px es una mancha, exportar no lo arregla; simplifica la marca. Los controles de tamaño y radio actualizan esas mismas vistas para revisar relleno y redondeo antes de descargar.
Dos detalles del panel importan. El contorno discontinuo marca los límites reales: sin él, un icono con bandas o reducido parecería simplemente menor porque el vacío toma el fondo. Las muestras clara y oscura revelan la transparencia restante y halos claros u oscuros incorporados. La pestaña simulada es interfaz CSS alrededor del mismo lienzo de 16 px, no un navegador real; sirve porque 16 px aislados parecen mayores que junto a un título.
3. Elige un conjunto y descarga
Elige el conjunto mínimo o el heredado, pulsa Generar y descarga los archivos individualmente o el ZIP. Copia el fragmento de encabezado y el manifiesto desde el panel inferior: ambos enumeran exactamente los archivos generados, nada más. El bloque de manifiesto es un objeto JSON completo que puedes guardar directamente en site.webmanifest; sigue necesitando un theme_color y un background_color, que puedes elegir tú. Introduce el nombre de la aplicación y aparecerá como apple-mobile-web-app-title en el encabezado y como name en el manifiesto. Vacío, no se genera ninguna de las dos líneas y iOS usa el título de página, normalmente lo adecuado.
¿Qué tamaños necesitas realmente?
| Tamaño | Archivo | Se usa para |
|---|---|---|
| 16 × 16 | favicon.ico | La pestaña del navegador y los marcadores en una pantalla de densidad estándar. |
| 32 × 32 | favicon.ico | La pestaña en una pantalla de alta densidad, además de barra de tareas y accesos directos de Windows. 48 se incluye por el mismo motivo. |
| 180 × 180 | apple-touch-icon.png | El icono de inicio de iOS al guardar tu sitio. Debe ser opaco. |
| 192 × 192 | android-chrome-192x192.png | Pantalla de inicio de Android y el icono pequeño del manifiesto de la aplicación web. |
| 512 × 512 | android-chrome-512x512.png | La pantalla de inicio de la aplicación instalada y el icono grande del manifiesto que requieren los avisos de instalación. |
El .ico contenedor mantiene corta esta lista: reúne varias imágenes en un archivo, así que 16, 32 y 48 viajan juntas y el navegador elige la necesaria. Por eso un solo favicon.ico en la raíz cubre todos los casos de pestañas sin etiquetas adicionales. Los PNG de 16 y 32 solo son necesarios para navegadores antiguos que ignoran ICO; para eso sirve el conjunto heredado.
Faltan a propósito dos conjuntos que quizá hayas visto en otros sitios. Mosaicos de Windows Metro — browserconfig.xml y el mstile-*.png imágenes corresponden a la pantalla de inicio de Windows 8 y sitios anclados; Edge dejó de leerlas hace años. El favicon de Touch Bar desapareció con el hardware. Generarlos añade archivos y etiquetas que nadie pide ni interpreta, justo lo que evita el conjunto mínimo.
Por qué tu logotipo puede fallar a 16 px
Un icono de 16 × 16 tiene 256 píxeles en total. Un logotipo tipográfico que se lee perfectamente en una tarjeta de visita no tiene suficiente espacio para representarse a esa escala. La reacción habitual —agrandar el texto— no ayuda, porque la limitación no es el tamaño de fuente. Es la densidad de líneas: cuántos trazos y espacios distintos le pides al renderizador que encaje en dieciséis píxeles. Cada trazo necesita al menos un píxel y el espacio de al lado también; por eso, cualquier diseño con más de unos pocos detalles por lado se convierte en una mancha gris.
Sobrevive una forma única de uno o dos colores con espacio interior: letra, no palabra; silueta, no contorno; masa, no trazo fino. Los degradados se aplanan, líneas finas desaparecen y bordes pierden detalle primero. Simplifica la marca y compara 16 px con 180 px. Si no se lee en el primero, tampoco en pestaña, y ningún ajuste de exportación lo salva.
El tamaño de imagen participa en ese equilibrio. El margen mejora una marca pegada al borde a 180 px, pero a 16 px cada porcentaje consume parte de los 256 píxeles disponibles: al 80%, el arte ocupa unos 164. Úsalo si realmente choca con el marco y revisa el cuadrado de 16 px, no solo el grande.
Preguntas
¿Se sube mi imagen a un servidor?
No. El navegador decodifica la imagen, la dibuja en lienzos y la codifica a PNG mediante Canvas. JavaScript construye el ICO con esos PNG. Este sitio es estático, sin subida ni cuenta; puedes cargarlo, desconectarte y seguir usando el generador.
¿Por qué apple-touch-icon es opaco?
iOS no respeta transparencia de iconos de inicio: mezcla alfa sobre negro. El generador rellena todo el lienzo de 180 × 180, incluidas esquinas, antes de dibujar, porque iOS aplica su máscara. Los demás respetan Fondo y conservan alfa en Transparente, admitido por pestañas y Android.
¿Qué hace el radio de esquina con el color de fondo?
El radio recorta el cuadrado y deja transparentes las esquinas; el fondo rellena dentro de la curva, no fuera. Eso conviene para pestañas o Android, que dibujan sobre su superficie. La excepción es apple-touch-icon: su fondo cubre todo antes del recorte porque iOS aplica su máscara y un icono ya redondeado dejaría huecos en las esquinas.
¿Sigo necesitando favicon-16x16.png?
Normalmente no. Todos los navegadores actuales leen las imágenes de 16 y 32 px de favicon.ico, por lo que los PNG independientes son duplicados. Solo importan para los navegadores antiguos que ignoran los archivos ICO, y eso es precisamente lo que añade el conjunto heredado. Si tienes dudas, el conjunto mínimo es la opción predeterminada más segura: menos archivos y un fragmento de código corto para el encabezado.
¿Qué hay de los favicons SVG?
Una fuente ráster no puede convertirse en un SVG auténtico. Vectorizar un PNG produce una aproximación con bordes distintos, no tu ilustración original, así que esta herramienta no finge ofrecerlo. Si quieres un favicon SVG, expórtalo desde el archivo vectorial en el que se dibujó el logotipo y añádelo junto al ICO: los navegadores compatibles usan el SVG y los demás recurren a la alternativa. Conserva el ICO en cualquier caso; la compatibilidad con SVG no es universal.
Relacionado
Para conocer el contexto completo de cada tamaño, las etiquetas de encabezado, el manifiesto y las trampas de caché que hacen que un favicon modificado parezca igual, lee la guía de tamaños de favicon — la guía completa de esta herramienta. Si el original tiene formato incorrecto o necesita aplanarse sobre fondo, el Convertidor de imágenes lo gestiona por lotes.