# Poner un favicon en HTML 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 `` 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](https://www.ionos.es/digitalguide/paginas-web/diseno-web/que-es-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. ## 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](https://www.ionos.es/digitalguide/paginas-web/diseno-web/el-diseno-de-un-logo-consejos-y-programas-para-lograrlo/). 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 `` de tu página para que el navegador pueda detectarla correctamente. ```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](https://www.ionos.es/digitalguide/hosting/blogs/anadir-un-favicon-a-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 ``. - **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)](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/progressive-web-apps-pros-y-contras/) 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 `` 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. ```html ``` Ejemplo de contenido del manifest.json: ```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" } ``` 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. This is a markdown version of: [https://www.ionos.es/digitalguide/paginas-web/diseno-web/favicon-en-html/](https://www.ionos.es/digitalguide/paginas-web/diseno-web/favicon-en-html/) for AI/LLM consumption.