Buscar
Empresas & Marketing

Como crear un favicon para tu página

¡Buenos días de lunes! Para ponernos manos a la obra hoy os traigo unos truquillos para crear vuestro propio Favicon. ¿Qué es un favicon? Seguro que habéis visto miles y miles. Lo mejor que podemos hacer para saber que es un favicon es, como siempre, ir a Wikipedia a ver que nos...

Como crear un favicon para tu página

¡Buenos días de lunes!

Para ponernos manos a la obra hoy os traigo unos truquillos para crear vuestro propio Favicon.

¿Qué es un favicon? Seguro que habéis visto miles y miles. Lo mejor que podemos hacer para saber que es un favicon es, como siempre, ir a Wikipedia a ver que nos dicen:

“Un favicon, del inglés favorites icon (icono de favoritos), también conocido como icono de página, es una pequeña imagen asociada con una página o sitio web en particular.”

Con esta descripción entendemos que es algo que define a nuestro blog y lo diferencia de otros cuando visitamos la web en el navegador.

favicon

Hoy os vamos a explicar una sencilla técnica para crear vuestro propio favicon y cómo subirlo a vuestra página. Existen otras formas de conseguir el mismo objetivo, pero ésta es la más sencilla y rápida y os dará un resultado inmediato.

Vamos a crear un favicon a partir de este logo:

 

favicon

 

1. Crear un documento de 16x16px

Esto podéis hacerlo con Photoshop o cualquier otro software de edición de imágenes (si no tenéis Photoshop podéis usar GIMP por ejemplo)

Crear un nuevo documento desde Archivo / Nuevo y asignarle los siguientes parámetros:

favicon

2. Importar vuestro logo al documento de Photoshop.

Con la opción que se encuentra en el menú Archivo / Colocar, ( para los que tengáis Photoshop en inglés File / Place ) podéis importar la imagen de vuestro logo en el nuevo documento y ésta se transformará directamente a tamaño 16×16. Si no tenéis Photoshop simplemente abrid la imagen y copiad el contenido a vuestro documento 16×16.

favicon

Nuestro documento de 16×16

favicon

Nuestro documento con el logo a 16×16 después de haber hecho la opción Colocar

Tip

Hay que tener en cuenta que una imagen de 16×16 pixels es algo muy pequeño por lo que no se debería poner texto a no ser que se trate de una sola letra (W de Wikipedia por ejemplo), ya que no se apreciarán palabras completas. Lo mejor es poner una imagen que te identifique, como tu logo.

3. Exportar imagen a formato .png

Una vez tenemos la imagen en nuestro documento de Photoshop tendremos que exportarla en formato .png. Para ello os vais a al menú Archivo y seleccionáis la opción Guardar para web y dispositivos… . Recordad que debéis marcar el formato a PNG-24.

favicon

Lo mejor es guardar el archivo en un sitio donde recordéis, el escritorio por ejemplo, ya que esta imagen es la que utilizaremos en el siguiente paso para convertirla en formato .ico.

4. Convertir la imagen en icono mediante favicon.cc

Ahora que ya tenemos nuestra imagen de 16×16 en formato .png vamos a convertirla a formato .ico mediante la herramienta online favicon.cc. Para ello entramos en la web donde veremos que podemos tanto importar una imagen como ponernos a dibujar en los 256 pixels que compondrán nuestro favicon.

Importamos imagen mediante el botón Import Image

favicon

Seleccionamos el archivo favicon.png que hemos guardado (en el escritorio si habéis seguido mis instrucciones) y presionamos el botón Upload. Recordad que debe estar marcada la opción Keep dimensions para que no se deforme nuestro favicon.

favicon

Una vez hecho esto tendremos el favicon creado, lo único que tendremos que hacer es descargarlo mediante el botón Download Favicon.

favicon

5. Subir por FTP el archivo .ico a nuestra web.

El último paso es subir el archivo favicon.ico descargado en el paso anterior a nuestra página y guardarlo en el directorio raíz, es decir, el directorio principal donde se encuentra nuestra web.

Una vez hayamos subido el archivo podemos refrescar la página para visualizar nuestro favicon (Ctrl + F5 o Ctrl + Shift + R en Windows y CMD + Shift + R en OSX)

Para que tengáis todos los pasos en un vistazo rápido, aquí os dejo este esquema resumen:

favicon

¡Que tengáis un gran día!

+ info

http://es.wikipedia.org/wiki/Favicon
https://github.com/audreyr/favicon-cheat-sheet
http://www.favicon.cc/

¿Quieres comentarnos algo sobre este post?

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

4

4 respuestas a “Como crear un favicon para tu página

  1. Me guardo la información, aún estoy en busca del logo perfecto jeje
    Muchas gracias!
    Salui