Como hacer Favicon

Como hacer un Favicon

Vamos a tratar un relacionado con el diseño web que afecta al posicionamiento web y a la imagen de una página: Como hacer y colocar un Favicon en nuestra página web; dotándola de un elemento gráfico diferenciador, propio y signo de imagen corporativa que va a hacer nuestra web más agradable al usuario y permitirá que éste nos localice rápidamente en su barra de favoritos; si nos ha incluído claro.

¿Qué es un Favicon?

Efectivamente, qué es un Favicon me dirán ustedes. Pues un favicon es un elemento gráfico o icono que aparece junto al nombre de una página web, signo de identidad corporativa y a su vez diferenciador de una página de otra. Miren ustedes en la parte de arriba, en la barra de direcciones de internet como en nuestra web aparece un cuadro rojo con unos ojos. Viene del "Favourite Icon" que traducido sería icono favorito. Eso es un favicon y claro, pueden ustedes encontrarlo en muchas páginas web en las que como favicon se utiliza el logotipo de la empresa, una imagen relacionada con un producto, marca o servicio o, simplemente un diseño que nos ayude a recordar una página y a localizarla fácilmente en nuestra barra de favoritos, en la que seguro verán rápidamente y distinguirán aquellas webs que tienen favicon de las que no. Pero sigamos en el siguiente paso con las diferentes utilidades de un favicon para nuestra página web tanto para el usuario como también para el posicionamiento en buscadores.

¿Para qué sirve un Favicon?

A lo anteriormente comentando, en cuanto a la utilidad para el usuario para localizar nuestro icono corporativo en la barra de direcciones y en la carpeta de favoritos, cabe añadir que es un elemento bien valorado por los buscadores para el posicionamiento web. Es decir, "te hace ganar puntos".

No obstante considero que un favicon es sobretodo interesante, que no imprescindible, para transmitir una imagen de la página web y sobretodo para ser localizado en la barra de favoritos. Muy importante ese aspecto ya que a veces, a quien no le ha pasado, entramos en la barra de favoritos para entrar en una web que visitamos asiduamente; y un favicon atractivo, por lo que sea, nos hace recordar otras páginas y volver a entrar en ellas. Las webs que están en una barra de herramientas pero no tienen éste elemento que cause la atención, llame al recuerdo e incite a entrar nuevamente en esa página desaprovechan una oportunidad enorme ¿No creen?. Solo tienen que hacer la prueba; entren en su barra de favoritos y vean cuales le atraen más ¿No tendrán por lo menos la posibilidad de que vuelvan a entrar las páginas con un Favicon que destaque?. No les voy a pedir que nos incluyan en su barra de favoritos pero si lo hacen; creo que hemos hecho un buen trabajo pese a no contar con grandes conocimientos de diseño; siguiente paso que vamos a ver para crear un favicon.

¿Es difícil crear un favicon? ¿Como lo hago?

No se alarmen, hacer y diseñar un favicon no es que sea difícil; es que es sencillísimo.

Para los que no tengan grandes conocimientos de diseño, incluso conocimientos medios, resumiré el tema con que hagan una imagen, o utilicen su logotipo, y lo reduzcan a unas dimensiones de 16 por 16 pixels. No hagan más, no la guarden; por el momento. O bueno, si la queréis guardar hacedlo en formato jpg.

Para los que no tengan absolutamente ni idea de diseño o muy poquito, quizás sería mejor ir aprendiendo algo ¿No?. Ahora en serio y bromas aparte y hablando claro: "esta chupado". Simplemente capten una imagen de su web -recuerden que coger imágenes de "otros lados" puede tener derechos de autor- y abran el programa PAINT que tienen, creo, todos los ordenadores. Si no saben donde lo tienen, vayan al cuadro de buscar de su ordenador y lo encontrarán si problemas. Ya abierto, peguen la imagen deseada (o ábranla clicando en "Archivo" y después en "Abrir"). Si no tienen esta imagen, creen un cuadro de un color con el mismo PAINT y pongan las letras o imágenes encima que ustedes quieran. No va a ser el gran diseño; pero tendrán su favicon; aunque faltan unos pasos claro.

Bien, en este momento tenemos una imagen en pantalla de este programa, PAINT (aunque puede hacerse con otros programas de diseño) y tenemos que reducirla hasta un tamaño de 16 x 16 píxeles. En definitiva el tamaño que ven en el favicon de nuestra página arriba. Lo primero de todo será hacer la imagen cuadrada; es decir con igual altura que ancho. Si utilizan un programa especial que dimensione la imagen, como digo a 16 x 16; perfecto. Si siguen ustedes con PAINT de momento guarden la imagen con el nombre favicon en formato jpg y NO cierren PAINT. Vayan posteriormente a la carpeta en la que la han guardado la imagen y hagan un click sobre ella con el botón derecho, entren en "propiedades" en la ventana que se les habrá abierto y click en en "detalles". Ahí se les indica qué dimensiones tiene la imagen en estos momentos.

A partir de ahora, se trata solamente de reducir el tamaño de la imagen yendo a buscar la medida deseada (16x16) utilizando la función "cambiar de tamaño o sesgar" que encontramos en la pestaña "Imagen". Lo primero que les recomiendo es "conseguir " el cuadrado; ya que posiblemente el ancho o el alto de su imagen sea diferente; y debe ser igual. Si es el ancho, reduzcan la imagen de ancho (pongan en "ancho" un número inferior a 100; y vean como reduce la imagen.) Y guarden./graben. Vayan nuevamente a la carpeta de la imagen, que no debemos de cerrar durante el proceso de creación del favicon; igual que PAINT. Vuelvan ahora a mirar las propiedades de la imagen hasta que consigan que el ancho sea igual que el alto. Cuando ya tengan esto; reduzcan -siguiendo con el mismo proceso de "cambiar de tamaño o sesgar"- en iguales proporciones el alto y el ancho hasta ver que la imagen es de 16 x 16.

Les aseguro que tardarán menos que lo que han tardado en leer la explicación. Pero ¿Hemos acabado ya?. No, faltan un par de detalles.

Guardar el favicon y subirlo al server

Ante todo espero que se estén entreteniendo con la creación del que va a ser el favicon de su web por mucho tiempo y van a disfrutar viéndolo una y otra vez pensando "lo hice yo". Bueno, quizás he exagerado un poco pero les prometo una sonrisa -la suya- cuando vean por primera vez en su web "su favicon" y un sentimiento de satisfacción. Pero volvamos al tema.

Ya tenemos la imagen a 16x16 ¿Pequeñita verdad?. Lo siento, debe ser así. Y la hemos guardado en jpg pero no; el favicon debe tener una extensión .ico Ahora os explico; nada complicado.

Para convertir nuestra imagen .jpg en .ico; nada más fácil que entrar en http://tools.dynamicdrive.com/favicon/ y en donde indica "Image to crate Icon from"; picar en examinar y seleccionar la imagen a convertir. Después solo clicar en "Create Icon", después en "Download Favicon" y Guardar. Ya hecho esto tendremos nuestra imagen con la extensión .ico en la carpeta en la que la hayamos guardado. El nombre de la imagen nos habrá quedado como favicon.ico. Ahora toca subirla al servidor.

Para los que sepan como se sube una imagen vía ftp al servidor; solo tienen que hacer esto y esperar al último paso que detallo más adelante. Para los que no sepan como hacerlo, pónganse en contacto con la empresa o persona que les gestione su web y díganles que les suba esta imagen al servidor (pásenla por mail por ejemplo ;-) y que, y esta si que es la última fase para todos, les pongan entre las etiquetas <Head> del código fuente de la página principal o índice el siguiente texto:

Es posible que el favicon tarde un rato en aparecer, más en Intenet Explorer que en Mozilla Firefox pero en un rato podrán verlo sin problemas; y hagan la prueba: guarden su página en sus favoritos para ver si destaca entre los demás favicones. Y reconócelo; sonreíste....

Nota: Para cualquier consulta, duda, aclaración, si os habéis liado (eso es culpa mía; que igual me explico "raro") o lo que sea; aquí teneis mi mail de contacto de posicionamiento de páginas web para lo que preciséis: cursoSEO@publicidadymarketingweb.com ; estaré encantado de ayudaros. David Guiu de PublicidadyMarketingWeb.com

Tweet Más Noticias sobre Posicionamiento Web