Cómo crear un favicon a partir de un logotipo (se explican todos los tamaños)

Para crear un favicon a partir de un logotipo, empieza con uno cuadrado (SVG, o un PNG de 512x512 o superior). Exporta un favicon.ico, idealmente con versiones de 16, 32 y 48px dentro, luego añade un icono Apple de 180x180 y PNGs de 192/512 para el manifiesto, y vincúlalos en tu HTML. Son cinco archivos (ICO, SVG, icono Apple y dos PNGs del manifiesto), no una docena. Así es como hacer cada uno y dónde va.

La respuesta corta: los archivos favicon que necesitas

El conjunto mínimo moderno es un ICO, un SVG, un icono de toque Apple y dos PNGs del manifiesto. Los archivos PNG separados de 16/32/48 y las imágenes de mosaico de Microsoft son innecesarios cuando tienes un ICO multitamaño.

Muchos generadores te entregan un ZIP con una docena de archivos, la mayoría de los cuales ningún navegador solicita. Un maestro de 512x512 es suficiente, así que nunca necesitas ir más grande.

Tamaños de favicon explicados: para qué sirve cada uno

favicon.ico (16, 32, 48)

ICO es un contenedor que contiene varios mapas de bits en un solo archivo. El paquete de calidad habitual es de 16, 32 y 48px; añade 256 solo si te preocupan los iconos grandes de Windows.

Sigue valiendo la pena tenerlo. Los rastreadores, lectores de feeds y bots de vista previa de enlaces suelen obtener /favicon.ico desde la raíz del sitio por defecto. Chromium se comporta de manera diferente: en una prueba de solicitudes publicada, obtuvo /favicon.ico solo cuando la página no declaraba ningún icono. Con un SVG declarado, solicitó solo el SVG, y prefirió el ICO sobre los enlaces PNG independientes.

Omite el PNG independiente de 32x32. Algunas guías lo listan, pero esa prueba mostró que no se usaba cuando estaba presente un ICO. La prueba solo cubría Chromium, por lo que el comportamiento de Firefox y Safari no está probado.

favicon.svg

Los favicons SVG funcionan en Chrome 80+, Firefox 41+ y Edge. El soporte de Safari es más reciente e irregular, y los favicons SVG no funcionan en Safari en iOS. Trata el SVG como un complemento, nunca como un reemplazo del ICO.

apple-touch-icon (180x180)

180x180 es el tamaño Retina del iPhone (60pt a 3x). Un solo archivo de 180px es suficiente: iOS lo escala para otros dispositivos, incluido el iPad.

Iconos del manifiesto (192 y 512)

Android Chrome y las aplicaciones web instaladas leen iconos desde el manifiesto de la aplicación web. El archivo de 192px es el icono de lanzamiento y el de 512px es el icono de instalación/pantalla de bienvenida.

Lo que necesita Google Search

Google lee el icono desde tu página principal. Cualquier formato de favicon válido funciona, incluyendo ICO, PNG y SVG. Debe ser cuadrado y de al menos 8x8px. Google recomienda algo mayor de 48x48, en múltiplos de 48, y obtienes un icono por nombre de host. Si el icono no es adecuado, Google cambia por uno genérico de globo terráqueo.

Prepara tu logotipo antes de exportar

Cuadrado, grande y transparente

La mejor fuente es un SVG. De lo contrario, usa un PNG cuadrado de 512x512 o superior. Solo reduce la escala: pasar de 1024px a 16px mantiene el detalle del borde, pasar de 32px a 16px no, y ampliar solo crea desenfoque.

Si tu logotipo no es cuadrado, recórtalo o añádele margen primero con las herramientas de recorte y redimensionamiento de imágenes de Tool Cloud.

Mantén el PNG transparente y en sRGB. No lo aplanes ni añadas un fondo "por si acaso".

¿Puede ser un favicon un JPG? Sí, pero PNG o SVG es más limpio. El JPG no tiene transparencia, por lo que una conversión de JPG a ICO te da un cuadrado relleno, y los artefactos de compresión aparecen en tamaños diminutos.

Simplifica para 16 píxeles

Un logotipo completo con un eslogan se convierte en masa en una pestaña del navegador. Lo que funciona:

• Una marca audaz con alto contraste
• Dos o tres colores planos
• Como máximo una o dos letras en negrita, sin logotipo tipográfico

Prueba a tamaño real. Si no puedes reconocerlo en medio segundo, simplifica más.

Consejo: usa dos imágenes para el mejor ICO

Para máxima calidad, usa arte simplificado para los tamaños 16 y 32 y arte más detallado para 48 y 256. Construye dos ICOs, luego usa el simplificado como favicon.ico y el detallado para los accesos directos de Windows. Es opcional, y un único logotipo bien simplificado es suficiente para la mayoría de sitios.

Convierte tu logotipo a ICO y el resto del paquete

Opción 1: generar un paquete de favicon

Abre el Generador de Favicons de Tool Cloud, sube tu logotipo cuadrado y descarga el ZIP de tamaños estándar de favicon. Usa los archivos que coincidan con la tabla anterior y crea cualquiera que falte (como el SVG o los PNGs de 192/512) por separado. Ignora cualquier archivo que tu HTML no vaya a referenciar.

Opción 2: convertir un logotipo a un único ICO

Si solo quieres favicon.ico, usa el Convertidor de Imagen a ICO. Sube tu logotipo y convierte, luego renombra el resultado a favicon.ico. Comprueba qué tamaños contiene el ICO; si le falta una versión de 16 o 32px, usa el generador anterior en su lugar.

Creando los PNGs de 180, 192 y 512

Redimensiona tu maestro cuadrado a 180x180, 192x192 y 512x512 y nómbralos apple-touch-icon.png, icon-192.png y icon-512.png.

Para el icono Apple, usa un fondo opaco con el logotipo centrado y con margen. iOS no respeta la transparencia y redondea las esquinas él mismo, así que no las redondees previamente. Suministra siempre tu propio fondo sólido en lugar de depender de lo que iOS rellene.

Dónde va cada archivo en tu HTML

El fragmento HTML

Sube todos los archivos a la raíz de tu sitio, luego añade esto al <head>. Los atributos sizes siguen una descripción sobre cómo Chrome elige los iconos:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#ffffff">

Algunas notas:

• Usa rel="icon". rel="shortcut icon" es heredado; "shortcut" no está registrado y es redundante.
• Los navegadores eligen por tipo, no por posición, así que el orden no es crítico. El atributo type="image/svg+xml" permite que los navegadores que no soportan SVG lo salten y usen el ICO.
• Asigna un tamaño concreto al ICO y el sizes="any" al SVG. Poner any en el ICO puede hacer que Chrome lo prefiera sobre el SVG.

El manifiesto de la aplicación web

{
  "name": "Your Site",
  "short_name": "Site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Los criterios de instalación de Chrome exigen tanto el icono de 192px como el de 512px. Evita poner "purpose": "any maskable" en un solo archivo. Para un icono maskable, crea un archivo separado con los gráficos dentro de la zona segura central (unos 409x409 del lienzo de 512).

Cómo añadir un favicon en WordPress, Squarespace, Shopify y Wix

Las plataformas renombran los menús, así que comprueba qué dice tu panel de control.

• WordPress: Apariencia, Personalizar, Identidad del sitio, Icono del sitio. Sube un PNG de 512x512.
• Squarespace: Diseño, Icono del navegador. Un PNG cuadrado de 300x300 funciona (también se acepta ICO).
• Shopify: Ajustes del tema, Favicon. Sube un PNG cuadrado de 512x512.
• Wix: Configuración, Configuración del sitio web, Favicon (esto puede requerir un plan premium).

Por qué tu favicon se ve borroso o no se actualiza

Iconos borrosos o cuadrados rellenos

El desenfoque suele venir de escalar hacia arriba un raster pequeño o de un logotipo demasiado detallado a 16px. Corrígelo con un SVG más un ICO de 32px o mayor, y nunca escales un 16x16 hacia arriba. Un cuadrado sólido detrás de tu logotipo significa que el archivo original no tenía transparencia, a menudo un JPG.

Sigue apareciendo el icono antiguo

Los navegadores almacenan en caché los favicons durante días o semanas. Prueba estos pasos en este orden:

1. Haz una actualización forzada de la página.
2. Abre /favicon.ico directamente y actualízalo allí.
3. Añade una cadena de consulta, como /favicon.ico?v=2.
4. Compruébalo en una ventana de incógnito.
5. Confirma que el archivo devuelve HTTP 200 y limpia la caché de tu CDN.

Los iconos de la pantalla de inicio de iOS se almacenan en caché por acceso directo, por lo que los accesos directos existentes no cambiarán y los usuarios deberán volver a añadir el sitio. Para un cambio de imagen corporativa, usa un nombre de archivo nuevo.

Google Search no lo muestra

Las actualizaciones tardan días o semanas, y cambiar la URL del icono puede retrasarlas. Asegúrate de que tu página de inicio haga referencia al icono con rel="icon" y de que cumpla las reglas de tamaño anteriores. No hay un límite duro documentado en KB; las normas de Google se refieren a las dimensiones.

En la práctica

Empieza desde una imagen maestra cuadrada de 512px o más y simplifícala para el tamaño de la pestaña. Sube los archivos, luego pega el fragmento HTML y el manifiesto en tu sitio, y comprueba que el enlace del manifiesto esté ahí. Finalmente, mira el resultado a 16px: si el símbolo no se ve claro, simplifícalo de nuevo.

Preguntas frecuentes

¿Sigo necesitando un favicon.ico en 2026?

Sí. Los navegadores, lectores de feeds y bots de vista previa de enlaces solicitan /favicon.ico desde la raíz del sitio independientemente de tus etiquetas HTML, por lo que es un seguro barato. Agrupa las versiones de 16, 32 y 48 píxeles en un solo archivo.

¿Puede ser un favicon un JPG?

Técnicamente sí, pero PNG o SVG ofrecen un resultado mucho más limpio. El JPG no tiene transparencia ni artefactos de compresión, y las fotografías contienen demasiados detalles para 16x16 píxeles.

¿Qué tamaño debe tener un favicon para Google Search?

Google necesita una imagen cuadrada de al menos 8x8px y recomienda algo mayor de 48x48px. SVG no está soportado allí, así que mantén un ICO o PNG declarado con rel=icon en tu página principal.

¿Necesito archivos PNG separados de 16x16, 32x32 y 48x48?

Generalmente no. Un ICO multitamaño cubre esos tamaños, y una prueba de solicitudes de Chromium encontró que los PNG independientes no se usaban cuando estaba presente un ICO. No se probaron Firefox ni Safari.

¿Por qué no se muestra mi nuevo favicon?

Los navegadores almacenan en caché los favicons agresivamente durante días o semanas. Prueba una actualización forzada, abre /favicon.ico directamente, añade una cadena de consulta ?v=2 o compruébalo en una ventana privada.