¿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!
Deja una respuesta