Favicon, Touch-Icons, descubre su importancia y aumenta tu visibilidad
Actualizado:
Contenido
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.
Microsoft recomienda los siguientes formatos para sus navegadores: 16×16, 32×32 y 48×48 y Apple un formato de 180×180.
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">Sustituya «https://domaine.com/favicon.ico» por la ruta de su archivo.
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">Asegúrese de respetar los diferentes formatos de archivo y sustituya «https://domaine.com/» por la ruta de sus archivos.
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"
}Asegúrese de sustituir «NAME» por el nombre de su sitio, para respetar los diferentes formatos de archivo, y sustituya «https://domaine.com/» por la ruta de sus archivos.
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">Para personalizar tus Touch-Icons, puedes cambiar los colores de las etiquetas «meta».
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».