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.

favicon wikipedia youtube

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 logotipo habitual se compone por ejemplo de palabras, estas no serán legibles al reducir el tamaño para usarlo como favicon.

En estos casos, la mayoría de marcas lo que hacen es coger una parte representativa del mismo o utilizar iniciales.

favicon y logo de wikipedia

Favicon y logo de Wikipedia

favicon y logo de youtube españa

Favicon y logo de Youtube

¿Cómo hacer un favicon?

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.

Cómo redimensionar un logo para hacer un favicon con Gimp:

  1. Iniciamos Gimp y creamos una nueva imagen en el menú Archivo –> Nuevo… (Ctrl+N)
  2. En anchura y altura introducimos la medida deseada, en el ejemplo 128x128, para utilizar con WSA Favicon, como veremos más adelante.nueva imagen 128x128 gimp favicon
  3. En el apartado opciones avanzadas podemos seleccionar que el fondo de la imagen sea transparente, opción muy interesante si nuestro logo no tiene color de fondo.
  4. A continuación pegamos una imagen en la ventana principal de Gimp. En el ejemplo he copiado un Word Art hecho con Microsoft Word, eso os puede dar ideas.pegar logo en gimp
  5. Redimensionando:gimp redimensionarPresionamos 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).
  6. Con la herramienta de ‘mover’ podemos terminar de colocar el logo en el interior del lienzo. A continuación hacemos click derecho sobre la Selección flotante en la pestaña de ‘capas’ y presionamos la opción ‘Anclar a la capa’anclar a la capa Gimp
  7. Ya sólo falta guardarla. Gimp por defecto guarda en su propio formato, xcf, de modo que tendremos que ‘Guardar como…‘ y elegir la extensión deseada, jpg, png… Importante tener en cuenta que si hemos dejado el fondo transparente será necesario utilizar png para conservarlo. También podemos exportar en formato .ico, de icono, que es el formato con el que tendrás que subir el favicon en muchos gestores de contenido como Joomla.

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’.logo resultante

¿Cómo instalar el favicon?

Agregar el favicón mediante código

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…).

Ejemplo: <link rel=”icon” href=”favicon.ico” type=”image/jpeg” />

Actualización Sept 2015. Tamaño del favicon

El tamaño mínimo a utilizar para el favicon era de 16x16 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.

Agregar el favicón en WordPress

Actualización junio de 2017:

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. Los pasos a seguir son los siguientes:

  1. En el panel de control vamos a Plugins –> Añadir nuevo.
  2. en el cuadro de búsqueda introducimos Favicon.
  3. Instalamos y activamos uno de ellos. Yo utilizo WSA Favicon. Es sencillo y efectivo, ya que hace ni más ni menos que lo que se pretende, agregar el Favicon a nuestro blog.
  4. Aparecerá un nuevo elemento llamado Favicon en el menú Ajustes.Ajustes favicon
  5. Subimos nuestro favicon previamente redimensionado a 128x128 píxeles y en formato png preferiblemente. Si lo deseamos, podemos agregar otro de 114x114 para que se visualice en dispositivos Apple.
  6. Presiona el botón Guardar cambios.
Actualización Sept 2015. Tamaño del favicón

Actualmente la mayoría de temas de WordPress tienen en su configuración un apartado para agregar el favicon. Suelen trabajar con medidas a partir de 512x512px.

Agregar el favicón en Joomla

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

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies
Share This