Significado Favicon

Tu mejor definición de Favicon

⇨ ¿Qué es un favicon?

El favicon significa “icono favorito” se trata de un icono pequeño que normalmente tiene un tamaño de 16 x 16 o hasta 32 x 32 expresado en pixeles (px) y este es el que identifica a un sitio o página web, con ayuda de este elemento es mucho más fácil para las personas encontrar el sitio web. Generalmente, este se encuentra en la pestaña de la parte superior del navegador junto al título de la página y también la encontramos en la lista de favoritos del buscador.

⇨ Importancia de un favicon para tu página web

Un favicon es una herramienta de mucha importancia, ya que con esto puedes lograr que tu página web adquiera un aspecto mucho más profesional, que esta se destaque entre las pestañas del navegador y también ayuda a que el usuario pueda diferenciar tu marca, de esta manera es mucho más sencillo para las personas identificar y localizar la pestaña de tu sitio web, con esto puedes lograr que la experiencia del usuario en la plataforma sea mucho más placentera y por ende quieran regresar a visitar tu página web.

⇨ ¿Cómo crear un favicon?

A la hora de crearlo hay que tener en cuenta de que este se trata de la reducción del logo de tu página web, es decir que es necesario que tu plataforma maneje su marca y logo.

✮ 1. Se debe crear un nuevo documento con el tamaño que desees (generalmente es usado 16 x 16 px o 32 x 32 px), esto se puede realizar con un software de edición de imágenes.

✮ 2. Al conseguir que el documento tenga el tamaño deseado, este debe ser exportado en formato .png (aunque también puede ser jpg, gif).

✮ 3. Una vez el documento esté en formato .png debe pasarse a formato .ico por medio de la herramienta online de favicon.cc, favicon generator o genfavicon.

✮ 4. Por último, debes subir el archivo favicon.ico al sitio web

⇨ ¿Cómo subir el favicon a tu página web?

Esto lo puedes hacer por medio de un código, para esto se debe:

➤ Buscar el archivo de la página web que contenga el encabezado o header y localizar la etiqueta <head> que se encuentra en el código de tu página.

➤ Una vez localizado el código, se debe incluir el código “<link rel="icon" type="image/vnd.microsoft.icon" href="ruta/nombrearchivo.ico">” Type: se refiere al formato del favicon que se vaya a agregar Ruta: url del favicon que se añadió.

➤ Se debe editar la ruta y el campo type teniendo en cuenta el formato de la imagen que se está usando. En el caso de que se use un formato ico el campo type es “image/vnd.microsoft.icon”, para un formato jpg es “image/jpg” y para un formato gif es “image/gif”

➤ Se pueden adicionar varios tamaños, de esta manera el navegador va a escoger cual es el más conveniente y el que se logra ajustar mejor (este paso es opcional). Ejemplo: “<link rel="icon" type="image/vnd.microsoft.icon" href="ruta/icono_32.png" sizes="32x32">” Sizes: se refiere al tamaño o tamaños del favicon.