¿Que es el favicon? ¿es importante tener un favicon ?

¿Que es el favicon? ¿es importante tener un favicon ?

El favicon es un icono para diferenciar unas pestañas de otras abiertas de el explorador, su nombre viene de «favorite icon«.
Al tener un tamaño tan pequeño se suelen elegir elementos muy visuales que normalmente coinciden con partes del propio logotipo o parte de é para hacerlo mas reconocible.

¿Es importante tener un favicon ?

Y ahora dirás pues vaya tontería es lo del favicon: ¿y si no lo pongo?, no pasaría nada hay muchas webs que no se molestan en ese pequeño detalle… pero como internauta poder ver en las pestañas un icono para encontrar lo que busco rápidamente es muy de agradecer.

¿Y si no pongo el icono de la pestaña?

Puedes no usarlo pero verás que la mayor parte de las webs lo utilizan, prueba a tener varias pestañas abiertas como en los años 2000 y vuelve a visitar la página en la que estabas; sin favicon es un suplicio, a parte de hacer las páginas mas accesibles sirve para identificar de un vistazo la pestaña buscada y para ordenarla si eres muy friki por contenidos.
Hasta hace poco yo pensaba que la función del favicon era simplemente estética, pero desde unos 3 años comenzó a ser importante para el SEO de las páginas web OMG!!!, no obstante algunas herramientas de análisis de SEO le dedican un apartado en sus check list, incluso algunos plugin de SEO tienen la función de cargar el favicon en wordpress.
La explicación es muy lógica el favicon hace que tu página resalte entre las pestañas abiertas y también te distingue en las páginas favoritas.

Si tu no creas tu propio favicon.ico normalmente o el hosting o la plantilla suelen tener uno …

Características del favicon.

Siempre lo tienes que nombrar favicon si no lo haces no funciona, hay en plantillas que lo puedes cargar con cualquier nombre pero puede que luego algún navegador web no lo vea.
En blogger se carga desde la pestaña Layout y siempre es en formato ico. que es el formato nativo de los iconos hace muchos años.
Existen plugins en wordpress para cargarlo aunque la mayor parte de los themes ya incluyen la opción de favicon, pero si el tuyo no la tiene integrada puedes usar otro plugin para la colección.
El formato es siempre cuadrado yo suelo usar 64x64px es el mas común aunque hay personas que usan 100x100px pensando en el formato retina de apple.

Consejos para tener un favicon inconfundible.

Elige una imagen o un detalle muy definido, es preferible un icono pequeño no elijas textos porque no se leen y las fotos tampoco se entienden muy bien.
Si es vectorial, claro, conciso y funciona bien en pequeño es ideal, no te olvides del color porque si tu esquema de color está muy definido cuenta con él para el favi.
Según que plugin o la manera de subir el favicon te pedirá un formato u otro para el tipo de imagen, normalmente el formato es ico, aunque también puede ser png para guardar la transparencia.
Usa fondo transparente para el favicon, tanto el formato ico como png lo permiten.
Su tamaño suele ser 32x32px aunque con los dispositivos retina ha aumentado el tamaño, lo importante es que no supere los 100px y sea de tamaño cuadrado.
 

Editores para hacer tu favicon:

www.256pixels.com Puedes subir una imagen o divertirte haciendo pixel art con su grid que te recordará al buscaminas, a mi me encanta para hacer dibujillos pinchando… si haces hamma beads te va a gustar.
www.favicon.cc Esta herramienta es la mas completa y la mas usada para hacer favicones.
www.favicongenerator.com Subes la imagen y la convierte en favicon.
Por supuesto en Photoshop, Fireworks o illustrator  también puedes hacer una imagen png, pero existiendo aplicaciones para ello y gratis.

Como añadir el favicon manualmente sin plugins.

Para WordPress.com al no poder usar plugins hay que hacerlo de otra forma añadiremos código a la plantilla.
Primero sube la imagen mediante el panel de medios, se debe llamar favicon.
Vamos a apariencia>editor
En editor buscamos el archivo header.php o cabecera, buscamos la etiqueta </head> y en la linea anterior a esta etiqueta insertamos este código:

<link rel=”icon” type=”image/png” href=”/favicon.png” />

Si el formato que has elegido es ico cambia el nombre de la extensión, muy importante debes hacer esto en la plantilla cada vez que tu plantilla se actualice.
Este método es el mismo que se usa para las páginas web.
Como puedes ver este pequeño detalle es mas importante de lo que creemos porque puede ayudarnos a ser mas reconocibles, cualquier elemento que ayude a que nos diferenciemos por pequeño que sea debemos cuidarlo mucho.