Si quieres poner favicon en HTML en tu página web, tienes dos opciones: insertar el archivo de imagen directamente mediante código HTML o usar soluciones automáticas de tu CMS o un archivo manifest. La opción más recomendable es combinar una referencia HTML dentro del <head> de tu página con la integración adicional a través de un manifest.json, para garantizar la máxima compatibilidad.

¿Qué son los favicons y para qué se utilizan?

Un favicon (acrónimo de “favorite” y “icon”) es el pequeño icono que aparece, por ejemplo, en la pestaña de tu navegador. Además de aportar un mayor reconocimiento de marca en las pestañas, también se muestra en la barra de herramientas, en los marcadores, en listas de aplicaciones e incluso en los resultados de búsqueda, ayudando a identificar tu página web de un vistazo.

Crear una página web
Estás de suerte, tu página web ahora con IA
  • Creador de páginas web rápido e intuitivo
  • Imágenes y textos instantáneos con SEO optimizado por IA
  • Dominio, SSL y buzón de correo electrónico incluidos

Cómo crear un favicon

Antes de poder insertar un favicon mediante HTML, primero debes crearlo. Es fundamental que el icono se vea bien tanto en baja como en alta resolución y que se reconozca al instante como parte de tu marca. Por eso, muchos favicons siguen principios similares a los del diseño de logotipos. Para asegurar la mejor compatibilidad posible, lo ideal es generar varias versiones:

Uso previsto Formato Tamaño recomendado Observación
Navegadores clásicos .ico 16×16 px o 32×32 px Necesario sobre todo para navegadores antiguos
Navegadores modernos .png 32×32 px o 64×64 px Compatible con transparencia y calidad sin pérdida
Apple Touch Icon .png 180×180 px Se utiliza al añadir la web a la pantalla de inicio en iOS
Android Manifest Icon .png 192×192 px o 512×512 px Se integra en manifest.json, necesario para PWA y accesos directos en Android

Cómo insertar un favicon con HTML

La forma más fiable de añadir tu favicon es referenciarlo desde HTML. Para ello, sube la imagen al directorio principal de tu dominio o a una carpeta específica (por ejemplo, /assets/icons/). Después, enlázala dentro del <head> de tu página para que el navegador pueda detectarla correctamente.

<!-- Standard-Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png">
<!-- Fallback für ältere Browser -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png">
html

El tipo MIME antiguo image/vnd.icon está obsoleto. Usa en su lugar image/x-icon o image/png.

Cómo insertar un favicon sin código

Si prefieres poner un favicon sin escribir una sola línea de código, hay un método todavía más sencillo. Solo tienes que crear el icono en el formato adecuado, guardarlo con el nombre favicon.ico y colocarlo en el directorio raíz de tu dominio. Este sistema solo funciona si el archivo está nombrado exactamente así, respetando también las minúsculas.

Sin embargo, este enfoque tiene dos desventajas: aunque la mayoría de navegadores lo detectan automáticamente, no todos lo hacen, y además utilizará el mismo icono para todos los subdominios de tu dominio. Por eso, la opción más segura sigue siendo la integración mediante HTML, tal y como explicamos en el apartado anterior.

Favicons en CMS como WordPress o TYPO3

En los sistemas de gestión de contenidos modernos, el favicon suele integrarse directamente desde el backend, sin necesidad de tocar el código.

Ejemplos:

  • WordPress: puedes insertar un favicon en WordPress. Solo tienes que ir a “Diseño → Identidad del sitio → Icono del sitio” y subir tu imagen. WordPress genera automáticamente los tamaños necesarios y añade el código correspondiente en el <head>.
  • TYPO3/Joomla/Drupal: normalmente se configura desde las opciones de plantilla o tema.
  • CMS headless (p. ej., Strapi, Contentful): el favicon se añade de forma manual en la plantilla del frontend o en el archivo manifest.json.

En la mayoría de CMS, el favicon se almacena en una ubicación central y el propio sistema se encarga de insertarlo donde corresponde, por lo que solo necesitas subir los archivos de imagen adecuados.

Integración con manifest.json (para PWA y Android)

Una aplicación web progresiva (PWA) es una aplicación web desarrollada con tecnologías modernas como JavaScript, HTML5 y CSS3, diseñada para ofrecer una experiencia similar a la de una app nativa. Ejemplos conocidos son Pinterest, Google Maps o Spotify.

Para las aplicaciones web progresivas y los dispositivos Android, el encabezado HTML no es suficiente. Es necesario añadir un archivo adicional llamado manifest.json. Este se referencia en el <head> de la página, está en formato JSON (JavaScript Object Notation) y contiene metadatos esenciales de la aplicación: nombre, versión, iconos y otras propiedades. Además, define aspectos importantes como el modo de inicio, scripts en segundo plano y permisos necesarios, ayudando al navegador a presentar la aplicación como si fuera nativa.

<link rel="manifest" href="/manifest.json">
html

Ejemplo de contenido del manifest.json:

{
    "name": "My Website",
    "short_name": "Website",
    "icons": [
        {
            "src": "/assets/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/assets/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}
json

Este archivo garantiza que el icono se muestre correctamente al guardar la web en la pantalla de inicio o al instalar la PWA, tanto en Android como en navegadores modernos como Chrome, Edge o Firefox.

Ir al menú principal