El favicon es el pequeño icono que aparece asociado a una página web al lado del nombre en la barra de navegación, pestañas o en los marcadores o páginas favoritas.
Como es de suponer, es de gran importancia en nuestra presencia digital ya que tendremos oportunidad de usar nuestro logo o imagen de marca y conseguir que nuestros clientes y seguidores lo asocien a nosotros.
Debido al reducido tamaño del favicon, en ocasiones tendremos que adaptar nuestro logo para que se vea correctamente. Si nuestro logo habitual se compone por ejemplo de palabras, estas no serán legibles al reducir el tamaño. En estos casos, la mayoría de marcas lo que hacen es coger una parte representativa del mismo o utilizar iniciales.
Índice de contenidos del artículo
Existen páginas web en las que podemos redimensionar cualquier imagen al tamaño del Favicon. Yo recomiendo utilizar un programa de edición de imágenes, ya que el proceso es muy sencillo y así nos aseguramos de que obtenemos lo que deseamos, ya que dependiendo de la opción que escojamos para instalarlo, necesitaremos la imagen resultante de un tamaño u otro.
Gimp es un potente editor de imágenes libre, gratuito y presente en las plataformas más habituales, como Windows, Unix y Mac.
Presionamos el botón redimensionar (1), presionar botón de la cadena (2), de forma que quede cerrada. Esto es para que la redimensión se realice de forma proporcional en el alto y ancho y así no desfigurar el logo. Arrastramos en cuadrado de una esquina (3), de forma que quede en el interior de nuestro lienzo. Presionar botón Escala (4).
Nota: en las últimas versiones de Gimp no podemos guardar como jpg o png, en su lugar debemos utilizar la opción ‘Exportar’ del menú ‘Archivo’.
Podemos agregarlo mediante código HTML en el apartado <head> de nuestra página, mediante la etiqueta <link>, que es la misma que se utiliza para cualquier enlace, salvo que en el campo rel pondremos “icon” y en type tendremos que especificar el formato de la imagen (jpeg, png…).
<link rel=”icon” href=”favicon.ico” type=”image/jpeg” />
Tamaño del favicon
El tamaño mínimo a utilizar para el favicon era de 16×16 píxeles, aunque con la gran variedad de tamaños de pantalla que hay ahora y los distintos usos que hacen de él los dispositivos es preferible trabajar con múltiplos más elevados de esa cifra, por ejemplo 512x512px.
Este plugin que menciono está ya obsoleto porque los temas suelen permitir su inclusión e incluso el propio panel de administración permite ya agregar lo que WordPress llama icono del sitio. Lo podemos encontrar en Apariencia –> personalizar –> Identidad del sitio –> Icono del sitio.
Allí se indica que como mínimo el tamaño del favicon debe ser de 512x512px para asegurar que se visualice correctamente en todos los dispositivos.
____________________
Si utilizamos un gestor de contenidos como WordPress, podemos hacerlo mediante un plugin sin necesidad de introducir código. También, actualmente la mayoría de temas de WordPress tienen en su configuración un apartado "Identidad del sitio" para agregar el favicon.
Ahora que han salido los nuevos temas Full Site Editing y aún no he visto la funcionalidad para gregar el favicon, podemos volver a recurrir a los plugins.
Suelen trabajar con medidas a partir de 512x512px. Los pasos a seguir son los siguientes:
En el caso de Joomla podemos simplemente dejar nuestro archivo favicon.ico en la carpeta de la plantilla
/joomla/templates/<nombre plantilla activa>
Puede que no se encuentre en esta carpeta. Si no es así normalmente es porque en esa plantilla lo podemos configurar desde el panel de administración de la misma.
Recuerda que con Gimp puedes exportar el favicon como archivo .ico
Más info en la ayuda de Joomla
[...] El favicon es el pequeño icono que aparece asociado a una página web al lado del nombre en la barra de navegación, pestañas o en los marcadores o páginas favoritas. Como es de suponer, es de gran i... [...]