Clicky

Cómo hacer facilmente un favicon (paso a paso)

favicon apañados

La razón principal que tienen hoy en día los favicon es mejorar la experiencia del usuario

Es cierto, los favicon son cosas muy pequeñas, probablemente tengan la más mínima importancia de un sitio, pero es la atención al detalle que hace que un sitio destaque y, aunque suene loco, los favicon son muy importantes desde el punto de vista una marca.

Muchos de los lectores ya sabrán lo que es un favicon y cómo crearle, pero este artículo todavía te puede ayudar a crear uno nuevo y también explicar porqué sirven como un buen recurso de página.

Sólo en caso de que seas un diseñador - o cualquier tipo de cinturón negro en artes de favicon -, este artículo trata probablemente todo lo que necesitas saber acerca de estos pequeños y esquivos cuadrados de 16×16 píxeles, e incluso algunas interesantes favicuriosidades. Así que disfruta!

¿Qué es un favicon?

Los favicon son pequeñas imágenes cuadradas normalmente de 16 píxeles que son utilizadas por los navegadores web para mostrar una representación gráfica de la página que se visita en la parte izquierda de la barra de direcciones del navegador. Probablemente habrás visto antes muchos favicon, incluso si saber lo que eran. Si hay alguna duda, la imagen de abajo te ayudará.

favicon apañados

Y si estás interesado en la comprensión de un pedazo de la historia de Internet, he aquí un dato interesante:

El favicon es una palabra compuesta hecha de las palabras "favorito" e "icono", y fue nombrado como tal cuando fueron soportados por primera vez los favoritos en Microsoft Internet Explorer 5 y, en caso de que no utilices IE, esta función de favoritos del navegador se llama marcador (bookmark).

¿Cuál es el propósito de un favicon?

Ya en los primeros días de Internet, herramientas como Google Analytics eran simples sueños en la mente de unos cuantos gurús pero, en ese momento y por extraño que parezca, los favicons se utilizaron como una forma de estimar el tráfico web para contar el número de visitantes que añadían la página a sus favoritos.

Pero dejando aparte los hechos interesantes, la razón principal que tienen hoy en día los favicon es mejorar la experiencia del usuario. Los favicon se utilizan en todos los navegadores modernos en la barra de direcciones, en la barra de enlaces, en el área de marcadores y en las pestañas de navegación. Además de eso, algunos navegadores también muestran los favicons siempre que se crea un vínculo de acceso directo para el sitio web correspondiente en el escritorio y el dispositivo móvil.

Sin duda, la razón principal para tener un favicon es la evidente mejora en la experiencia del usuario. Si tienes un sitio web que no muestre un símbolo genérico en el navegador en todos los puntos de interacción que he mencionado más arriba, y si te preocupas por la experiencia del usuario, debes pensar en los favicon.

muestra de favicons

Pero si miramos las cosas a través de la lente de marca, creo que los favicons son aún más relevantes desde el de punto de vista del branding. Una vez más, con tantos puntos de interacción, no utilizarlos para crear conciencia de marca es un delito. La verdad es que encontrar formas creativas para mejorar una imagen de marca en línea es siempre una tarea difícil, y tener un favicon es una forma fácil y sencilla de lograrlo. Así se consigue un amigo!

¿Cómo crear un favicon?

Crear un favicon en un sitio web es muy fácil. Como cuestión de hecho, ni siquiera necesitas ser un diseñador para hacerlo. Sin duda, ayudará si lo eres, porque puedes poner tus habilidades a trabajar y crear algo que realmente destaque, pero incluso los menos conocedores de la tecnologías pueden hacerlo en unos 5 minutos o menos, utilizando las herramientas adecuadas.

Los sitios web de la lista de abajo te permiten crear un favicon con sólo subir una imagen preexistente. Así que si deseas crear un favicon para tu marca, todo lo que tienes que hacer es subir tu logotipo a uno de los siguientes sitios y descargar el archivo favicon.

Lista de generadores de Favicon en línea:

 Favicon CC
 Favicon Generator
 Dynamic Drive Favicon Tool
 Chami Favicon Service
 Favicon Generator ORG
 Favicon UK
 Degraeve Favicon
 Anti-Favicon
 Gen Favicon
 Favigen

Los sitios web anteriores varían mucho en términos del archivo resultante que se obtiene, sobre todo en términos de tamaño de archivo y extensión. Si estás buscando obtener el archivo más compatible posible, te recomiendo descargar una imagen de tamaño 16×16 píxeles con el formato ".ico".

Si necesitas un poco más de inspiración, mira a continuación unas galerías de favicons:

 Fine Icons
 The Favicon Gallery
 Delta Tango Bravo
 Fresh Favicons

¿Cómo utilizar tu favicon?

Una vez que tengas tu favicon cuidadosamente diseñado, instalarlo en su servidor no debe tomarte más de un par de minutos en dos sencillos pasos. Para eso tendrás que acceder a la carpeta raíz del sitio web (o a la carpeta del template que utilices) y, con una herramienta de edición de texto, cambiar el código HTML de tu sitio web.

Paso 1

Tendrás que cargar el archivo "favicon.ico" en tu servidor. Con el fin de hacer eso, dirige en la barra de direcciones del navegador a tu servidor FTP, lau URL debe ser similar a esto:

ftp://nombre_usuario_ftp@tu_sitio.com

Pulsa enter y el navegador te pedirá un nombre de usuario y contraseña antes de permitir el acceso al servidor de archivos. Una vez que esté dentro, acaba de subir el archivo "favicon.ico" en la carpeta raíz y ya está. Mira las imágenes paso a paso:

favicon acceso ftp desde el navegador

favicon - acceso por ftp a directorios

favicon acceso ftp ver carpeta raíz

favicon acceso ftp subir favicon

También puedes subir el archivo con un cliente de FTP como Filezilla:

subir favicon con Filezilla

Paso 2

Ahora tendremos que editar la página web HTML para ayudar a los navegadores a encontrar tu imagen favicon. Manteniendo abierta la ventana FTP, busca y descarga el archivo "index.html" ("header.php" o "head.php") de tu servidor (puede estar en varios sitios dependiendo del CMS que utilices, por ejemplo en Joomla habría que ir al template que uses y allí, y también dependiendo de cuál sea, buscar que archivo debes editar), pincha dos veces sobre el archivo que desees editar y sigue los pasos a continuación de acuerdo con el archivo que has obtenido:

Si su sitio web está hecho de HTML plano, inserta el código siguiente en el área <HEAD> del archivo "index.html", y no te olvides de cambiar "tu_sitio.com" con la dirección de tu página web:

<link rel="shortcut icon" type="image/x-icon" href="http://tu_sitio.com/favicon.ico">

Si utiliza WordPress, inserta el código de abajo en la zona <head> de tu archivo "header.php".

<link rel="shortcut icon" type="image/x-icon" href="/<?php bloginfo('url') ?>/favicon.ico">

Si usas Joomla deberás localizar el archivo como he dicho antes y el código sería algo como esto:

<link rel="shortcut icon" href="/<?php echo $this->template->baseurl; ?>/images/favicon.ico" />

Una vez hecho esto, refresca la página del navegador ¡Ya está! (posiblemente deberás eliminar los archivos temporales de Internet del navegador para que lo puedas ver).

Por una cuestión de hecho, la mayoría de los navegadores modernos son lo suficientemente inteligentes como para encontrar tu archivo favicon incluso sin ninguna pieza de código, pero sólo mientras la imagen favicon tenga 16× 16 píxeles, haya sido nombrada como "favicon.ico" y esté guardada en la carpeta raíz del sitio Web.

¿Cómo crear un favicon en Photoshop?

Con tantas herramientas disponibles para ayudarte a crear tu favicon, ¿por qué quieres coger el camino más difícil y crearlo en Photoshop? Bueno, si eres un diseñador y deseas obtener el máximo rendimiento de tu favicon, sin duda esa es la forma profesional de hacerlo. El truco es que Photoshop no admite de forma nativa archivos ".ico", por lo que necesitas descargar el plugin de Telegraphics.

Asegúrate antes de instalarlo seguir el tutorial de abajo. Photoshop no funcionará sin él.

crear un favicon con Photoshop, salvar como

Crear un nuevo documento en Photoshop seleccionando la opción del menú "Archivo" y la siguiente opción "Nuevo", a continuación, establecer un lienzo de 64×64 píxeles. ¿Por qué? Dado que el tamaño final del favicon de 16×16 es tan pequeño, escogiendo un lienzo más grande para trabajar te ayudará a mejorar tu creatividad. A continuación, pega tu logotipo en el documento y desata tu poder creativo.

Una vez que hayas terminado, sólo tienes que seleccionar el menú "Imagen" y la siguiente opción "Tamaño de imagen" y reducir la imagen hasta 16×16 píxeles. Recuerda hacer clic en "Volver a muestrear la imagen" y selecciona "Sharper bicúbica", esto es para asegurarse de que la imagen no se distorsionará cuando cambie de tamaño. Si no te gusta el resultado final simplemente deshaces los cambios anteriores con "AltCtrl/AltCmd+Z" y sigue trabajando en el diseño hasta que estés satisfecho con él.

Para terminar tu favicon todo lo que tienes que hacer es hacer clic en el menú "Archivo" y la siguiente opción "Guardar como", hay que recordar que la extensión de tu archivo deberá guardarse como "favicon.ico". Una vez más, el trabajo acabado!

Conclusión

Los favicons son una de esas pequeñas cosas a las que normalmente no les prestamos demasiada atención, pero la verdad es que lejos de ser insignificantes, son una parte muy importante de la web, tanto desde una perspectiva de interfaz de usuario, como desde un punto de vista de branding.

Algunos dicen que las grandes cosas vienen en tamaños pequeños, y creo que eso se aplica a los favicons, así que cualquier diseñador de páginas web y/o especialista en branding siempre tendrá que perder algo de tiempo para agregar un favicon a los sitios de sus clientes, incluso cuando el cliente no tenga idea de lo que es un favicon demuestra un gran profesionalismo y atención al detalle, el tipo de calidad que cada cliente aprecia.

Jesus_Caceres