¿Qué es un Favicon y cómo añadirlo a tu web?
El favicon es el logotipo de tu web que se posiciona junto a la url. Es decir, la pequeña imagen que caracteriza a tu sitio web oficialmente, de este modo tus espectadores, saben que están en la página correcta.
La mayoría de los navegadores modernos han sustituido el favicon de la barra de direcciones por una imagen que indica si el sitio web utiliza o no HTTPS.
Los favicons se utilizan para mejorar la experiencia del usuario y garantizar la coherencia de la marca. Al incluir un favicon en su página HTML, facilita que los usuarios reconozcan un sitio en sus pestañas, marcadores y listas de enlaces incrustados.
¿Cuales son los pasos para añadir un Favicon?
- Modifique el formato del archivo:
- Busca una imagen que quieras utilizar como Favicon, considera que esto debe identificar el nicho de tu web para mejorar tu web. Puedes utilizar sitios web que directamente te ayudan a generar la imagen.
Debe ser una imagen cuadrada de 16×16 píxeles o 32×32 píxeles. También puedes crear tu propio favicon en sitios como https://www.favicon.cc.
- Otra herramienta como Favicon Generator de la empresa te permite personalizar fuentes, colores y esquinas. También te proporciona el código HTML necesario para que tu favicon sea compatible con todos los navegadores. Se utiliza específicamente para crear logotipos basados en texto, que ofrecen un favicon limpio y claro cuando se combinan con los colores de la marca o del sitio.
- Una vez que tiene la imagen que quieres utilizar como logotipo de tu web o favicon, lo único que debes hacer es guardarlo archivo .png o .ico y seleccionarlo desde el Administrador de Archivos de su alojamiento. Asegurate de que tenga el tamaño correcto.
- Cambia el nombre de la imagen .png o .ico a favicon.
- Considera que algunos navegadores están programados para detectar los archivos de este tipo, así que dependiendo de esto, no necesitarás codificación.
En caso de que tengas que codificar:
- Debes cargar este archivo a tu carpeta La imagen debe estar alojada en el mismo servidor que tu página web.Procede a abrir el archivo HTML de tu página web y añade el código que te mencionaremos a continuación en la sección de <head> del documento. Reemplaza el código “ruta_al_favicon.ico» con la ruta exacta que lleva a tu archivo de favicon en el servidor
<link rel=»icon» href=»ruta_al_favicon.ico» type=»image/x-icon»>
Ahora debes proceder a guardar tu página y los cambios en el archivo HTML. Debes asegurarte de que al actualizar tu página el favicon se muestre junto a la url.
Por ejemplo, si utilizas un archivo .png, el código podría ser el siguiente:
<link rel=»icono» type=»imagen/png» sizes=»32×32″ href=»/favicon-32×32.png»>.
Sustituye «favicon-32×32.png» por el nombre real de tu archivo favicon. Si tienes favicons de distintos tamaños, incluye líneas de código similares para cada uno.
También puedes añadir tu favicon a través de tu proveedor de alojamiento web cPanel. Consulta sus sitios web para obtener instrucciones específicas sobre cómo añadirlo.
El favicon debería aparecer junto al título de tu sitio en la pestaña del navegador. También es una buena idea comprobar cómo se ve en diferentes navegadores y dispositivos, ya que las apariencias pueden variar.
Para asegurarte de que tu nuevo favicon tiene el aspecto esperado, borra primero la caché de tu navegador y luego carga tu sitio web
