Cómo hacer un favicon?
Cómo hacer un favicon
Son muchas las formas de dar personalidad a nuestro sitio, pero sin duda una de las mas vistosas, a pesar de su tamaño, un cuadrado desde 16×16, 32×32, 48×48, 64×64 hasta 128×128 píxeles y que parece ocultar una programación de ligas mayores, es la del “favicon“.
Puede parecer un pequeño detalle pero resulta ser más importante de lo que muchos creen. Un favicon, o “favorite icon”, es ese pequeño ícono o imagen que originalmente se utilizaba junto al nombre del sitio web en caso de que el usuario lo agregará a sus favoritos. Más adelante, otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestaña del sitio web.
Para crearlo se pueden utilizar muchos programas de diseño gráfico, para este post emplearé Photoshop, y Junior Icon Editor. Pero veamos paso a paso como se hace:
Paso 1
Selecciona la imagen que quieras utilizar como favicon. En mi caso uso mi propia foto. La abro desde Photoshop y usando la herramienta Crop la “corto” en la medida 1×1 que mencioné antes. En este caso 112mm x 112mm con una calidad de 72dpi:
Paso 2
Después de cortar la imagen, se guarda con la opción de “Guardar para web y dispositivos”. En la pantalla aparecen las opciones de calidad y formato para la imagen, seleccionamos PNG-8 con las opciones de ajuste preestablecido en el panel de la derecha:
Paso 3
Una vez que hemos guardado la imagen, emplearemos el programa gratuito Junior Icon Editor para generar nuestro favicon. Al ejecutar el programa salen estas dos pantallas, solo hay que hacer click en los botones encerrados en el círculo verde:
Primeras pantallas al abrir Junior Icon Editor
Luego se abre esta pantalla con las opciones de configuración inicial para crear un nuevo favicon, solo la emplearemos si no tenemos de antemano una imagen escogida, si no, simplemente cerramos esta pantalla y pasamos al siguiente paso:
Junior Icon Editor – Configuración inicial
Lo siguiente será abrir la imagen que guardamos con Photoshop en formato PNG-8, por tanto desde el menú “File”, abrimos clicamos a “Abrir” y buscamos nuestra imagen, la seleccionamos y le damos al “Abrir”:
primer paso para convertir nuestra imagen en favicon
Al abrir la imagen nos aparece esta ventanita en la que seleccionaremos el tamaño que queremos para nuestro favicon:
Selección de las características de nuestro favicon
Al darle al “ok” automáticamente el programa transforma la imagen en el siguiente patrón de colores:
Patrón de colores
En este punto, si se quiere se pueden hacer retoques con las herramientas del panel de la izquierda, si esta todo ok se pasaría a guardar el favicon:
Guardar en formato .ico
Listo, nuestro favicon esta a punto para que lo usemos:
Favicon con la extensión .ico
Esta es una forma simple y económica de crear un favicon, pero si no quieres descargarte el software, también se pueden utilizar varios servicios online que nos facilitan la tarea, como genfavicon.com, favicononline.es u otros que aparecen con la búsqueda en Google. Solo hay que seguir los pasos que nos indiquen y ya tendremos el favicon con la extensión “.ico”.
En cuanto al diseño, debemos tomar en cuenta que, en un espacio muy reducido, deberemos colocar una imagen que nos represente, por lo que sería conveniente emplear o bien el isotipo de nuestra marca como hace Mercedes Benz, un detalle ampliado del logotipo, o una imagen reconocible como es el caso de este blog. En el caso de una marca que tenga alguna mascota que la identifique sería conveniente hacer uso de ella. Tal es el caso de Vía Michelin.
Una vez que tenemos creado nuestro ícono, lo aplicaremos a nuestro sitio web de la siguiente manera: añadiremos el siguiente link en el archivo index.html que es el que por defecto se abre al entrar en una página web. Colocaremos el código entre las etiquetas de la cabecera:
[important]
<head>
rel=”shortcut icon” href=”http://www.tudominio.com/favicon.ico”>
</head>[/important]
Si hemos creado nuestra web sin ningún gestor o plataforma de contenidos simplemente guardamos el archivo y lo subimos junto con el favicon.ico al mismo folder en el sitio donde se alojan los archivos de nuestra página web.
En Blogger simplemente se accede a la opción “Diseño” del panel izquierdo y en la parte superior izquierda se encuentra un gadget que nos permite cargar un favicon personalizado cuyo tamaño debe ser menor que 100 KB.
En WordPress depende del Theme, Plantilla o Tema que tengamos instalado, generalmente nos dan la opción para cargar nuestro favicon, si no es así, en principio deberemos subir nuestro favicon.ico al directorio raíz de nuestra web, luego accederemos a nuestro panel de control de WordPress o Dashboard y seleccionaremos la opción de “Appearance” en la que accedemos al botón de “Editor” y buscamos en la columna de la derecha el archivo header.php y copiamos el mismo código de líneas arriba antes de la etiqueta
Con eso debería funcionar de maravilla en todos los casos…
