Favicon Generator: Crear ICO y PNG

¿Qué es Favicon Generator?

Favicon Generator es una herramienta gratuita basada en el navegador que toma cualquier imagen y produce los nueve tamaños estándar de favicon requeridos por navegadores modernos, sistemas operativos y plataformas móviles. Configurar favicons para un nuevo sitio web implica generar un conjunto específico de archivos PNG con dimensiones exactas en píxeles — 16×16 para pestañas del navegador, 180×180 para iconos Apple Touch, 192×192 y 512×512 para Android Chrome — más varios tamaños intermedios. Hacerlo manualmente requiere redimensionar en un editor de imágenes nueve veces. Esta herramienta lo hace todo de un clic, muestra una vista previa etiquetada de cada tamaño y permite descargar individualmente o todos a la vez. Todo se ejecuta en su navegador usando la Canvas API — ninguna imagen sale de su dispositivo.

Funciones principales

• Generar múltiples tamaños de favicon — Produce los 9 tamaños del array FAVICON_SIZES: 16, 32, 48, 64, 96, 128, 180, 192 y 512 píxeles cuadrados. Cada uno se renderiza dibujando la imagen original en un canvas con las dimensiones objetivo.
• Crear formatos ICO, PNG y WebP — Todos los favicons generados son PNG (mediante canvas.toDataURL('image/png')). Los nombres de archivo individuales siguen estándares web: favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, etc.
• Compatibilidad con Apple Touch Icon — La salida de 180×180px se nombra apple-touch-icon.png, el nombre de archivo que busca iOS Safari cuando un usuario agrega un sitio a su pantalla de inicio.
• Compatibilidad con iconos Android Chrome — La salida de 192×192px se nombra android-chrome-192x192.png y la de 512×512px se nombra android-chrome-512x512.png, coincidiendo con los nombres especificados en un manifest.json estándar del Web App Manifest.
• Vista previa de todos los tamaños generados — Tras la generación, una cuadrícula muestra cada tamaño con una vista previa etiquetada sobre fondo de cuadrícula de transparencia, el nombre de archivo, las dimensiones exactas en píxeles y una descripción del caso de uso (ej., "Icono de pestaña del navegador", "Apple Touch Icon", "Icono del Chrome Web Store").
• Descarga individual o todo en ZIP — Cada tamaño tiene su propio botón de descarga. El botón "Descargar todo" empaqueta todos los archivos generados — 9 PNG de favicons, un favicon.ico (con tamaños 16, 32 y 48px) y un site.webmanifest — en un único archivo favicons.zip.
• Generación automática de favicon.ico — La herramienta crea un archivo contenedor ICO incrustando los PNG de 16, 32 y 48px usando la técnica PNG-en-ICO, listo para <link rel="icon" type="image/x-icon" href="/favicon.ico">.
• Generación de site.webmanifest — Un archivo Web App Manifest listo para usar que referencia los iconos Android Chrome de 192 y 512px está incluido en el archivo ZIP de descarga total.
• 100% procesamiento del lado del cliente — Las operaciones de redimensionado del canvas se ejecutan completamente en su navegador. Su imagen fuente se lee usando FileReader y nunca se transmite a ningún servidor.
• Funciona con cualquier formato de imagen — La entrada de archivos acepta image/*, y el elemento <img> decodifica el archivo. JPEG, PNG, SVG, WebP, GIF y AVIF funcionan como imágenes fuente.

Cómo usar Favicon Generator

Paso 1: Subir la imagen fuente

Haga clic en la zona de carga o arrastre su imagen sobre ella. Para mejores resultados, use una imagen cuadrada — la herramienta escala su imagen para llenar cada canvas de favicon usando ctx.drawImage(originalImage, 0, 0, size, size), lo que estira las entradas no cuadradas. Un PNG cuadrado de 512×512px o mayor con fondo transparente es la fuente ideal. Tras cargar la imagen, aparece una vista previa con las dimensiones originales (ej., 512 x 512px).

Paso 2: Generar todos los tamaños

Haga clic en "Generar Favicons". La herramienta itera a través de los 9 tamaños en secuencia: para cada tamaño, establece el canvas oculto a esa dimensión, lo limpia, dibuja su imagen escalada para llenar el canvas y almacena la URL de datos resultante. Tras completar el bucle, un toast de éxito confirma que todos los tamaños fueron generados.

Paso 3: Vista previa de los resultados

Aparece una cuadrícula mostrando los 9 favicons generados uno al lado del otro. Cada elemento muestra:

• Una imagen de vista previa renderizada sobre fondo de cuadrícula de transparencia (la imagen de vista previa está limitada a 64×64px incluso para salidas más grandes como 512×512)
• El nombre de archivo (ej., android-chrome-512x512.png)
• Las dimensiones exactas en píxeles (ej., 512x512px)
• Una descripción de dónde se usa (ej., Splash de Android Chrome)

Esto permite confirmar visualmente que el icono se ve correcto en tamaños pequeños como 16×16 antes de descargar.

Paso 4: Descarga individual o todo en ZIP

Haga clic en el botón de descarga junto a cualquier favicon individual para guardar ese archivo específico. También puede descargar el favicon.ico por separado — contiene los tamaños 16, 32 y 48px en un único contenedor ICO. Para descargar todo a la vez, haga clic en "Descargar todo" en el encabezado de la tarjeta de favicons generados. Esto crea un archivo favicons.zip con los 9 PNG, el favicon.ico y un archivo site.webmanifest.

Paso 5: Agregar los favicons a su sitio web

Coloque los archivos PNG descargados en el directorio raíz público de su proyecto. Agregue las siguientes etiquetas al <head> de su HTML:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Para soporte PWA en Android Chrome, referencie los archivos 192×192 y 512×512 en su manifest.json:

{
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Ejemplos prácticos

Configuración de un nuevo sitio web

Escenario: Está lanzando un sitio de portafolio personal construido con Next.js y necesita todos los tamaños estándar de favicon desde su SVG de logo.

Entrada: Un PNG cuadrado de 512×512px exportado de su logo (fondo transparente).

Lo que produce la herramienta: Nueve archivos PNG: desde favicon-16x16.png hasta android-chrome-512x512.png, todos nombrados y dimensionados para coincidir con lo que los navegadores y plataformas móviles esperan.

Por qué es útil: Configurar favicons manualmente requiere 9 operaciones de exportación separadas. Un clic aquí reemplaza ese paso completo.

Icono del Chrome Web Store

Escenario: Está enviando una extensión de Chrome y necesita un icono de 128×128px según las directrices de listado del Chrome Web Store.

Entrada: El arte del icono de su extensión en cualquier tamaño.

Lo que produce la herramienta: favicon-128x128.png etiquetado como "Icono del Chrome Web Store" — exactamente el archivo que requiere el Chrome Web Store.

Por qué es útil: El tamaño 128×128px es un requisito específico que muchos generadores de favicon omiten. Esta herramienta lo incluye con el nombre de archivo estándar correcto.

Configuración de PWA para una aplicación web

Escenario: Está agregando compatibilidad con Progressive Web App (PWA) a una app de React y necesita los iconos del manifest.

Entrada: Un PNG de icono de app de 512×512px.

Lo que produce la herramienta: android-chrome-192x192.png (192×192px) y android-chrome-512x512.png (512×512px) — los dos tamaños especificados en la especificación del Web App Manifest para Android Chrome.

Por qué es útil: Android Chrome requiere ambos tamaños para una correcta visualización del icono en la pantalla de inicio y la pantalla de presentación. Tenerlos ya nombrados con los nombres de archivo estándar evita errores de configuración.

Consejos y mejores prácticas

Comience con una imagen cuadrada de 512×512px o mayor. La herramienta escala su entrada a cada tamaño objetivo usando ctx.drawImage. Comenzar con una imagen cuadrada más grande significa que hay más detalle disponible a cada escala, reduciendo artefactos en tamaños pequeños como 16×16.

Use un PNG transparente como entrada para iconos con logos con forma. Si su logo tiene una forma no rectangular (círculo, escudo o contorno personalizado), proporcione un PNG con fondo transparente. Las áreas transparentes se trasladan a cada favicon, lo que se ve correcto en pestañas del navegador y en pantallas de inicio de iOS.

Revise la vista previa de 16×16 antes de descargar. La cuadrícula muestra cada tamaño a escala de visualización. La vista previa de 16×16 suele ser la más importante — si el texto de su logo es ilegible a 16px, considere una versión simplificada solo con la marca para los tamaños más pequeños.

La función "Descargar todo" crea un archivo ZIP. Todos los archivos generados — los 9 PNG de favicons, el favicon.ico y el site.webmanifest — se empaquetan en un único archivo favicons.zip. Esto evita los límites de descarga del navegador y mantiene todos los archivos organizados en un archivo.

La entrada JPEG funciona, pero las áreas transparentes se vuelven negras. Si su imagen fuente es un JPEG sin transparencia, los favicons de salida tendrán el mismo fondo. Para iconos que necesitan fondo transparente, proporcione una fuente PNG.

Verifique el comportamiento de descarga de su navegador. Algunos navegadores solicitan confirmación por cada archivo individual cuando se activa "Descargar todo". Si ve 9 solicitudes de descarga, acepte cada una. En Chrome con descarga automática habilitada, los 9 archivos van a su carpeta de descargas sin solicitudes.

Problemas comunes y solución de problemas

Toast de "Error de carga" al subir. Esto se activa desde el controlador img.onerror cuando el navegador no puede decodificar el archivo subido como imagen. Asegúrese de subir un archivo de imagen válido (JPEG, PNG, WebP, SVG, etc.). Los archivos corruptos o con extensiones incorrectas activarán este error.

Los favicons generados se ven borrosos a 16×16. La herramienta dibuja la imagen fuente completa escalada a 16×16 píxeles usando interpolación bilineal (el valor predeterminado del navegador). Si su fuente es una ilustración detallada o contiene texto, el resultado a 16×16 será borroso. Esta es una limitación fundamental de escalar arte complejo a tamaños pequeños — diseñe una marca simplificada para los objetivos de 16×16 y 32×32.

"Descargar todo" no inicia. La función Descargar todo crea un archivo ZIP usando JavaScript. Si la descarga no se activa, compruebe que las ventanas emergentes y las descargas estén permitidas para el sitio. También puede descargar archivos individuales uno a la vez usando sus respectivos botones de descarga.

Los favicons no se actualizan en el navegador después del despliegue. El caché de favicons del navegador es agresivo. Después de desplegar nuevos favicons, fuerce la recarga de la pestaña (Ctrl+Shift+R o Cmd+Shift+R en Mac) o limpie el caché del navegador. Cambiar el nombre del archivo favicon con una cadena de consulta de cache-busting (ej., href="/favicon-32x32.png?v=2") también fuerza la actualización.

La imagen de vista previa de 512×512 en la cuadrícula está limitada a 64px. La vista previa de la cuadrícula limita la visualización a Math.min(size, 64) píxeles para mantener la cuadrícula compacta. El archivo descargado es el PNG correcto de 512×512px — el tamaño de visualización pequeño es solo la vista previa.

Privacidad y seguridad

Favicon Generator se ejecuta completamente en su navegador. Su imagen fuente se carga en un objeto Image de JavaScript usando FileReader.readAsDataURL, luego se dibuja en un elemento canvas oculto. No se envían datos de imagen a ningún servidor externo. Los nueve favicons de salida se generan localmente desde canvas.toDataURL('image/png'). Esto es seguro para logos propietarios, branding no publicado y activos visuales confidenciales. La herramienta funciona completamente sin conexión una vez cargada la página.

Preguntas frecuentes

¿Es gratuito Favicon Generator?

Sí, completamente gratuito. No se requiere cuenta, no se agrega marca de agua a la salida y no hay límite en cuántas veces puede generar favicons. La Canvas API usada para el procesamiento no tiene costo del lado del servidor.

¿Funciona Favicon Generator sin conexión?

Sí. Después de cargar la página, todo el procesamiento usa la Canvas API nativa del navegador y FileReader. No se realizan llamadas de red durante la carga de imágenes, generación de favicons o descarga. Funciona sin conexión a internet.

¿Están seguros mis datos con Favicon Generator?

Sí. Su imagen se lee mediante FileReader en la memoria del navegador y se dibuja en un elemento canvas. No salen datos de imagen de su navegador. Esto es seguro para logos no publicados, activos de marca confidenciales e iconografía propietaria.

¿Qué tamaños genera la herramienta?

La herramienta genera 9 tamaños: 16×16, 32×32, 48×48, 64×64, 96×96, 128×128, 180×180, 192×192 y 512×512 píxeles. Cada uno se guarda como PNG con el nombre de archivo estándar para su caso de uso.

¿Cuáles son los nombres de archivo estándar para cada tamaño?

Los nombres de archivo siguen estándares web: favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, favicon-64x64.png, favicon-96x96.png, favicon-128x128.png, apple-touch-icon.png (180×180), android-chrome-192x192.png y android-chrome-512x512.png.

¿La herramienta genera un archivo .ico?

Sí. La herramienta genera automáticamente un archivo favicon.ico que contiene los tamaños 16, 32 y 48px incrustados como PNGs dentro de un contenedor ICO. Está listo para el despliegue con <link rel="icon" type="image/x-icon" href="/favicon.ico">. El archivo ICO puede descargarse individualmente o está incluido en el archivo ZIP de "Descargar todo".

¿Para qué se usa el tamaño 96×96?

El favicon-96x96.png de 96×96 está etiquetado como "Icono de Google TV" en el array de descripción de la herramienta. Históricamente se usó para iconos de aplicaciones de Google TV y se incluye por completitud en un paquete de favicons completo.

¿Puedo usar un SVG como imagen fuente?

Sí. La entrada de archivos acepta image/* y los navegadores modernos pueden decodificar SVG usando el elemento <img>. El SVG es rasterizado por el navegador cuando se dibuja en el canvas. La salida será un PNG rasterizado — no un favicon SVG vectorial — lo que es apropiado para la mayoría de los casos de uso.

¿Debería usar un fondo transparente en mi imagen fuente?

Sí, si su icono tiene un contorno con forma. Los fondos transparentes se trasladan a la salida PNG. Para iconos colocados en pantallas de inicio de iOS (apple-touch-icon.png), iOS agrega esquinas redondeadas automáticamente, por lo que un fondo transparente se ve correcto. Para favicons de pestañas del navegador, el fondo de la pestaña del navegador se muestra a través de las áreas transparentes.

¿Qué hace exactamente el botón "Descargar todo"?

Empaqueta todos los archivos generados en un único archivo favicons.zip: los 9 PNG de favicons, el favicon.ico (que contiene tamaños 16, 32 y 48px) y un archivo site.webmanifest. El ZIP se genera en su navegador y se descarga como un solo archivo.

Herramientas relacionadas

• Próximamente: SVG a PNG — Convierta su logo SVG a un PNG de alta resolución antes de introducirlo en Favicon Generator.
• Próximamente: Redimensionador de imágenes — Redimensione su arte fuente a un cuadrado de 512×512px antes de generar favicons para la salida más limpia.
• Próximamente: Generador de marcadores de posición — Genere imágenes de marcador de posición mientras espera que se entreguen los activos de marca finales.
• Próximamente: Convertidor de imágenes — Convierta los PNG de favicons generados a WebP u otros formatos si su despliegue los requiere.

Pruebe Favicon Generator ahora: Próximamente: Glyph Widgets Favicon Generator