¿Sabes para que sirve un favicon en WordPress? Es un pequeño icono que se muestra en el navegador y que puedes ver en esta misma página arriba del todo, en las pestañas donde aparece la información de la página web.
Viene de la palabra inglesa favorites icon, o lo que es lo mismo, icono de favoritos y se emplea para identificar fácilmente la página web en los marcadores de favoritos de tu navegador.
Si navegas habitualmente por Internet podrás observar que muchas páginas web no lo llevan, es una tarea pendiente para muchos, o bien porque no saben cambiarlo, o porque no tienen las herramientas necesarias para crear uno, o lo van dejando y dejando y se les olvida.
Es importante tener uno para que tu página web destaque entre el resto de webs e identificarlo entre la marabunta de páginas que tienes en favoritos, para ello voy a ayudarte a crear uno de una manera muy sencilla.
Ya sabes que tener un blog descuidado resta visitas, y el favicon en WordPress es un elemento importante para tu marca o negocio, has de cuidar este tipo de detalles, que aunque sean pequeños, cuentan mucho para la audiencia, no queremos generar mala impresión ¿verdad?.
En este tutorial te voy a enseñar cómo con dos sencillos pasos puedes crear y cambiar el favicon, que también te va a servir si estás usando un Genesis Child Theme de StudioPress.
Pasos para crear un favicon en WordPress
Diseño previo, la imagen
Como he comentado antes, el icono de favoritos no es más que una imagen de tamaño reducido, generalmente 16×16 o 32×32 píxeles, con lo que sería ideal que primero hicieses el logotipo a un tamaño mayor usando algún programa de edición gráfica como Photoshop, después ya nos encargaremos de reducir el tamaño.
Para que el icono se vea correctamente en la barra de favoritos del navegador, te aconsejo que:
- Diseñes primero la imagen con Photoshop y lo guardes en formato conocido png, jpg. Si el fondo es transparente mucho mejor.
- No sobrecargues demasiado el diseño, ya que cuando lo reduzcas a 16×16 puede quedar borroso, como una mancha donde no se distingue nada y eso no es lo que buscamos ni lo que nos interesa en absoluto. Utiliza lineas simples y finas. Cuidado con los colores y las formas.
- Que esté relacionado con la temática de tu página web. Si llevas una web o un blog, por ejemplo de Fórmula 1 o coches, no diseñes una flor xD.
Puedes usar el logotipo de tu web si no quieres complicarte mucho.
Creando el favicon
Ahora que ya tenemos una imagen preparada para convertirá en icono, utilizaremos la herramienta gratuita online favicon.ico Generator. La aplicación de esta web es sencillísima de usar y generar el icono se convierte en una tarea que cualquiera puede hacer.
Una vez hayamos entrado en la página de favicon.ico Generator, tenemos dos opciones para generar nuestro icono:
- Importando una imagen previamente diseñada. Facilito. Esta es la opción que yo recomiendo. Tan solo deberemos subir el diseño previo que creamos con Photoshop en el primer paso. Automáticamente nos generará un archivo .ico, listo y preparado para insertarlo en WordPress. Para hacerlo de esta manera, tendrás que seleccionar la opción Import Image.
- Diseñándolo a mano. Para artistas: Seguramente esta opción sea un poco mas costosa de hacer, pero si tienes buenas ideas y sabes lo que buscas, pueden salirte cosas muy chulas. En la página de favicon.ico Generator aparece un recuadro donde podemos dibujar con un lápiz. Ahí es donde se diseña. Podemos elegir colores y transparencias para hacer volar nuestra imaginación. Ahora es cuestión de ir dibujando la idea que teníamos en mente.
Como cambiar el favicon en WordPress
Si has llegado hasta aquí, ya tendrás tu icono en formato .ico listo para insertarlo en WordPress.
Tenemos dos maneras de colocar nuestro favicon en WordPress, una es usando un cliente FTP y enviarlo a la carpeta correspondiente, y el otro es por medio de un plugin. Veamos los dos métodos:
Método 1, el recomendado, usando el personalizador de WordPress
A partir de la versión 4.3 de WordPress, es posible cambiar el favicon con unos toques de ratón, no hay que crear ningún archivo .ico, tan solo subir una imagen de 512 pixels de ancho y recortarlo desde el personalizador.
Para realizar todo el proceso hay que ir a Apariencia -> Personalizar -> Identidad del sitio.
Método 2, subirlo por FTP
Si nunca has usado un cliente FTP o no sabes de lo que te estoy hablando, te recomiendo que le eches un vistazo a este artículo donde explico su funcionamiento.
Para insertar nuestro favicon en WordPress con un cliente FTP, nos conectamos al servidor y subimos la imagen a la carpeta donde tenemos el favicon que nos viene por defecto.
La ruta de WordPress sería wp-content/themes/tu-plantilla/images. Sobreescribimos y ya tendríamos colocado nuestro icono de favoritos.
¡OJO! Este método es muy sencillo de hacer, pero tiene una pega, y es que si actualizas la plantilla vas a perder el icono que has subido, así que desactiva las actualizaciones para no perder el icono o usa un child theme de Genesis. Este tipo de plantillas hereda la hoja de estilo del tema padre y no se pierden las modificaciones cuando se actualiza.
Método 3, usando el plugin Jetpack
Este es el método que yo recomiendo, usando un plugin te aseguras que si la plantilla se actualiza, no pierdes los cambios.
El plugin que te recomiendo es Jetpack, es un superplugin, la navaja suiza de WordPress. Con el vas a conseguir hacer filigranas con tu blog, pero vamos al lío que me enrollo xD
Para cambiar el favicon en WordPress primero hay que activar la opción en el panel de Jetpack. Nos iremos al menú Jetpack -> Configuración y buscaremos el icono del sitio, actívalo para pasar al siguiente punto.
Ahora nos dirigimos a la sección Ajustes -> Generales y al final de la página tendrás disponible la opción de añadir un nuevo icono del sitio. Tendrás que subir la imagen que habías creado al comienzo del tutorial. Con esto ya tendrás listo tu flamante favicon en WordPress.
***
Cambiar el icono de favoritos es una tarea sencilla, si acaso lo mas complicado de hacer es el diseño previo que siempre podemos solucionar, si no tenemos mucha idea de diseño gráfico, cogiendo el logo del blog y adaptarlo un poco para que encaje como icono haciendo unas pequeñas modificaciones. Recuerda que ha de ser claro, limpio y que sea una imagen representativa de tu blog.
¿Te ha sido útil el tutorial?, ¿algún problema con tu favicon en WordPress?, ¡comenta para que pueda ayudarte!
Ya realice el cambio en mi celular me sale mi icono pero desde la computadora me sale la G deGenesis Framework, quisiera saber como eliminarla.
Hola Elvia, puedes subirlo al directorio /images de tu theme o puedes modificarlo desde el archivo functions.php
//* Do NOT include the opening php tag shown above. Copy the code shown below.
//* Display a custom favicon
add_filter( 'genesis_pre_load_favicon', 'sp_favicon_filter' );
function sp_favicon_filter( $favicon_url ) {
return 'http://www.mydomain.com/wp-content/themes/genesis/images/favicon.ico';
}
Un saludo y gracias por comentar!
Muchas gracias, me ha ayudado a cambiar el favicon de mi sitio web. gran trabajo
Hola Alex, me alegro que te haya sido de ayuda.
Un saludo!
Un tutorial fácil y sencillo de seguir. Muchas gracioas, me ha sido de mucha utilidad.
De nada Sergio.
Un saludo y gracias por pasarte a comentar!
Hola Alfonso:
en principio gracias por tu tiempo y por el artículo.
He seguido los pasos como has dicho pero al llegar a este lugar:
Icono de sitio
Añade un icono de sitio para tu web
More
Configura tus ajustes de Icono de sitio
y al hacer clik en «Configura…» (la única opción por cierto) me redirige automáticamente a la página de «Ajustes Generales» de WordPress… he activado el icono de sitio previamente y ha desactivado el AdBlock (no sé si tiene trascendencia pero no se me ocurre qué puede ser) y no he logrado que me de la opción de subir el favicon… he repasado con cuidado los pasos varias veces y no lo consigo… te agradecería cualquier pista al respecto.
Un saludo y gracias de nuevo,
Diego
Hola Diego, estás usando el plugin Jetpack? Ahora con las nuevas versiones de WordPress es mucho mas sencillo cambiarlo (tengo que actualizar el tutorial 😉 ), tienes que ir a Apariencia -> Personalizar -> Identidad del sitio, ahi puedes seleccionar el icono o subir uno nuevo.
Un saludo!
Oooooohh Yeah!
Muchas gracias, tío, ahora sí.
Te agradezco el tiempo que te has tomado. Si alguna vez te pasas por Zaragoza y te gusta el buen rock & roll ya sabes dónde mirar.
Salud!
Hola, Alfonso.
Para mi web realizada con WordPress no consigo que se visualice mi icono establecido, Tengo activado en Apariencia/personalizar/…
También tengo el plugin Jetpack.
El asunto es que curiosamente el icono se visualiza cuando estoy editando la página web, pero al salir de la edición de nuevo reaparece el icono típico de la «hoja de papel».
En realidad, desde Jetpack no veo la opción que indicas de añadir el icono.
¿me puedes indicar qué hago mal?
Perfecto! muchisimas gracias por la información! Muy bueno el articulo!
Buenos días Alfoso excelente tu aporte, podrias explicar como diseñar un acceso directa a nuestra web y como hacer que se cree un acceso en el escritorio de quien visita nuestra web? desde ya muchas gracias y espero tu ayuda
Genial! En 2 minutos lo tenía hecho siguiendo tus indicaciones. Muchas gracias 🙂
Me alegro, gracias por tu comentario!
Buen artículo. Muchas gracias. Pienso que es la mejor información disponible al respecto.
Gracias por tu comentario Ruddy. Un saludo.
Buenos días, tengo una duda: he visto en alguna web que el título de la pestaña, cambia cuando te vas de la página a otra pestaña. Por ejemplo: título de la página -> bodas en Madrid. Si salgo de esta pestaña y me voy a navegar por otra pestaña nueva de otra cosa, ese título me cambia a -> ¡Ey, vuelve!; por ejemplo. Para llamar la atención. ¿Eso cómo se haría?
Me uno a la misma pregunta, y con el favicon en movimiento? alguien sabe como hacerlo ? lo he intenado hacer con gif pero se queda la foto plasmada y no se mueve….¡Gracias!