¿Quieres saber cómo crear un favicon personalizado para tu blog?
Hay varias formas de hacerlo y sobre todo varias cosas a tener en cuenta.
En el post de hoy vamos a ver:
- Qué es un favicon
- Cómo crear un favicon con Photoshop
- Cómo crearlo con una herramienta online
- Cómo insertarlo para que aparezca en nuestra web
Dentro de cómo insertarlo, veremos dos formas de hacerlo: por FTP y por el cPanel.
¿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 llamado ICOFormat.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 que agregra 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:
Otra opción interesante sería de la crear tu favicon con Logaster.
En este caso, de la que te haces el logotipo con ellos te puedes generar el archivo necesario a subir que será tu favicon también.
Esta web son el clásico sitio donde puedes hacer tu propio logotipo en base a plantillas, de forma online y viene bien si no tienes mucha idea de diseño gráfico, pero como digo, también nos serviría para el tema de crear el favicon.
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.
Te dejo un video donde te explico todo esto que hemos visto:
Cuida los pequeños detalles
Fíjate que tontería tan pequeña ha dado para un post muy bonito y útil.
En realidad, no hay cosas pequeñas en la personalización de tu blog. Los detalles son muchas veces lo que marca la diferencia.
Sabiendo ya cómo hacerlo, el no hacerlo sólo puede denotar una cuestión de pereza o falta de interés. Y si estamos hablando de la imagen de tu blog, esas palabras no pueden aparecer por ningún sitio.
Ahora que ya sabes cómo crear un favicon personalizado para tu blog, saca 20 minutos un día y ponte a ello.
Verás que es muy fácil y le da un punto muy chulo el ver tu icono propio en el navegador.
Si te ha parecido un post que puede ser útil para otras personas, te agradezco enormemente si lo compartes 😉
20 comentarios en “Cómo crear un Favicon personalizado para tu blog”
Excelente explicación, sin embargo me fui a lo mas rápido y fácil , Gracias
¿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:
Favicon Generator
Favicon.ico Generator
Gracias por la aportación Carlos, un abrazo.
Muchas gracias por este post, me ha sido muy útil. Genial tu narrativa. Saludos
Me alegra que te haya servido Milva.
Un saludo 🙂
Un artículo mas que completo!!! Ha sido el mas extenso y explícito que he encontrado… felicitaciones por el gran trabajo Omar 😉
Si me permites, quiero compartir un directorio web que funciona en base a favicons, en el que podemos añadir nuestros websites con fines de SEO y tráfico…
https://www.favicones.com
Un saludo,
Hecho! Mañana lo subo a la web 🙂 Muchas gracias por la info! Más fácil imposible 🙂
Ya tengo mi favicon.ico personalizado. Al subirlo con el Filezilla, se quedaba todo como si nada, pero al subirlo con el cPanel ha funcionado. Misterios de la tecnología…
Muchas gracias por este post! Estoy como loca venga a saltar de post en post porque todos me parecen interesantes, sabes cómo crear buenos contenidos!!
Enhorabuena por el blog y por tu trabajo Omar, sigo investigando más entradas!
Hola Rosa, te respondo en este a tus tres comentarios 😉
Muchas gracias por seguir el blog, de verdad que me alegra ver que te gustan los post y sobre todo que te sirven para aprender cosas que quizá descoocías, de eso se trata.
Un saludo!
Gracias Omar,
Ya cree mi Favicon con una de las herramientas online que pasaste y lo pude colocar en la página, sin mucho rollo técnico, con las propias opciones de escritorio de Wp lo pude hacer.
Subí el favicon a medios, copie la URL y la pegué en campo favicon de mi tema.
Un saludo
Genial Andrea. Si, dependiendo del theme de cada uno puede existir una opción de indicar un ruta URL de donde coger el favicon.
Las opciones que explico más técnicas son para casos y themes en lo que esa opción no existe.
Un saludo.
Omar, creo que lo más importante tal y como apuntas al principio es la visibilidad del favicon. Si al convertir un logo estándar en favicon luego no se aprecia nada, no tiene mucho sentido ponerlo. La situación ideal sería crear un favicon del signo de la marca, si lo tuviera, pero si no, como dice Omar es colocar la inicial o iniciales representativas del logotipo. Y hablando de logotipos, te sugiero un nuevo tema para el blog: cómo crear un logotipo pensando en un proyecto blog/web …para que pueda reconocerse en aplicaciones de pequeño tamaño, etc
Saludos
Sip, por eso decía que si no se va a apreciar… no merece la pena.
Apuntada queda la idea de post, gracias 😉 Un saludo.
Tienes muchísima razón, Omar, los pequeños detalles marcan la diferencia. Como siempre, buenísimo y elaborado tu post 🙂
Gracias Raquel, veo que en tu blog ya tienes personalizado el favicon 😉 Un saludo.
El tuyo queda muy bien y es muy buena opción de marca personal el que seas tu mismo el favicon, más aún si está recortado el fondo… Quedas como flotando, no parece la típica foto carnet pegada, está muy bien!
La verdad es que siendo tan pequeño el favicon la cara no se distingue, pero bueno como es la foto que he puesto siempre en el blog, se sabe cual es 😉
Gracias!
Má fácil todavía sin utilizar la alta tecnología de Microsoft 🙂 … una vez tienes el png, le cambias la extensión a mano por .ico y listo.
Un saludo
Muy bien aporte y como dices en los detalles esta la chicha y ayudas a muchos a mejorar su blog.
Una forma de guardar como ico es una vez que tienes un fichero png con el paint de windows si tienes guardar como ico. Es un paso más pero una opción como otra. Y para subirlo hay temas que te da esa opcion. Los temas de gavick que yo uso tienen para personalizar el favicon entre las opciones del tema.
Un saludo.
Gracias por tus aportaciones Javier, de Paint no me digas porque creo que no lo abro desde el 96.
¿Para cuando unas buenas reviews de Gavick en tu blog? 😉
Un saludo.
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de Haciaelautoempleo) dentro de la UE. Ver política de privacidad de Webempresa. (https://www.webempresa.com/aviso-legal.html).
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.