Como Crear Favicon (barra de URLs, favoritos y WordPress)

Todo buen desarrollador web debe estar hasta en los detalles más mínimos, ya que allí es donde se diferenciará de los demás programadores. Uno de los detalles importantes es el elemento llamado “favicon”, ya que sirve para auto-promocionar nuestro sitio.

Aquí te enseño como crear favicon y como aplicarlo  para que se vea en la barra de direcciones URL, en los favoritos y en WordPress.

El favicon es el pequeño icono que aparece al lado de la dirección URL de nuestro navegador, y también lo vemos cuando guardamos en “favoritos” alguna pagina que nos gusta.

Este pequeño elemento es, aunque no parezca, una excelente arma de marketing y publicidad ya que si logramos que el mismo sea lo suficientemente llamativo, podremos sobresalir de otros sitios, por ejemplo, cuando el usuario tiene varias pestañas abiertas, nos guarda en favoritos o lee nuestra página por medio de algún RSS Reader.

Necesitamos pasar por 2 pasos para crear favicon e implementarlo en el sitio web.

PASO 1: Crear el favicon

Para crear el favicon disponemos de 3 posibilidades

– Crearlo nosotros mismos
– Crearlo con algún software de creación de favicon
– Crearlo con algún sitio dedicado a la creación de favicon

Creando nuestro propio favicon

La creación del favicon es algo relativamente simple, aunque se deben tener en cuenta algunos detalles.

El formato estándar del archivo de favicon es del tipo “.ICO” y el mismo se asocia a nuestro documento por medio de código HTML.
El archivo de favicon es básicamente un archivo grafico pero con la extensión ICO, aunque las últimas versiones de navegadores, aceptan extensiones estándar.

Veamos como se crea

Para crear favicon debemos crear con cualquier programa de edición de imágenes, un archivo de imagen (JPG, GIF, PNG) cuadrado de 16 x 16 ó de 32 x 32 pixeles .  Recomiendo diseñar el archivo en un tamaño mas grande y luego escalarlo y comprobar cómo nos queda. Luego lo guardamos como JPG, PNG o GIF.

Creando favicon con software

Existe infinidad de programas para la creación de iconos favicon, y que nos facilitan la tarea ya que en el mismo podemos diseñarlo y exportarlo directamente en formato ICO.

Si buscas en sitios especializados para descarga de software, encontrarás una infinidad de ellos.
Puedes empezar por ejemplo en http://www.softonic.com

Crear favicon Online

Una de las mejores opciones es crear el favicon directamente en sitios que nos permiten el trabajo de diseño y exportado de los mismos.

Uno de los mejores que conozco es http://www.favicon.cc/

Este sitio te permite diseñar desde cero tu favicon o incluso subir una imagen y trabajar sobre ella.
Por supuesto, luego nos deja de descargarlo en formato ICO.

(Esta también es bueno http://www.chami.com/html-kit/services/favicon/)

PASO 2: Implementando el Favicon

Una vez que disponemos del archivo .ICO, implementarlo por medio de nuestro código HTML.

Lo que primero debemos hacer es re-nombrarlo como “favicon.ico” y subirlo al servidor donde tenemos alojado nuestro sitio. (Recomiendo ponerlo en el directorio raíz)

Una vez subido debemos agregar la línea de código a nuestro documento HTML, que sirve para que nos muestre el favicon.

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

Esta línea de código la debemos insertar dentro de las etiquetas HEAD de nuestro documento.
(recuerda que el archivo debe está ubicado en el directorio raíz del sitio)

Una vez hecho esto, nuestro icono favicon deberá aparecer al costado de la barra de direcciones URL tal cual se muestra en la imagen.

Implementar favicon en WordPress

Una de las formas mas simples de crear favicon en Wordpres, es por medio de un excelente plugins llamado “WSA Favicon”.

Debemos ir a la sección Plugins de tu WordPress, Añadir nuevo y buscar el plugin por ese nombre. Una vez instalado nos pondrá un link a las opciones del mismo, dentro del menú “Ajustes”.

Allí podremos subir un archivo grafico para la visualización en equipos de escritorio y notebook, y otro para iPad, iPhonesy iPod.

El plugin se encarga automáticamente de convertir los archivos a ICO, comprimirlos y escalarlos.

La pagina oficial del plugin es http://wordpress.org/extend/plugins/wsa-favicon/

Con la información que tienes en este articulo, podrás implementar esta poderosa herramienta de publicidad en cualquier sitio web o blog que tu desees.

Saludos!
Cristian