¿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.
Si no se indica ninguno en concreto es probable que salga uno que ya te venga con tu theme o que salga un recuadro de puntos vacío, porque no hay favicon o no se puede reconocer.
Habrás visto muchos en multitud de páginas. La gracia es tener un icono que sea como un “mini-logo” de tu sitio web y si no hay parte gráfica alguna en lo que te representa sino que es todo texto, pues suele ponerse una letra inicial mayúscula, por ejemplo.
El tema está en que un favicon es una archivo de imagen con una extensión particular, en concreto la extensión “.ico” (muy recomendable guardarlo exactamente como “favicon.ico”)
Para que quede bien esa imagen debe tener unas medidas concretas: puede ser de 16×16 pixels, aunque yo te recomiendo que sea mejor de 32×32 pixels.
¿Qué ocurre? Pues que a priori no tienes forma de crear una imagen con esa extensión, de no ser que te busques un poco la vida. Pero que no cunda el pánico, que te voy a explicar diferentes formas de crear un archivo de imagen con esa extensión para que puedas personalizar tu favicon de una vez.
¿Cómo crear un favicon con Photoshop?
Si utilizas Photoshop, redimensionar tu logo o icono a 32x32px no te será complicado.
Una cosa bien hecha, sería tener ese icono en una capa y el fondo transparente, como si fuéramos a preparar un PNG. Porque sino, de no ser que tu logo sea un cuadrado, tendrás tu silueta del icono pero con un fondo blanco rellenando el recuadro, y no queda bien. Cuando guardemos el .ico, podrás indicarle que guarde la transparencia del fondo.
Qué pasa, pues que cuando vas a “Guardar como” no tienes el .ico entre las extensiones a seleccionar, como pueden ser un JPG, un TIFF o un PNG. Pero hay una solución.
Hay que
descargarse este archivo. Descomprimes y tienes uno llamadoICOFormat.8bi, el cual debes pegar en la siguiente ruta: “C:\Archivos de Programa\Adobe\Adobe Photoshop\Plugins\Formato de Archivos”
Esa ruta puede variar, dependiendo de la letra de vuestra unidad (que no tiene porque ser C), por el nombre de la carpeta “Archivos de programa” o por la versión de Photoshop, pero con eso os hacéis una idea de dónde colocar el archivo.
Una vez que tengas copiado ahí ese archivo, funciona como un plugin queagregra la extensión .ico en el desplegable de extensiones a elegir. Así de fácil.
Insisto: no es 100% imprescindible, pero te vas a ahorrar muuuchos problemas si en lugar de ponerle cualquier nombre, lo llamas exactamente “favicon.ico”. Y más si trabajas con WordPress.
Esta es la opción más complicada y profesional de crear tu favicon en .ico para después subirlo a tu web, pero si te pierdes con algunas de estas cosas puedes probar con algunas herramientas de creación online que quizá te resulten más fáciles.
¿Cómo crearlo de forma online?
Hay unas cuantas herramientas que te permiten subir una imagen a su web. Ellos se encargan de generar el archivo en extensión .ico y hacer que sea un archivo descargable.
No voy a entrar en detalle porque es demasiado sencillo, pero te aconsejaría que el archivo de imagen que subas esté más o menos a tamaño o por lo menos que sea de proporción cuadrada, porque la herramienta online se va a limitar a forzar tu archivo al tamaño que necesite y a funcionar.
Como digo hay un montón de sitios web que hacen esto, te dejo enlaces de dos de ellos:
Cómo insertarlo para que aparezca en nuestra web
Esta es la pregunta del millón: cómo y dónde meter el maldito archivo para que se sustituya nuestro favicon actual.
De nuevo te voy a dar dos opciones, para que escojas la que te resulte más sensilla: por FTP y desde tu cPanel.
La historia es que tienes que subir tu archivo “favicon.ico” a tu servidor.
Yo te voy a hablar del caso de estar trabajando con WordPress nuestro blog, y más concretamente trabajando con Genesis y un child theme.
No obstante, la ruta donde meter ese archivo debería de ser la misma o muy similar para cualquier theme, porque se trata de sustituir o incluir ese archivo dentro de la carpeta “images” de nuestro theme.
En el caso de Genesis con child theme, yo para asegurarme lo que hago es incluirlo en ambas carpetas. Es decir:
wp-content/themes/Genesis/images/favicon.ico
wp-content/themes/Metro-pro/images/favicon.ico
Dependiendo de cada caso, en lugar de Genesis o Metro-pro pues será el nombre de tu theme actual.
Meter ahí ese archivo como digo se puede hacer por FTP o por el cPanel.
