Favicon, Touch-Icons, descubre su importancia y aumenta tu visibilidad

Favicon, Touch-Icons, découvrez leur importance et augmentez votre visibilité.

Al facilitar la navegación de los usuarios, el Favicon y los iconos táctiles se han convertido en componentes indispensables de las interfaces web.

Favicon vs Touch-Icons

El Favicon es un icono que aparece en la barra de direcciones, marcadores y pestañas de un navegador web. El icono generalmente toma el logotipo del sitio para aparecer en miniatura. Al facilitar la identificación del sitio por parte del usuario, el Favicon es un elemento esencial de la identidad visual.

Los iconos táctiles son los que se muestran en los dispositivos móviles. Originalmente diseñados para Apple (los iconos táctiles de Apple se muestran en Safari móvil), ahora funcionan en Android.

Integración de un Favicon

El Favicon debe ser cuadrado y tener un tamaño mínimo de 180×180 píxeles.

Una vez creado el archivo, debes subirlo a la raíz de tu cuenta FTP asociada a tu dominio. Ahora inserte la etiqueta de abajo entre las etiquetas «head» de su código HTML (header.php o index.html).

<link rel="shortcut icon" type="image/x-icon" href="https://domaine.com/favicon.ico">

Integración de los iconos táctiles

Los iconos táctiles son variaciones de su Favicon en diferentes formatos. Una vez creada la declinación, debe subirla a la raíz de su cuenta FTP asociada a su dominio. Ahora inserte las etiquetas siguientes entre las etiquetas «head» de su código HTML (header.php o index.html).

<!-- Favicon / Touch-Icons -->
<link rel="apple-touch-icon" sizes="57x57" href="https://domaine.com/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://domaine.com/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://domaine.com/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://domaine.com/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://domaine.com/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://domaine.com/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://domaine.com/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://domaine.com/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://domaine.com/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="https://domaine.com/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://domaine.com/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://domaine.com/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://domaine.com/favicon-16x16.png">

Para mostrar los iconos táctiles debe crear un archivo «manifest.json» y subirlo a la raíz de su cuenta FTP asociada a su dominio:

{
    "name": "NAME",
    "short_name": "NAME",
    "icons": [
        {
            "src": "https://domaine.com/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "https://domaine.com/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

Una vez creados estos archivos y subidos a la raíz de su cuenta FTP asociada a su dominio, puede insertar las siguientes etiquetas después de las etiquetas en el «head» de su código HTML (header.php o index.html).

<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="https://domaine.com/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

Utilice un generador para crear su Favicon y Touch-Icons

Para simplificar la creación e integración de su Favicon y Touch-Icons, puede utilizar el realfavicongenerator.net o su plugin equivalente para el Favicon de WordPress CMS por RealFaviconGenerator.

Añade tu Touch-Icon

Para integrar el icono de acceso rápido en su sitio web en los dispositivos móviles, vaya a la página de inicio de su sitio web abriendo Safari. Haz clic en el botón de compartir, en la parte inferior de la pantalla, y selecciona «Añadir a la pantalla de inicio».