Logotipo horizontal de Diego C Martín colores invertidos, blanco y naranja para findo negro

Favicon. Qué es y cómo crearlo e instalarlo

Categorías:  Autor: Diego C Martin 
favicon pequeño pero importante

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

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 WindowsUnix 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 128×128, para utilizar con WSA Favicon, como veremos más adelante.
nueva imagen 128x128 gimp favicon
  1. 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.
  2. 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
  1. Redimensionando:
gimp redimensionar

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

  1. 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
  1. 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, jpgpng… 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

Agregar el favicon en HTML 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 (jpegpng…).

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

Agregar el favicon en WordPress

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:

  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 Real Favicon Generator. Es sencillo y efectivo, ya que hace ni más ni menos que lo que se pretende, agregar el Favicon a nuestro blog.

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

¡Recibe un cupón de un 10% sólo por darte de alta!

Usaré la info para informarte de novedades y ofertas sobre mis cursos y servicios.

* Más info en el Aviso legal.

One comment on “Favicon. Qué es y cómo crearlo e instalarlo”

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Artículos de la misma categoría

crossmenu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram