Conversor de favicon
Crea a partir de una sola imagen rasterizada los archivos necesarios para añadir un favicon a una web. Elige cómo se ajusta el original al lienzo cuadrado, configura el fondo y descarga un ZIP con un ICO multirresolución, siete iconos PNG, un manifiesto de aplicación web, la configuración de mosaicos de Windows y un fragmento HTML listo para copiar en la cabecera. La conversión de la imagen y la creación del ZIP se realizan localmente en tu navegador.
Cómo convertir una imagen en un paquete de favicon
-
1
Elige una imagen rasterizada
Selecciona un PNG, JPEG o WebP que cumpla los límites mostrados de tamaño de archivo y dimensiones de imagen. No se admiten archivos SVG, GIF ni AVIF.
-
2
Elige el ajuste
Usa Cubrir para llenar el cuadrado y recortar los bordes, o Contener para conservar la imagen completa y añadir espacio alrededor.
-
3
Configura el fondo
Elige un color de fondo para los píxeles transparentes y el espacio que crea el modo Contener. Después, revisa las vistas previas generadas.
-
4
Descarga e instala
Descarga el ZIP, coloca los iconos y archivos de configuración en tu sitio y copia las etiquetas de enlace incluidas en la cabecera del documento.
Contenido del ZIP
| Elemento del paquete | Para qué sirve |
|---|---|
favicon.ico |
Un contenedor ICO con versiones de 16, 32, 48 y 256 px para navegadores y programas que solicitan la ruta tradicional del favicon |
favicon-16x16.png |
PNG compacto para pestañas del navegador y otros espacios pequeños |
favicon-32x32.png |
Icono de mayor densidad para pestañas del navegador y marcadores |
favicon-48x48.png |
Tamaño adicional para escritorio y accesos directos |
mstile-150x150.png |
PNG de 150 × 150 al que hace referencia la configuración de mosaicos de Windows |
apple-touch-icon.png |
PNG de 180 × 180 para enlaces en la pantalla de inicio de Apple |
android-chrome-192x192.png |
Icono de aplicación de 192 × 192 al que hace referencia el manifiesto web |
android-chrome-512x512.png |
Icono de aplicación de 512 × 512 al que hace referencia el manifiesto web |
site.webmanifest |
Metadatos JSON que indican a los navegadores compatibles los iconos de 192 y 512 px |
browserconfig.xml |
Configuración de mosaicos de Windows que hace referencia a los iconos generados |
favicon-head.html |
Etiquetas listas para copiar que enlazan una página con el ICO, los PNG, el icono de Apple, el manifiesto y la configuración del navegador |
Los archivos ICO y PNG están separados de forma intencionada. Los navegadores y sistemas operativos eligen los iconos de maneras distintas, por lo que un paquete completo cubre tanto la solicitud tradicional de /favicon.ico como las declaraciones explícitas de iconos modernos.
Etiquetas HTML para la cabecera
El paquete descargado incluye un fragmento con este formato:
<link rel="icon" href="/favicon.ico" sizes="any">
<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">
<meta name="msapplication-config" content="/browserconfig.xml">
Si los archivos están en un subdirectorio o en un servidor de recursos distinto, cambia las rutas antes de pegar las etiquetas en <head>. Los nombres y rutas incluidos en site.webmanifest y browserconfig.xml deben coincidir con los archivos que publiques.
Cubrir, contener y elegir el fondo
- Cubrir llena por completo cada resultado cuadrado. Si el original es ancho o alto, se recorta por igual desde los bordes opuestos, así que conviene mantener la parte importante del diseño cerca del centro.
- Contener mantiene visible todo el original. El espacio sin usar se convierte en margen del color de fondo elegido.
- Fondo puede quedarse transparente o usar un color sólido personalizado. En el modo Contener, esta opción también controla el margen alrededor de la imagen. Comprueba las vistas previas sobre fondos claros y oscuros antes de publicar.
Para conseguir iconos pequeños más nítidos, parte de una imagen cuadrada y sencilla de al menos 512 × 512 píxeles. Las letras finas, los trazos muy delgados y los detalles pequeños pueden desaparecer en la versión de 16 px, aunque el original sea grande.
Límites de entrada y colocación
Este conversor solo admite imágenes rasterizadas PNG, JPEG y WebP. Comprueba la firma del archivo y rechaza SVG, GIF, AVIF y cualquier otro formato no indicado. El original puede ocupar hasta 20 MiB, ningún lado puede superar los 8192 píxeles y la imagen no puede tener más de 24 megapíxeles en total. Los límites de dimensiones se verifican antes de decodificar la imagen completa.
Después de descargarlo, extrae el ZIP y sube los archivos generados a las rutas utilizadas por el fragmento incluido. Las rutas relativas a la raíz, como /favicon.ico, presuponen que los archivos están disponibles desde la raíz del dominio actual. Si sustituyes un favicon existente, borra la caché del sitio o de la CDN, ya que los navegadores suelen conservar los iconos durante más tiempo que otros recursos de la página.
El manifiesto incluido aporta metadatos de los iconos, pero un manifiesto y un juego de iconos no bastan para convertir un sitio en una aplicación web progresiva instalable. La instalación también depende de la página, de la seguridad del transporte y de los requisitos de cada navegador.
Preguntas frecuentes
Puedes usar PNG, JPEG o WebP. El conversor comprueba la firma del archivo en vez de confiar solo en el nombre, y rechaza SVG, GIF, AVIF y otros formatos.
Cubrir amplía la imagen hasta llenar el cuadrado y recorta la misma cantidad de los bordes cuando la proporción no es cuadrada. Contener mantiene la imagen entera y rellena el espacio restante del cuadrado con el color de fondo seleccionado.
ICO es un contenedor que puede guardar varios tamaños pequeños de icono en un único archivo de favicon tradicional. Los PNG independientes ofrecen a navegadores y plataformas recursos con tamaños definidos para pestañas, enlaces de pantalla de inicio e iconos de aplicaciones. Mantener ambos mejora la compatibilidad práctica.
No. El manifiesto describe los iconos de aplicación generados y los metadatos de visualización relacionados, pero la posibilidad de instalar el sitio depende de otros requisitos del navegador y de cómo se construye y sirve la propia web.
El fragmento incluido usa rutas relativas a la raíz, así que la opción más sencilla es colocar los archivos extraídos en la raíz del dominio. Si utilizas otra carpeta o un servidor de recursos, actualiza el fragmento y las rutas del manifiesto y de la configuración del navegador para que coincidan.
No. La imagen se procesa y el ZIP se crea en tu navegador. En el flujo de varios pasos, un borrador de IndexedDB puede guardar la imagen en este navegador durante un máximo de 30 minutos para trasladarla entre pasos. Esa transferencia local no es una subida al servidor.
Herramientas relacionadas
Comprimir GIF
Reduce el tamaño de un GIF animado en el navegador: baja dimensiones, conserva menos fotogramas y ajusta la calidad de codificación. Previsualiza el bucle antes de descargar.
WebP a PNG
Convierte imágenes WebP a PNG manteniendo la transparencia y la calidad píxel a píxel para edición, impresión y herramientas de diseño antiguas.
Vectorizador de PNG a SVG
Convierte imágenes raster PNG en rutas SVG desde el navegador. Ideal para logotipos, iconos y arte lineal. Controla el umbral, el número de colores y el suavizado.
Generador de códigos QR
Genera un código QR localmente en el navegador a partir de una URL, texto plano o una carga QR correctamente formateada, y descárgalo como PNG.
Generador de Códigos de Barras
Crea códigos de barras 1D escaneables en Código 128, Código 39, EAN-13, UPC-A, ITF-14 y Codabar. Exporta como PNG, SVG o PDF para impresión.
WebP a JPG
Convierte imágenes WebP a JPG/JPEG directamente en el navegador. Elige la calidad, aplana la transparencia sobre un color de fondo y descarga sin subir archivos.