Convertidor Online de Imagen a Favicon - Todos los Tamaños y Formatos

Convierte cualquier imagen en un paquete completo de favicon e iconos con 31 archivos optimizados para navegadores, iOS, Android y Windows. Generador de favicon online gratuito con vista previa en vivo.

Subir Imagen

Arrastra y suelta tu imagen aquí

Haz clic para subir

Formatos compatibles: PNG, JPG, BMP, GIF, WebP

Tamaño máximo de archivo: 10MB

Vista Previa

16×16

32×32

48×48

Vista previa de pestaña del navegador

Your Website Title×

Exportar

El paquete incluye:

Favicon

ICO + PNG 16×16, 32×32

Apple

PNG 57, 60, 72, 76, 114, 120, 144, 152, 180

Android

PNG 36, 48, 72, 96, 144, 192, 256, 384, 512

MS Tiles

PNG 70, 144, 150, 310×310, 310×150

Config

JSON, XML, TXT

Total de archivos

31 archivos

Procesamiento 100% del lado del cliente. Tus imágenes nunca salen de tu navegador.

Cómo Convertir Tu Imagen a Favicon con Nuestro Generador Online

Sube tu imagen (PNG, JPG, BMP, GIF o WebP hasta 10MB) a nuestro convertidor de favicon online arrastrándola al área de carga o haciendo clic para explorar tus archivos
Ajusta la escala (50-200%), rotación (0-360°) y radio de borde (0-50%) usando los controles deslizantes. Observa cómo los cambios de tu favicon e icono aparecen al instante en la vista previa en vivo
Añade relleno (0-50px) y elige un color de fondo desde el selector de color. Usa relleno transparente si tu imagen ya tiene fondo
Previsualiza cómo se ve tu favicon e icono en 16×16, 32×32 y 48×48 píxeles. La pestaña de tu navegador se actualiza en tiempo real mientras haces cambios. Haz clic en Descargar para obtener los 31 archivos de favicon en un paquete ZIP

Qué Puedes Hacer con Este Generador de Favicon Online

Este convertidor online de imagen a favicon te da control completo sobre cómo tu imagen se convierte en favicon e icono. Esto es lo que hace diferente a nuestro generador de favicon:

Carga de Imagen

•Múltiples Formatos: PNG, JPG, BMP, GIF, WebP—todos hasta 10MB. PNG funciona mejor si tu logo tiene transparencia
•Arrastrar y Soltar: Arrastra tu archivo directamente o haz clic para explorar. Sin complicaciones
•Archivos Grandes Bienvenidos: Hasta 10MB. Sube imágenes de alta resolución para mejores resultados

Edición de Imagen

•Escala (50-200%): Acerca o aleja tu imagen. 100% la ajusta al lienzo. Por debajo de 100% añade espacio alrededor. Por encima de 100% hace zoom y recorta los bordes
•Rotación (0-360°): Gira tu imagen a cualquier ángulo. Usa los botones de 90° para rotaciones rápidas o arrastra el control deslizante para ajustes precisos
•Radio de Borde (0-50%): Esquinas cuadradas (0%), redondeadas (20-30%) o círculo perfecto (50%). Tres preajustes para cambios rápidos

Configuración de Relleno

•Tamaño de Relleno (0-50px): Añade espacio alrededor de tu imagen. Útil para logos que necesitan espacio para respirar
•Color de Relleno: Elige entre 100 colores preestablecidos, usa el selector de color personalizado o selecciona transparente. El color de relleno aparece alrededor de tu imagen
•Colores Rápidos: Blanco, negro, gris y colores comunes de marca a un clic de distancia

Vista Previa y Exportación

•Vista Previa en Vivo en 3 Tamaños: Ve exactamente cómo se verá tu favicon en 16×16, 32×32 y 48×48 píxeles. Si los detalles son difíciles de ver en 16×16, simplifica tu diseño
•La Pestaña del Navegador se Actualiza en Tiempo Real: Observa cómo tu pestaña del navegador cambia mientras ajustas los controles deslizantes. Sin necesidad de descargar y probar—lo ves al instante
•31 Archivos en Un Clic: Descarga un paquete ZIP con todos los tamaños para iOS (10 archivos), Android (9 archivos), Windows (5 archivos), navegadores (3 archivos) y archivos de configuración (4 archivos)

Instalando Tu Paquete de Favicon

Has descargado un archivo ZIP con 31 archivos. Aquí te explicamos cómo añadirlos a tu sitio web:

1. Extrae el archivo ZIP

Descomprime favicon-package.zip en una carpeta de tu computadora. Verás 27 archivos PNG, 1 archivo ICO y 4 archivos de texto/configuración (site.webmanifest, browserconfig.xml, html-code.txt, README.txt).

2. Copia el código HTML

Abre html-code.txt y copia todo el código. Pégalo en la sección head de tu HTML, justo antes de la etiqueta de cierre. Esto indica a los navegadores dónde encontrar cada tamaño de favicon.

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">
<link rel="manifest" href="/site.webmanifest">

3. Sube los archivos a tu sitio web

Next.js / React (CRA) / Vue: Next.js/React/Vue: Coloca todos los archivos en la carpeta public/ en la raíz de tu proyecto
WordPress: WordPress: Sube a través de la Biblioteca de Medios o usa FTP para colocar los archivos en el directorio raíz de tu tema
HTML: HTML estático: Sube los 31 archivos al directorio raíz de tu sitio web (la misma carpeta que index.html)

4. Prueba tu favicon

Visita tu sitio web en una nueva ventana de incógnito/privada. Deberías ver tu favicon en la pestaña del navegador. Si no aparece, borra la caché de tu navegador (Ctrl+Shift+Delete) e inténtalo de nuevo. Consulta nuestra guía de solución de problemas para más ayuda.

Preguntas Comunes Sobre Conversión de Imágenes

¿Qué formatos de imagen puedo subir?: PNG, JPG, BMP, GIF y WebP—todos hasta 10MB. PNG funciona mejor si tu logo tiene transparencia. JPG está bien para fotos pero no soporta fondos transparentes. GIF y WebP también funcionan, aunque PNG es la opción más confiable.
Mi favicon no aparece. ¿Qué está mal?: Los navegadores almacenan los favicons en caché de forma agresiva. Aquí te explicamos cómo solucionarlo:
Abre tu sitio en una ventana de incógnito/privada (Ctrl+Shift+N o Cmd+Shift+N)
Borra completamente la caché de tu navegador (Ctrl+Shift+Delete o Cmd+Shift+Delete)
Asegúrate de que el código HTML esté en la sección head, no en body
Verifica que todos los archivos estén subidos al directorio correcto (generalmente la carpeta raíz)
¿Necesito tanto archivos ICO como PNG?: Sí, para mejor compatibilidad. El archivo ICO (favicon.ico) funciona en navegadores antiguos como Internet Explorer 11. Los archivos PNG funcionan en todos los navegadores modernos y soportan mejor la transparencia. Sube ambos—todos están incluidos en el ZIP.
¿Por qué 31 archivos? Parece mucho.: Cada dispositivo necesita un tamaño diferente. Aquí está el desglose:
Navegadores: 3 archivos (favicon.ico, favicon-16x16.png, favicon-32x32.png)
Dispositivos iOS: 10 archivos de 57×57 a 180×180 para diferentes modelos de iPhone y iPad
Dispositivos Android: 9 archivos de 36×36 a 512×512 para varias densidades de pantalla
Mosaicos de Windows: 5 archivos de 70×70 a 310×310 para el menú Inicio
Archivos de configuración: 4 archivos (site.webmanifest, browserconfig.xml, html-code.txt, README.txt)
¿Puedo usar un fondo transparente?: Por supuesto. Si tu imagen PNG tiene transparencia, se mantiene transparente en la salida. También puedes configurar el color de relleno como transparente. Esto funciona genial para logos que necesitan verse bien tanto en temas claros como oscuros del navegador.
¿Cuál es el mejor tamaño de imagen para empezar?: Sube al menos 512×512 píxeles para mejores resultados. Más grande es mejor—la herramienta reduce el tamaño, lo que se ve mejor que ampliar. Si tu imagen es más pequeña que 512×512, podría verse pixelada en tamaños grandes como el icono de Android de 512×512.
¿Cómo funciona el control de escala?: La escala ajusta cuánto del lienzo llena tu imagen. 100% ajusta tu imagen al lienzo. Por debajo de 100% añade espacio alrededor (útil con relleno). Por encima de 100% hace zoom, lo que recorta los bordes. Úsalo para enmarcar tu imagen perfectamente.
¿Cuál es la diferencia entre relleno y escala?: La escala cambia el tamaño de tu imagen. El relleno añade espacio de color alrededor de ella. Por ejemplo: escala al 80% con relleno blanco de 20px crea un logo centrado sobre un fondo blanco. El relleno es especialmente útil para logos que necesitan espacio para respirar.

Qué Hay en el Archivo ZIP

Tu descarga incluye 31 archivos organizados por plataforma. Aquí está lo que hace cada uno:

Favicons del Navegador (3 archivos)

favicon.ico - favicon.ico — Icono multi-tamaño para IE11 y navegadores antiguos (contiene 16×16, 32×32, 48×48 en un archivo)
favicon-16x16.png - favicon-16x16.png — Icono estándar de pestaña del navegador (16×16 píxeles)
favicon-32x32.png - favicon-32x32.png — Pestañas del navegador en pantallas Retina (32×32 píxeles)

Iconos Apple Touch (10 archivos)

apple-touch-icon-[tamaño].png — Iconos de pantalla de inicio iOS de 57×57 a 180×180. Cuando los usuarios añaden tu sitio a la pantalla de inicio de su iPhone o iPad, iOS elige el tamaño correcto. La versión de 180×180 (apple-touch-icon.png) es la principal.

Iconos Android Chrome (9 archivos)

android-chrome-[tamaño].png — Iconos de pantalla de inicio Android de 36×36 a 512×512. Diferentes dispositivos Android usan diferentes tamaños según la densidad de pantalla. Las versiones de 192×192 y 512×512 son las más importantes para dispositivos modernos.

Mosaicos de Windows (5 archivos)

mstile-[tamaño].png — Mosaicos del menú Inicio de Windows de 70×70 a 310×310. Cuando los usuarios anclan tu sitio al menú Inicio de Windows, aparecen estos mosaicos. Incluye mosaicos cuadrados (70×70, 150×150, 310×310) y un mosaico ancho (310×150).

Archivos de Configuración (4 archivos)

site.webmanifest - site.webmanifest — Manifiesto PWA que indica a Android y navegadores modernos sobre los iconos de tu app, colores y modo de visualización
browserconfig.xml - browserconfig.xml — Indica a Windows qué imágenes de mosaico usar y qué color de fondo aplicar
html-code.txt - html-code.txt — Código HTML listo para pegar en tu sección head. Copia esto en tu sitio web
README.txt - README.txt — Instrucciones de instalación y consejos para usar los archivos

Consejos para Favicons Que Se Vean Mejor

Comienza con una Imagen Grande

Sube al menos 512×512 píxeles. Más grande es mejor—reducir el tamaño se ve nítido, pero ampliar se ve borroso. Si tienes un logo vectorial, expórtalo a 1024×1024 o más grande antes de subirlo.

Mantenlo Simple y Audaz

A 16×16 píxeles, los detalles finos desaparecen. Usa alto contraste entre tu logo y el fondo. Evita líneas delgadas (desaparecen), texto pequeño (ilegible) y patrones complejos (se convierten en manchas). Piensa: una o dos formas audaces.

Añade Espacio para Respirar con Relleno

Los logos que tocan los bordes se ven apretados. Añade 10-20px de relleno (aproximadamente 10-20% del lienzo). Relleno blanco sobre un logo de color, o relleno de color sobre un logo blanco, ambos funcionan bien. Revisa la vista previa para ver qué se ve equilibrado.

Radio de Borde para un Aspecto Moderno

Un radio de borde del 20-30% da una sensación moderna y amigable. 50% hace un círculo perfecto (genial para fotos de perfil o logos redondos). iOS añade su propio redondeo a los iconos de pantalla de inicio, así que no te preocupes por igualar el estilo exacto de Apple.

PNG para Transparencia, JPG para Fotos

PNG soporta transparencia, lo cual es crucial si tu logo necesita funcionar en diferentes fondos. JPG no soporta transparencia pero funciona bien para fotos o logos con fondo sólido. Evita GIF a menos que necesites animación (que los favicons no soportan de todos modos).

Prueba en Temas Claros y Oscuros

Muchos navegadores ahora soportan modo oscuro. Si tu favicon tiene fondo blanco, podría verse mal en temas oscuros del navegador. Considera usar un fondo transparente o un fondo de color que funcione en ambos temas.

Usa la Vista Previa en Vivo

Los tres tamaños de vista previa (16×16, 32×32, 48×48) muestran exactamente cómo se verá tu favicon. Si los detalles son difíciles de ver a 16×16, simplifica tu diseño. La vista previa de la pestaña del navegador se actualiza en tiempo real—úsala para probar diferentes valores de relleno y escala.

Cuándo Usar el Convertidor de Imágenes

Tienes un Logo de Empresa

Sube tu archivo de logo (PNG, SVG exportado como PNG o JPG) para crear favicons que coincidan con tu marca. Añade relleno en el color de tu marca para un aspecto pulido. Perfecto para sitios web empresariales, apps SaaS y sitios corporativos.

Foto Personal o Avatar

Convierte una foto de perfil en un favicon para blogs personales, sitios de portafolio o perfiles sociales. Usa radio de borde del 50% para hacerlo circular. Funciona genial para marca personal.

Icono o Gráfico Personalizado

¿Ya tienes un icono diseñado en Figma, Illustrator o Photoshop? Expórtalo como PNG y conviértelo aquí. Ajusta la escala y el relleno para que encaje perfectamente en una pestaña del navegador de 16×16.

Recursos de Marca Existentes

Reutiliza imágenes de marca existentes—iconos de app, fotos de perfil de redes sociales o gráficos de marketing. El convertidor maneja el redimensionamiento y la optimización, así que no necesitas crear nuevos recursos desde cero.

Aplicación Web o Panel de Control

Dale a tu aplicación web un aspecto profesional con un favicon personalizado. Los usuarios con múltiples pestañas abiertas identificarán tu app al instante. Especialmente útil para herramientas internas, paneles de administración y productos SaaS.

Funciona en Todos los Navegadores y Dispositivos

Los favicons generados funcionan en todas partes. Aquí está lo que se soporta:

✓Chrome (todas las versiones) — Escritorio y móvil
✓Firefox (todas las versiones) — Escritorio y móvil
✓Safari (todas las versiones) — macOS e iOS
✓Edge (todas las versiones) — Windows y macOS
✓Internet Explorer 11+ — Soporte heredado vía archivo ICO
✓iOS Safari y Chrome — Los iconos de pantalla de inicio funcionan en todos los iPhone y iPad
✓Android Chrome y Firefox — Los iconos de pantalla de inicio funcionan en todos los dispositivos Android
✓Opera (todas las versiones) — Escritorio y móvil
✓Brave, Vivaldi y otros navegadores basados en Chromium — Soporte completo

Cómo Funciona (Detalles Técnicos)

• Usa la API Canvas HTML5 para procesar imágenes con alta calidad y renderizado 2x DPI para salida nítida
• Todo se ejecuta en tu navegador usando JavaScript. Tus imágenes nunca se suben a un servidor—permanecen en tu dispositivo
• La vista previa en vivo se actualiza mientras ajustas los controles deslizantes. El favicon de la pestaña del navegador cambia en tiempo real usando la API de Favicon
• Cero subidas al servidor. Cero recopilación de datos. Cero rastreo. Tus imágenes se procesan localmente y se eliminan cuando cierras la pestaña
• Genera archivos ICO (formato de icono multi-resolución para IE11+) y archivos PNG (formato moderno con soporte de transparencia)
• Crea 31 archivos: 3 para navegadores, 10 para iOS, 9 para Android, 5 para Windows, más 4 archivos de configuración (manifest, browserconfig, código HTML, README)
• Cada tamaño se renderiza y optimiza individualmente. No solo se redimensiona—se escala adecuadamente con anti-aliasing para bordes nítidos en cada tamaño
• El paquete ZIP usa la biblioteca JSZip para agrupar todos los archivos. La descarga ocurre del lado del cliente usando FileSaver.js—sin servidor involucrado

Herramientas y Guías Relacionadas

→¿Necesitas un favicon basado en texto? Prueba nuestro Generador de Favicon de Texto con más de 1000 fuentes →¿Quieres un favicon emoji? Consulta nuestra herramienta Emoji a Favicon con más de 3600 emojis →¿Creando un logo? Usa nuestro Creador de Logos para texto más largo y efectos personalizados →Aprende cómo instalar favicons en tu sitio web →Entiende los tamaños de favicon y cuáles realmente necesitas →ICO vs PNG: ¿Qué formato deberías usar?→¿El favicon no aparece? Lee nuestra guía de solución de problemas →¿Más preguntas? Consulta nuestras preguntas frecuentes completas