Cómo hacer un Favicon en WordPress para tu pagina web o blog Presentación

Un favicon es un recurso muy vistoso, de esos que molan y muy facil de incluir en tu web o blog de wordpress. Aqui te enseño como hacerlo en 3 sencillos pasos.

 

¿Qué es un favicon?

Un favicon es el nombre que se le da al icono que aparece a la izquierda del nombre de tu página web en la pestaña del navegador. En esta imágen de aqui abajo, como hay muchas pestañas abiertas en el navegador, prácticamente solo se ve el favicon de cada pestaña y apenas algo de texto.

Imagen que muestra los Favicon de diferentes web

Si quieres ir a la presentación con 3 sencillos pasos, pincha debajo:

Como crear un Favicon en wordpress para tu pagina web o blog

Si lo prefires,puedes seguir leyendo el post donde te explico igualmente como crearlo.

¿Por qué quiero un favicon en mi web o blog?

  • Hace más fácil la navegabilidad ya que cuando abrimos muchas pestañas, no se ve el nombre completo de tu web y el icono facilita al usuario moverse de una pestaña a otra (como se muestra en la imagen de arriba).
  • Es más rápido para el usuario identificar una página que ha guardado en su barra de marcadores o favorito
  • Este icono también se muestra cuando un usuario guarda tu web en la página de inicio de su móvil mostrándose el icono entre el resto de aplicaciones. Y cambien es útil cuando tu guardas tu web o blog en la pagina de inicio de tu móvil 😉
  • Aumenta el reconocimiento de tu marca
  • Y por ultimo pero no menos importante, es un recurso muy chulo en tu web

 

¿Y si no tengo un Favicon?

Si no se indica ninguno en concreto es probable que salga uno que ya te venga con tu theme de WordPress o que salga un recuadro de puntos vacío, porque no hay favicon o no se puede reconocer. ¡Esto no mola!

Lo que queremos es tener un icono que sea una versión en pequeño de nuestro logo o alguna gráfica que sea reconocible, como una inicial con nuestra tipografía y colores corporativos por ejemplo.

¿Estás convencido?

Muy bien, aquí te explico como puedes hacerlo en 3 sencillos pasos. No perdón, sencillisimos!

Paso 1

Lo ideal es usar el logo de tu marca como Favicon.
El tamaño recomendado es 512 x 512 pixeles (tamaño cuadrado). Puedes usar un rectángulo de mayor tamaño y WordPress te permitirá recortarlo cuando lo subas.

Ten en cuenta que se va a ver muy pequeño por lo que si tu logo tiene demasiados detalles que no se van a apreciar, mejor simplificar y poner solamente una parte del logo, quitar el texto o las letras o dejar solamente la inicial. El efecto será mucho mejor.

Te recomiendo que utilices un editor de imágenes para crear una imagen con el tamaño exacto de 512 x 512 píxeles y así mantienes las proporciones exactas. Puede ser una imagen con fondo transparente o de color y el formato puede ser jpeg, png o gif.

Para esto, utiliza un editor de imágenes como Photoshop o en el caso de que prefieras una herramienta gratuita puedes usar alguna de estas:
www.pixlr.com/editor/
www.canva.com
www.picmonkey.com

Paso 2

A partir de WordPress 4.3, puedes añadir un favicon desde el área de administración de WordPress (escritorio).

Simplemente vete a: Apariencia » Personalizar y haz click en “Titulo del sitio”. Aqui verás la opción de Cargar el “icono del sitio”.

Si la imagen que has elegido es demasiado grande, WordPress te permitirá cortarla en este momento.

Apariencia, personalizar, titulo del sitio en WordPress

Paso 3

Guarda los cambios, refresca tu página y voilà!
Ya puedes ver el Favicon en acción en tu página web o blog.

También puedes visitar tu sitio web en un dispositivo móvil y desde el menú del navegador, seleccionar “Agregar a pantalla de e inicio”.  Verás que se añade tu icono a la pantalla de tu movil entre el resto de las aplicaciones.

Nota: Para versiones anteriores de wordpress, también puedes utilizar el pluggin all in one favicon

Espero que te sirva este post y te animes con el tuyo. Ya sabes que si te parece util, agradezco que lo compartas en tus redes.

 

Si te gusta, comparte:Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on Pinterest

Deja un comentario