Si quieres poner favicon en HTML en tu página web, tienes dos opciones: insertar el archivo de imagen di­re­c­ta­me­n­te mediante código HTML o usar so­lu­cio­nes au­to­má­ti­cas de tu CMS o un archivo manifest. La opción más re­co­me­n­da­ble es combinar una re­fe­re­n­cia HTML dentro del <head> de tu página con la in­te­gra­ción adicional a través de un manifest.json, para ga­ra­n­ti­zar la máxima co­m­pa­ti­bi­li­dad.

¿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 re­co­no­ci­mie­n­to de marca en las pestañas, también se muestra en la barra de he­rra­mie­n­tas, en los ma­r­ca­do­res, en listas de apli­ca­cio­nes e incluso en los re­su­l­ta­dos de búsqueda, ayudando a ide­n­ti­fi­car 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 in­s­ta­n­tá­neos con SEO op­ti­mi­za­do por IA
  • Dominio, SSL y buzón de correo ele­c­tró­ni­co incluidos

Cómo crear un favicon

Antes de poder insertar un favicon mediante HTML, primero debes crearlo. Es fu­n­da­me­n­tal que el icono se vea bien tanto en baja como en alta re­so­lu­ción y que se reconozca al instante como parte de tu marca. Por eso, muchos favicons siguen pri­n­ci­pios similares a los del diseño de logotipos. Para asegurar la mejor co­m­pa­ti­bi­li­dad posible, lo ideal es generar varias versiones:

Uso previsto Formato Tamaño re­co­me­n­da­do Ob­se­r­va­ción
Na­ve­ga­do­res clásicos .ico 16×16 px o 32×32 px Necesario sobre todo para na­ve­ga­do­res antiguos
Na­ve­ga­do­res modernos .png 32×32 px o 64×64 px Co­m­pa­ti­ble con tra­n­s­pa­re­n­cia 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 re­fe­re­n­ciar­lo desde HTML. Para ello, sube la imagen al di­re­c­to­rio principal de tu dominio o a una carpeta es­pe­cí­fi­ca (por ejemplo, /assets/icons/). Después, enlázala dentro del <head> de tu página para que el navegador pueda de­te­c­tar­la co­rre­c­ta­me­n­te.

<!-- 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 di­re­c­to­rio raíz de tu dominio. Este sistema solo funciona si el archivo está nombrado exac­ta­me­n­te así, re­s­pe­ta­n­do también las mi­nú­s­cu­las.

Sin embargo, este enfoque tiene dos de­s­ve­n­ta­jas: aunque la mayoría de na­ve­ga­do­res lo detectan au­to­má­ti­ca­me­n­te, no todos lo hacen, y además utilizará el mismo icono para todos los su­b­do­mi­nios de tu dominio. Por eso, la opción más segura sigue siendo la in­te­gra­ción mediante HTML, tal y como ex­pli­ca­mos en el apartado anterior.

Favicons en CMS como WordPress o TYPO3

En los sistemas de gestión de co­n­te­ni­dos modernos, el favicon suele in­te­grar­se di­re­c­ta­me­n­te 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 au­to­má­ti­ca­me­n­te los tamaños ne­ce­sa­rios y añade el código co­rre­s­po­n­die­n­te en el <head>.
  • TYPO3/Joomla/Drupal: no­r­ma­l­me­n­te se configura desde las opciones de plantilla o tema.
  • CMS headless (p. ej., Strapi, Co­n­te­n­t­ful): 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 in­se­r­tar­lo donde co­rre­s­po­n­de, por lo que solo necesitas subir los archivos de imagen adecuados.

In­te­gra­ción con manifest.json (para PWA y Android)

Una apli­ca­ción web pro­gre­si­va (PWA) es una apli­ca­ción web de­sa­rro­lla­da con te­c­no­lo­gías modernas como Ja­va­S­cri­pt, HTML5 y CSS3, diseñada para ofrecer una ex­pe­rie­n­cia similar a la de una app nativa. Ejemplos conocidos son Pinterest, Google Maps o Spotify.

Para las apli­ca­cio­nes web pro­gre­si­vas y los di­s­po­si­ti­vos Android, el en­ca­be­za­do HTML no es su­fi­cie­n­te. Es necesario añadir un archivo adicional llamado manifest.json. Este se re­fe­re­n­cia en el <head> de la página, está en formato JSON (Ja­va­S­cri­pt Object Notation) y contiene metadatos ese­n­cia­les de la apli­ca­ción: nombre, versión, iconos y otras pro­pie­da­des. Además, define aspectos im­po­r­ta­n­tes como el modo de inicio, scripts en segundo plano y permisos ne­ce­sa­rios, ayudando al navegador a presentar la apli­ca­ció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 co­rre­c­ta­me­n­te al guardar la web en la pantalla de inicio o al instalar la PWA, tanto en Android como en na­ve­ga­do­res modernos como Chrome, Edge o Firefox.

Ir al menú principal