Los diseñadores y desarrolladores web a menudo agregan Favicons a los sitios web. Pero, la mayoría de ellos todavía usan un solo ícono para la pestaña del navegador.
Recientemente, el soporte de Favicon ha evolucionado con nuevos dispositivos, actualizaciones del sistema operativo y plataformas. En este artículo te explico qué es un Favicon, su uso y cómo puedes generar los favicons para todas las plataformas de diferentes maneras.
¿Qué es un favicon?
Favicon es la abreviatura de «icono favorito». Un favicon es un pequeño icono que puedes asociar a una página web para mostrarlo junto a la barra de direcciones de cualquier navegador.
Este icono representa tu marca en las pestañas de los sitios web, aplicaciones de escritorio, aplicaciones móviles u otros lugares.
¿Por qué mi web debería usar favicons?
La coherencia visual de la marca es clave para el marketing de cualquier empresa. Quieres que la gente se memorice tu marca. Los favicons son un elemento de diseño maravilloso para reforzar el reconocimiento de tu marca.
Tener un favicon en las pestañas del navegador, elevarán la experiencia del usuario. Y seguro quieres que tu favicon sea legible y tenga la mejor presentación posible ¿no?
Especificaciones de diseño del Favicon
El favicon debe ser cuadrado, y sus medidas en píxeles dependen del uso. Originalmente se hacían de 16×16 px y 32×32 px. Pero con la evolución de los monitores y dispositivos, se recomiendo utilizar un tamaño de 260×260 px para que se ajuste a todos los nuevos tamaños. Mas detalles en w3.org.
Puedes dejar el fondo transparentes para conseguir un mejor efecto. Si tu favicon es una imagen grande, los navegadores escalarán su tamaño de forma automática a la proporción adecuada.
Ten en cuenta que en algunos casos, una imagen que se ve perfectamente a 100×100px puede quedar fatal a 16×16 px.
Sé prudente, si lo que está en juego es la identidad corporativa de una empresa, deberías hacer algunas pruebas para asegurarte de un resultado impecable.
Verificar mi favicon actual
Si no estas seguro o tal vez tienes un favicon no sabes si se está mostrando adecuadamente, verifica el estado actual en: realfavicongenerator.net
Te mostrará el estado actual de tus favicon.
Cómo generar los favicon a partir de una imagen
En la misma página web realfavicongenerator.net a la derecha hay un boton que dice «Select your favicon image», le das una imagen de al menos 260 x 260 pixeles y te muestra unas opciones para personalizar el aspecto del favicon.
Te mostrará cómo un previsualización de cómo se verá tu imagen en varios dispositivos, navegadores y plataformas. Utiliza esta página para modificar el diseño en determinadas situaciones.
Al final en el último recuadro asegúrate de seleccionar «I will place favicon files (favicon.ico, apple-touch-icon.png, etc.) at the root of my web site.«.
Haga clic en el botón «Generate your Favicons and HTML code» en la parte inferior de la página.
Finalmente, descargue tu paquete de Favicons, copia el código html y pégalo en el header de tu web, para eso existen varios plugins, puedes también editar tu archivo header.php en la carpeta de tu plantilla o utilizar un code snippet para introducir meta etiquetas en el Header.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff">
Con esto debería ser suficiente, pero en algunos caso puede que nuestra web sea popular entre los usuarios de Apple y empecemos a registrar unos errores 404 de Apple-touch-icon en caso revisa el la guia para genera los íconos táctiles de Apple.
Si lo tuyo es la simplicidad…
Entiendo que tal vez la explicación anterior puede verse muy pro, pero si solo quieres hacer un icono para la pestaña y ya, acá tienes otras alternativas.
GenFavIcon es una web que tiene más de 10 años facilitando la creación de iconos para la pestaña de favoritos de nuestras páginas web.
Ese icono que aparece en la pestaña de tu página web y puedes ponerle lo que quieras, pero debido a la inmensa cantidad de dispositivos puede que necesitemos hacerlos de tamaños mas grandes.
La herramienta te permite elegir el tamaño, en caso de que te falte alguno.
Una vez que has creado el favicon.ico, súbelo al directorio raíz de tu página web e inserta el siguiente código en la cabecera de tu página html:
<link rel="shortcut icon" href="/favicon.ico" />
