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. 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. 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. 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. 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