Crea e Instala tu Favicon

favicon mumslowcreative

Estoy segura que siempre estás pensando cómo mejorar la imagen de tu página.  Es que no queremos que se nos pase ningún detalle. Y eso vamos a ver hoy, el detalle del detalle de un blog, lo más pequeño ¿que será?

Pero también es para ti, si estás pensando en abrir una página para promocionar tus producto/servicio, porque en los detalles es donde se marca la diferencia.

¿Te has dado cuenta de la imagen que aparece en cada pestaña identificando a cada página en la barra de dirección? Eso se llama FAVICON, y hoy aprenderemos cómo hacer uno e incluirlo en tu blog.

¿Por qué es tan importante el FAVICON?


Aquí podemos aplicar la frase: una imagen vale mil palabras. Y aunque el FAVICON  es muy pequeño, también podemos decir lo mismo, porque esta imagen te identifica del resto. Sólo reconociendo el favicon sabemos de quien se trata ¿no es así?

Como ejemplos, tenemos el sobre de Gmail, la B naranja de blogger, la G de google, o la f de Facebook.

Entonces ¿por qué no tener tu propio favicon para que implantes tu marca entre tus seguidores y posibles seguidores?


El Diseño


Lo más importante a tener en cuenta en el diseño del FAVICON, es su tamaño. Piensa que es una imagen muy pequeña, entonces no es recomendable colocar Textos, Frases, o imágenes con mucho detalle, porque finalmente no se verá. 

Pero si hay que tener en cuenta una de las grandes características del FAVICON, y es que debe ser Legible. Por eso es que su diseño debe ser sencillo, incluso tan sencillo como un circulo rosa, como el de madresfera. 

De hecho lo que mejor funciona es elegir formas, como círculos, cuadrados, etc.; o alguna inicial.

Pero recuerda que incluso en el favicon el branding de tu página está en juego. Utiliza los colores, formas o la fuente que caracterizan tu marca. Aquí hablamos sobre eso.

Para poder crear tu logo favicon pueden utilizar Photoshop o cualquier otro editor de imagen, incluso paint. Sólo debes preocuparte de utilizar las dimensiones correctas del Favicon, y guardar en PNG.

Propiedades del Favicon



Como cualquier otra imagen que queremos subir, como portadas en facebook o Google+, hay que tener en cuenta cuál es la resolución que tienen, justamente para que luego no se vean distorsionadas.

El Favicon tiene una resolución de 16 por 16 px, Además se guarda en formato .ico, que es el formato de los iconos en Windows. Así que, una vez creado tu Favicon, habrá que convertirlo en .ico.

El proceso e instalación en tu blog


Anteriormente comentaba que las dimensiones del favicon es de 16 por 16px, aunque actualmente también puede ser mayor como de 32 por 32px. Una vez que hayas elegido el editor donde crear tu favicon, recuerda entonces estas dimensiones para el layout.

Pero estas dimensiones son muy difícil de trabajar. Por eso te recomiendo éste programa. Empieza así:

  • Puedes crear tu logo en Photoshop, por ejemplo en 500 por 500px
  • Guarda en png y con transparencia (desactiva la capa background)
  • Importa el archivo al programa antes descrito
  • Elije el tamaño que deseas; queda muy bien en 64 por 64px. Le das a OK
  • Exporta el archivo y se guardará en .ICO

programa X-icon Editor
Una vez importado, elije las dimensiones del logo

Cuando tengas ubicado tu favicon.ico, tendrás que alejarlo en algún servidor, yo utilizo google sites. Desde ahí debes obtener la url del archivo, copiarla. Por otro lado debes incluir la siguiente linea de código en tu plantilla:

donde colocar la url del favicon mumslowcreative


<link href="dirección url del archivo " rel="shortcut icon">


Ya sabes que tienes que entrar a tu plantilla y editar en HTML. La línea anterior la pegas entre <head> y </heard> . Recuerda pegar la url de tu favicon entre las comillas de href.

Si estás en Blogger, también tienes que subir el archivo  favicon.ico en Diseño| Favicon

¡Y listo! ya tendrás puesto tu logo en la barra de direcciones. 

Si no quiere diseñar tu favicon, siempre puedes encontrarlos gratis en la web. Te dejo una página aquí con varios diseños.

¡Buenos días tod@s!!!



0 comentarios:

Publicar un comentario

Blogger templates

 

Google Friend

Datos personales