Cómo crear un favicon para tu Blog o Web

¿Estás buscando cómo crear un favicon para tu blog o web y andas perdido?

Si en artículos anteriores ya hablamos de otros archivos importantes de toda web como el robots.txt y el sitemap.xml, en esta ocasión toca centrarse en el diseño. Y qué mejor que hacerlo con el archivo favicon.ico.

Pues has llegado al sitio correcto porque en este artículo te voy a contar todo sobre el archivo favicon.ico.

Qué es un favicon

Y, ¿qué es un favicon? Te preguntarás.

Pues la verdad es que traduciendo y con un poco de lógica se puede entender perfectamente qué es un favicon.

Favicon está compuesto de «fav» (favorito) y de «icon» (icono); así que un favicon es ese icono que se muestra en las páginas que has guardado como favoritos o en marcadores de tu navegador web.

Sin embargo, el favicon resulta mucho más evidente en los iconos de las pestañas de los navegadores de internet.

Ese pequeño icono que se ve no es más que una pequeña imagen de 16 x 16 px (píxeles), que se aloja en los archivos de tu web con el formato .ico.

Ahora bien, si estás empezando con tu blog o web es muy probable que no tengas ningún favicon o que se muestre una de la plantilla o tema que instalaste en tu CMS.

Así que, como es lógico, querrás poner un favicon que se identifique con tu marca o con tu blog.

Aquí es donde entra el primer conflicto.

¿Qué imagen usar como favicon?

Lo primero que debemos hacer es escoger qué imagen será la que identifique nuestra página web en las pestañas del navegador.

Como hemos visto, el favicon es muy pequeño, así que esta imagen no debe tener muchos detalles ni ningún texto.

En este punto tienes dos posibilidades:

1. Usar tu logotipo.
2. Utilizar la primera letra o la imagen más representativa de tu logo.

Siempre que tengas un logotipo y que no incluya texto, deberás decantarte por la opción número 1.

Tienes que tener en cuenta que necesitas una imagen cuadrada, así que si tu logotipo no encaja bien en un cuadrado (como en el caso de los logotipos retangulares), tu favicon se deformará y tendrás que pasar a la opción 2.

La opción dos es la más común: se trata de usar la imagen más representativa de tu marca o la primera letra de esta.

Te recomiendo leer: Cómo crear un logo sin ser diseñador gráfico.

Aquí tienes el ejemplo de Youtube, su logo y su favicon no es el mismo pero son claramente identificables al mismo sitio:

Cómo crear un favicon

Si quieres saber cómo crear un favicon para tu sitio web solo tendrás que crear una imagen cuadrada, adaptarla a ciertas medidas, pasarla a formato .ico y subirla con el nombre favicon.ico al directorio de tu sitio en tu alojamiento web.

No te preocupes que ahora lo vemos más en detalle.

En el punto anterior ya hemos elegido la imagen adecuada para convertir en favicon. Así que ahora toca ver cómo crear el archivo favicon.ico.

Aquí es donde empieza el problema: el formato .ico no es muy utilizado, así que convertir una imagen en formato .ico no es tan fácil si no sabes cómo.

Para crear un favicon.ico , y según la plataforma que utilices o la manera que más te guste, tienes las siguientes opciones:

• Crear un favicon con Photoshop y subirlo a los archivos de tu sitio.
• Hacer tu favicon con una herramienta online gratis y cargarlo en los archivos de tu web.
• Crear un favicon en WordPress.

Como uso WordPress, y es el CMS que recomiendo y usa la mayoría, es el punto por el que voy a empezar y en el que me voy a centrar.

«¿Quieres decir que no vas a explicarme cómo crear y añadir un favicon a mi web si no es de WordPress?» Por supuesto que no, si sigues leyendo tendrás toda la información para generar un favicon para tu sitio web.

Cómo crear y cambiar un favicon en WordPress

Bien, empezamos por la forma más fácil de todas. Desde las últimas versiones de WordPress, puedes crear un favicon en WordPress sin plugins, sin modificar el formato de la imagen y sin meter nada de código.

Lo único que necesitas es tener la imagen escogida en unas medidas de 512 x 512 px. Con Photoshop (de pago) o Gimp (gratis) puedes hacerlo muy fácilmente.

Una vez lo tengas, vete al menú lateral de WordPress y sigue esta ruta: Apariencia >> Personalizar:

Una vez dentro dirígete a la pestaña de Identidad del sitio.

En esta pestaña deberías tener puesto tu logo, el título y la descripción de tu web. En la parte de abajo verás la sección de Icono del sitio:

Si no te sale esta parte es porque tienes WordPress desactualizado, así que asegúrate de hacer una copia de seguridad y actualizarlo a la última versión.

[thrive_leads id=’1399′]

Solo queda seleccionar la imagen que quieras como favicon con un tamaño de imagen de 512 píxeles de ancho y alto. Dale a Guardar y publicar y ya tendrás tu favicon funcionando.

Como ves, si tienes WordPress no tendrás que haber modificado la imagen ni haber entrado a los archivos de tu web. Esta es la forma más sencilla y rápida de crear un favicon para tu web.

Pero, ¿y qué pasa si por lo que sea, esto me ha dado algún error o yo utilizo otra plataforma que no sea WordPress?

En ese caso tendrás que ceñirte a crear un favicon con los siguientes pasos:

1. Elige una imagen y redimensiónala a 32 x 32 píxeles.
2. Transfórmala en .ico
3. Súbela a los archivos de tu servidor

Sigue leyendo porque si tienes WordPress y esta solución no te ha valido, tendrás que seguir los pasos que te he puesto y te explico a continuación.

Cómo crear el favicon con Photoshop

En este caso, lo primero que hay que hacer es redimensionar la imagen que usarás como favicon a unas dimensiones de 32 x 32 píxeles. También lo puedes hacer si la pones a un tamaño de 16 x 16 píxeles pero te recomiendo ponerlo a 32 px.

Como ves, te queda una imagen muy pequeña, así que si no te gusta cómo queda vuelve a diseñar la imagen que quieras convertir en favicon.

En cuanto al formato de la imagen puedes usar jpg, gif y png, pero te recomiendo png en vez de jpg o gif. Con el formato png puedes quitar el fondo (fondo transparente) de la imagen, de forma que el favicon solo sea el contenido sin el fondo. Si te decantas por jpg, el favicon se verá cuadrado y con fondo.

Ahora que ya tenemos la imagen redimensionada llega el problema: ¿Cómo podemos convertir una imagen en icono? Recuerda que necesitamos el formato .ico para añadir un favicon.

Pasos para convertir una imagen en icono con Photoshop

Paso 1: descarga el archivo para guardar en formato .ico

Photoshop (al igual que la mayoría de herramientas) no nos permite convertir de jpg a ico o de png a ico.

Para solucionar esto solo queda una opción: descargarse un archivo para Photoshop que nos permite guardar como iconos.

• Pulsa aquí para descargarte el archivo para cualquier versión de photoshop de windows 64 bits.
• Aquí tienes el mismo archivo para la versión de 32 bits de Windows.

Paso 2: pega el archivo en los plugins de Photoshop

Una vez tengas el archivo descargado, descomprímelo donde quieras y quédate con el archivo ICOFormat64.8bi.

Este archivo lo tienes que pegar en la instalación de tu Photoshop que por defecto será esta (variará dependiendo de donde hayas instalado tu Photoshop):

C:\Archivos de Programa\Adobe\Adobe Photoshop\Plugins\Formato de Archivos (si lo tienes en inglés, la carpeta final será «File Formats»)

En el caso de las últimas versiones de Photoshop, la ruta donde deberás pegar el archivo será algo parecido a esto:

C:\Program Files\Adobe\Adobe Photoshop CC 2017\Required\Plug-Ins\File Formats

Paso 3: convertir la imagen en icono

Con el archivo descargado ya puesto en su lugar solo queda abrir Photoshop (o reiniciarlo si ya lo tenías abierto).

Para convertir a ico la imagen que tenías guardada con las dimensiones que te conté, solo tienes que darle a Archivo >> Guardar Como y seleccionar la extensión .ICO en el desplegable.

¡No te olvides de guardar el icono con el nombre favicon.ico!

IMPORTANTE: si las dimensiones de tu imagen no son pequeñas, no te saldrá esta opción para guardar en formato ico. Los tamaños más comunes para redimensionar la imagen son 16×16, 32×32, 48×48 o 64×64 (imágenes cuadradas).

Generar el archivo favicon.ico gratis con una herramienta online

Si no tienes WordPress, quizás esta es la forma más fácil de crear un favicon gratis.

Estas plataformas se encargan de crear un favicon online procesando la imagen que subas para convertirla en icono web (con el formato .ico) para que puedas subirla a los archivos de tu web.

Hay varios sitios web para crear iconos online pero sin duda, los más populares son:

• Favicon Generator
• Favicon ico Generator

El funcionamiento es el mismo para las dos plataformas. Importas una imagen (te recomiendo usar las dimensiones de 32 x 32 píxeles o al menos dimensiones pequeñas y que formen un cuadrado) y te devuelven tu favicon.ico de 16 x 16 px que tendrás que descargar.

Subir favicon.ico a los archivos de tu web

Ya por fin tenemos el famoso favicon.ico, así que el último paso es insertarlo en el directorio de nuestra web para que aparezca el icono.

Para meter el archivo en el servidor de tu sitio web tienes dos alternativas:

• Utilizar el Cpanel
• Subir el favicon por FTP.

La mayoría de empresas de hosting cuentan con el mismo panel de control (llamado Cpanel) y además te dan la opción de crearte una cuenta FTP para subir los archivos a tu servidor desde tu ordenador con un cliente FTP como filezilla.

Uses la forma que uses tendrás que ir a los archivos del tema o plantilla y subir el archivo «favicon.ico» en la carpeta de imágenes.

La ruta de acceso al favicon varía mucho dependiendo de la plataforma.

En mi caso utilizo WordPress y un tema hijo de Génesis, así que la ruta es:

wp-content/themes/Metro-pro/images/favicon.ico

Si eres de WordPress solo tendrás que seguir la ruta cambiando la carpeta «Metro-pro» por la del nombre de tu plantilla de WordPress.

En el caso de usar otro CMS, el proceso es el mismo: llega hasta las imágenes de tu tema y pega el archivo favicon.ico.

Si dudas sobre dónde encontrar el lugar correcto para pegar tu favicon lo mejor es consultarlo con tu hosting.

Y listo, ya tienes una imagen identificativa de tu web con el favicon.ico. Ahora todo aquel que navegue por internet verá el icono de tu sitio web en la pestaña y en los marcadores o favoritos de su navegador.

Espero que te haya sido de utilidad esta guía sobre cómo hacer un favicon y no olvides comentar y compartir si te ha sido de ayuda.

¡Nos leemos!