¿Qué es un favicon?

Favicon o favicono, se deriva de los términos en inglés fav icon, esto es “icono favorito”, para explicarlo en forma sencilla y simple.

Eso es precisamente: un pequeño icono (16 x 16 píxeles o 32 x 32 píxeles, de forma habitual) que se utiliza en la pestaña y barra de un navegador para identificar una dirección web. Tal y como nos habremos dado cuenta en mas de una ocasión, la practica mayoría de paginas, muestran una imagen justo a la izquierda de la URL o en las pestañas que señalan los sitios abiertos. Esa imagen es el favicon.

Se emplea ─tal y como comentamos─ como una identificación tipo emblema o símbolo: personal o colectivo, privado o público. Una especie de sello que sirve como insignia diferenciadora.

Tiene la misma función que cualquier logotipo (o mini-logo en este caso) de una marca para un producto cualquiera: hacerse distinguir de entre los demás. Son muy útiles cuando un usuario tiene varias pestañas abiertas, ya que mediante el favicon puede reconocer rápidamente el sitio que quiere ver.

Es común que una persona reaccione de manera más espontánea e intensa ante una imagen más que ante un texto. “Una imagen dice más que mil palabras”, dice el viejo refrán.

Ahora supongamos que un visitante de un sitio web tiene prisa en visitarlo por primera vez, y decide agregarlo a los marcadores para volver más tarde. Supongamos también que esta persona tiempo después decide visitar el sitio web de nuevo volviendo a los marcadores. Si el favicon es reconocible, como una notable y única letra G para Google, el usuario la encontrará sin problema. Si no hay un icono de la página, el sitio puede ser eliminado de la lista de marcadores.

El favicon aparece no sólo en las páginas web, también en la lista de favoritos y en el historial. Un modelo típico por su éxito y aceptación, que sin la menor duda todo mundo asocia de inmediato, es ya la conocidísima “f” sobre un fondo azul de Facebook.

O el favicon de Wikipedia:

El favicon ayuda a personalizar una página y a captar nuevos visitantes esperando convertirlos en seguidores fieles. Incrementa la notoriedad, ayuda a un buen posicionamiento dentro de la red. Con el tiempo evoluciona su presencia y su prestigio, hasta tal punto de que llega un momento en que por sí solo propaga un mensaje, un concepto o una idea.

Se convierte en un elemento de identidad visual; hasta que logra representar un estilo, valores, espíritu y ayuda a sobresalir.

Repetimos, ayuda… pero no es el responsable de transmitir la razón de ser o la “filosofía” de una página determinada. En el mejor de los casos es una especie de síntesis sin ir más allá ni dar explicaciones. Cuanto más sencillo sea, mejor. Así es más fácil asimilarlo y recordarlo. Debe procurar ser algo así como un gancho y no pretender causar un gran impacto.

Quien lo vea no tiene por qué conocer su origen, lo que importa es que exista una relación entre el nombre de la página o sitio y la parte gráfica del favicon.

No porque sea un elemento pequeño se deben descuidar sus características. En virtud de su tamaño resulta impensable el querer diseñarlo con un texto. Una buena idea es usar la primera letra del nombre de la página, ya sea mayúscula o minúscula.

Un buen favicon rara vez pasa desapercibido, incluso para los que no son visitantes habituales de la red. Requiere imaginación y un poco de chispa para su diseño. Pero la recompensa es más que gratificante ya que servirá para ser encontrados entre tantísimas páginas relacionadas con la propia.

¿Cómo se crea un favicon?

El favicon se aloja en los archivos con formato .ico. Es aconsejable elaborar una imagen en forma de cuadro ciñéndose a las medidas ya especificadas.

Si buscamos algo bien hecho, lo óptimo es que el fondo sea transparente o con tonos suaves y sutiles, los de colorido muy espeso suelen dar problemas para captar la imagen con nitidez.

Hay dos alternativas principales: realizar la imagen en formato jpg, png o gif para después convertirla a .ico; o bien, elaborar el diseño directamente en una página generadora de favicones (que las hay).

Se puede crear mediante Photoshop o un generador automático en línea que por lo general es gratuito.

Con Photoshop

Una de las ventajas de usar Photoshop es que puede obtenerse una imagen con las dimensiones correctas con relativa facilidad.

Otra ventaja de Photoshop es que es posible concebir la imagen para un favicon partiendo desde cero, en un tiempo realmente breve.

Con unos 10-15 minutos que se le dedique no es difícil confeccionar algo original y, lo que es mejor, propio.

Se puede crear un favicon en Photoshop a partir prácticamente de cualquier imagen, no obstante, se recomienda que sea sencilla y bien definida en cuantos a letras y siluetas o representaciones.

Como hemos señalado, lo mejor es procurar evitar el incluir un texto, pero si se insiste en ello lo recomendable es algo breve.

Al seguir las pautas señaladas es más probable que el favicon destaque a simple vista. Aunque se trata de un detalle mínimo puede ser la diferencia entre pasar desapercibido y ser objeto de atención.

Todo radica en ponerle un poco de creatividad y entusiasmo al asunto.

Photoshop no permite la conversión directa de un archivo jpg, png o gif a .ico.
No hay que espantarse a la hora de querer realizar la acción “Guardar como” si uno no cuenta con el .ico entre las extensiones a seleccionar, como sí suele aparecer un JPG, un TIFF o un PNG, ya que existe la posibilidad de transformar los archivos jpg y png a .ico por medio de convertidores en línea:

Hay varios tipos de formatos incluidos jpg, png, gif, tiff y otros en este enlace:

Jinaconvert

No obstante, tenemos otras alternativas para realizar nuestro favicon.

Con un generador online

Hay herramientas o plataformas en línea que facilitan la generación de un favicon. La gran mayoría son gratuitas.

Muchas de estas herramientas se encargan de procesar la imagen que uno sube y se encargan de manera automática de generar el archivo en formato .ico, para después dejarlo disponible al usuario listo para su descarga.

Después de ello no se necesita ningún editor de archivos.

Debemos indicar, que cuanto más próxima se encuentre la imagen original dentro de las dimensiones apropiadas, es mejor para no caer en sorpresas, ya que las herramientas de generación automáticas en línea se encargan de forzar dentro de ciertos límites, el tamaño del archivo.

He aquí algunos enlaces para la generación de favicon:

FaviconPro

GenFavicon

Se puede tener acceso a más sitios para la generación de favicon, tecleando simplemente Cómo crear un favicon en el motor de búsqueda de Google.

Cómo añadir o cambiar un favicon

Insistimos en ello porque es significativo: Ya sea que se derive en forma directa del contenido de una página determinada, o se trate de una representación visual por completo nueva e independiente, el contar con un favicon puede marcar una gran diferencia. Y el no tenerlo puede proyectar una cierta imagen de despreocupación cuando no de dejadez hacia el proyecto o el contenido de la página donde hipotéticamente debería estar alojado.

Un usuario de internet tiende a juzgar a los dueños o administradores de una página, bajo las premisas de ciertos estándares de aspecto profesional. Las comparaciones con otros sitios del mismo sector son entonces inevitables.

¿Qué sería de la página de Mc Donald’s sin el favicon con los arcos dorados sobre un fondo rojo? ¿O Twitter sin su inconfundible pajarito azul?

Un favicon luce y genera confianza.

No es ningún secreto que por lo general, un usuario tiene abiertos de modo simultáneo varios sitios de la red, por lo que el uso de las pestañas y, por lo tanto, los favicon, se vuelve indispensable.

Ahora bien, ¿cómo se coloca o agrega el favicon en nuestra página web? ¿Dónde se coloca el archivo?

Para introducir el archivo con el favicon al sitio web hay básicamente tres alternativas:

• Permitir que los navegadores detecten de manera automática el favicon
• Utilizar para ello el Panel de Control
• Subirlo valiéndose del FTP (Protocolo de Transferencia de Ficheros)

Los tres métodos son muy sencillos, pero hay que recordar que por FTP necesitaremos los datos de nuestra cuenta.

En el caso del FTP, Necesitamos descargar e instalar el cliente FTP (si no lo tenemos) y conectarnos con nuestro usuario y contraseña, que en el caso de MundiServer, en nuestros planes de hosting wordpress y el resto de la gama,  facilitamos en el momento del alta. Simplemente debemos subir nuestro archivo, con el nombre exacto de favicon.ico, a la raíz de nuestro sitio, que habitualmente es dentro de public_html en el caso de cPanel, o httpdocs en el caso de Plesk.

Para la detección automática es imprescindible que la imagen se ajuste a las dimensiones ya especificadas: 16×16 px, o bien, 32×32 px. Si la imagen no es cuadrada sino redonda, ovalada, pentagonal, triangular, etc., también debe funcionar pero el resultado no suele ser tan satisfactorio.

Es absolutamente necesario que la imagen esté en formato .ico.

El nombre del archivo debe ser favicon.ico, ya que los navegadores sólo reconocen de forma automática este nombre.

En MundiServer, en los paneles de control cPanel, es sencillo de hacer.

Podemos hacerlo por medio del administrador de archivos de cPanel, una vez dentro, accedemos a public_html y lo subimos de forma simple.

Si todo se ha hecho conforme a lo indicado y se subió el archivo al sitio correcto y en el formato debido, el favicon de la página, debe aparecer en las pestañas y en la barra del navegador.

Si no ocurre así, conviene limpiar el caché. ¿Cómo hacer esto? De la siguiente manera, en Chrome:

• Hacer clic en la flecha que está en la parte superior derecha de la pantalla del ordenador
• Se desplegará una serie de opciones entre las cuales figura Más Herramientas
• Hacemos clic en Borrar datos de navegación
• Aparecerá una ventana con opciones sobre qué período se desea borrar: última hora, 24 horas, últimos 7 días, últimas cuatro semanas o Todos
• Elegir la opción que mas nos interese, pero es recomendable limpiar “Todos” para borrar todo rastro de cache, especialmente si es nuestra web.

Con estos ajustes, el procedimiento debe funcionar y debemos ver nuestro favicon.

Si lo que queremos es cambiar el favicon, el proceso es el mismo.

En este articulo hemos descrito que es el favicon, para qué sirve, cómo generarlo y la manera más sencilla de añadirlo como una especie de insignia de nuestra página web.

Hay otros caminos y opciones, pero los comentados, son los menos complicados y los que consumen menos tiempo. Son los más amigables y fáciles de seguir.

Recalcamos dos factores que resultan ineludibles y cruciales para llevar a buen término el proceso y porque evitarán muchos dolores de cabeza:

• Las dimensiones de la imagen: 16×16 px o 32×32 px
• El formato .ico para el archivo que se desea utilizar como imagen distintiva.

Para cualquier duda o consulta, no dudes en comentarnos en los comentarios. Estaremos encantados de ayudarte.