Cómo crear un Favicon de 3 maneras difentes en 5 MINUTOS

Cómo crear un favicon es una de las dudas que mucha gente tiene a la hora de crear su propio blog o web en WordPress.

También es una de esas cosas que suelen pasar desapercibidas por muchos novatos que no habían visto ni oído esa palabreja hasta que la ven de pasada entre las opciones de WordPress.

¿Favicon? ¿Qué coj***s es favicon? Bueno, paso palabra y me voy a otra cosa.

Pues bien, hoy te quiero enseñar cómo crear un favicon gratis, en qué formato tienes que crearlo (favicon ico, png, etc)… pero antes, vamos a estudiar un poco de teoría para los que aún no saben qué quiere decir esa palabra tan extraña.

¿Qué es un favicon de una web?

El favicon web es la pequeña imagen que aparece en la pestaña del navegador junto al título de la página que tienes abierta en ese momento.

Vamos a verlo con un ejemplo:

¿A que ahora ya vas entendiendo mejor?

Aunque no es el único sitio donde puedes ver el favicon de una web. También cuando marcas una URL como favorita en marcadores se guarda junto con su favicon, como puedes ver en la siguiente imagen:

De hecho, si nos fijamos en su nombre, podemos ver que está compuesto por “fav”, que viene de “favorite”, e “icon”, que viene de “icon” (¿de dónde si no?).

Así que su nombre guarda alguna relación con el hecho de que al guardar una página en marcadores (favoritos) aparezca el favicon.

De un simple vistazo puedes ver de qué web se trata gracias al favicon.

Seguro que alguna vez has tenido 59159846 pestañas abiertas a la vez en el navegador y gracias a los favicons has sabido encontrar la que necesitabas (probablemente Facebook ;)).

En resumen, el favicon es una imagen que representa a tu sitio web, marca, empresa, etc.

¿En qué formato se tiene que crear el favicon?

El favicon se puede crear en cualquiera de los tipos de formatos de imagen más conocidos si lo vas a utilizar en WordPress: ico, png, jpg, etc.

Pero lo más recomendable es que tenga el formato ico o png, principalmente, porque estos dos formatos soportan transparencias. Es decir, puedes poner iconos con un fondo transparente, o lo que es lo mismo, sin fondo.

Si lo crearas en el formato jpg, se vería con un fondo blanco. Fíjate en el favicon que tiene esta misma página. Tiene una forma redonda, ¿verdad? Pues si lo hubiera creado en jpg, se vería un cuadrado blanco alrededor de la redonda, algo así:

Mucho mejor la primera, ¿a que sí?

Aunque claro, si el icono que vas a poner es cuadrado de por sí, en principio podría dar igual que lo generaras en jpg, pero te seguiría recomendando ico o png por la calidad que ofrecen respecto al jpg.

¿Qué icono se debe poner y en qué tamaño?

La siguiente pregunta que te podrías hacer es qué imagen utilizar para generar el favicon de tu web.

Bueno, aquí la respuesta depende del proyecto que vayas a crear, y principalmente, si tiene un logotipo o no.

Normalmente, se suele poner el logotipo que utiliza el sitio web. En el caso de que no lo tengas y lo quieras hacer tú mismo, aquí te explico cómo crear un logo gratis.

Si ya tienes un logotipo para tu web, y este tiene un isotipo (imagen), o incluso un isologo (aquí se explica qué son), lo ideal es que lo utilices como favicon.

Mira en mi web, cuyo logotipo es este:

Lo que utilizo como favicon es simplemente la imagen izquierda. Lo mismo hace prácticamente todo el mundo que tiene un logotipo.

Pero, ¿y qué pasa si tú no tienes un logotipo así?

Puede ocurrir que tu logotipo simplemente sea el nombre de la web, de la empresa, de la marca, o incluso tu nombre propio.

En ese caso, una buena opción es crear un icono con la inicial del nombre y ponerlo como favicon.

Algunas personas que quieren potenciar su marca personal con su web también se decantan por poner una foto de su cara como favicon. Personalmente no es la opción que más me gusta, pero es para tenerla en cuenta si es tu caso.

Otra cosa importante es su tamaño.

Para empezar, el icono que elijas tiene que tener el mismo ancho que alto. Si eliges una imagen que sea alargada y que sea más grande de ancho que de largo, por ejemplo, el favicon no se verá bien en la web.

En cuanto al tamaño, el favicon se muestra en unas dimensiones de 16 x 16 píxeles, por lo que más pequeño que eso no debería ser para su correcta visualización.

Aunque siempre que mantenga la proporción, puede superar esas medidas. Lo más recomendable es crearlo en un tamaño de 32 x 32 píxeles.

Cómo crear un favicon

Ahora que ya te he dado la chapa con la teoría, te voy a explicar de una vez cómo crear un favicon para tu web.

Puedes crearlo de varias maneras. Todos los programas de edición medio avanzada de imágenes (el Paint te podría hacer el apaño, pero no te lo recomiendo) te permiten generarlos fácilmente.

En mi caso, utilizo Photoshop para hacerlos, así que empezaré por explicarte el procedimiento utilizando este programa.

Crear favicon con Photoshop

Partimos de que ya has escogido la imagen que vas a utilizar para generar el favicon. Tienes dos opciones:

1. Crea un nuevo proyecto en Photoshop con un tamaño de 32 x 32 píxeles, inserta la imagen y adáptala a las medidas del lienzo. Elimina la capa “Fondo” para evitar que el favicon se genere con un fondo blanco.
2. Abre la imagen y redimensiónala a las medidas 32 x 32 píxeles.

Una vez lo tengas y hayas comprobado que la imagen está bien centrada en el lienzo y que no tiene fondo, ya puedes guardarla.

Photoshop no permite guardar imágenes en formato ico, así que la mejor opción es guardarla en formato png.

Como ya he dicho antes, el formato png se puede utilizar para generar favicons, pero si lo necesitas tener en formato ico, necesitas convertirlo de png a ico.

Convertir png a favicon ico

Hay plugins para Photoshop que instalándolos podrías convertir la imagen en ico, pero a mí me parece un coñazo habiendo herramientas online que te lo hacen sin necesidad de instalar nada.

Una de ellas es Converticon. Para utilizarla es necesario que tengas Flash Player en el navegador, pero funciona de maravilla.

Al abrir  la web te aparece el siguiente mensaje:

Haz clic en el botón “Get Started” y busca y selecciona el archivo png que quieres convertir a ico.

Pero eso sí, abajo a la derecha tienes que seleccionar “Image (png, gif, jpeg)”, porque si no, no podrás seleccionarlo.

Una vez seleccionado, haz clic en el botón “Export” y te aparecerá una ventana como esta:

Tiene que estar seleccionado “Icon” y puedes dejar marcada la casilla “Original Size”. Al hacer clic en “Save As” podrás guardar el favicon en formato ico 🙂

Crear favicon en WordPress

Aunque yo soy partidario de crearlo de la manera que te acabo de explicar, WordPress te ofrece la posibilidad de generar el favicon automáticamente utilizando una imagen que tengas subida en tu web.

Si es que los creadores de WordPress piensan en todo… ains.

Para ello, tienes que ir a “Apariencia – Personalizar” y abrir la pestaña “Identidad del sitio”.

En la zona inferior verás la sección “Icono del sitio”. Pues bien, con esto se refieren al favicon de la web.

Haz clic en “Seleccionar imagen” y selecciona la imagen que quieras utilizar para generar el favicon. Cuando lo hayas hecho, te ofrecerá la posibilidad de recortarla (en un formato cuadrado) mientras ves en la zona de la derecha cómo quedará una vez recortada.

Cuando lo tengas, recórtala y publica los cambios del personalizador, y ¡uala! Ya tienes tu flamante favicon.

Crear un favicon online

Por último, hay herramientas que te permiten generar un favicon online a través de la imagen que tú quieras.

Una de ellas es Favicon Generator, un generador de favicon muy fácil de utilizar. Sólo tienes que entrar en su web y subir la imagen que quieras convertir.

Hay algunas opciones que puedes modificar. Por ejemplo, puedes elegir si quieres que te genere un favicon para cada dispositivo y sistema operativo, o simplemente que te genere uno sólo con las dimensiones 16×16.

Con ésta última te bastaría, pero si quieres varias medidas puedes seleccionar la primera.

Al darle al botón “Create Favicon” se generará automáticamente y podrás descargarlo a tu ordenador listo para poner en tu web.

Poner favicon en WordPress

Vale, ya has visto tres maneras de crear un favicon: con Photoshop, con WordPress y online.

Si eliges la segunda forma no tendrás que hacer nada más, pero si lo haces utilizando la primera o última forma, tendrás que subirlo a tu web.

Por suerte, es la cosa más fácil del mundo. Sólo hay que seguir los pasos que he explicado para crear un favicon con WordPress.

Antes de continuar, el archivo del favicon no debería ocupar gran cosa, pero si quieres optimizarlo del todo, pásalo por la herramienta TinyPNG para comprimirlo. Aquí te explico cómo comprimir imágenes para web utilizando esta herramienta online.

Prosigamos. Dirígete a “Apariencia – Personalizar”, y dentro de “Identidad del sitio”, en la sección “Icono del sitio” haz clic en “Seleccionar imagen”.

Se te abrirán todas las fotos que has subido en tu web. Simplemente sube o arrastra directamente tu favicon y selecciónalo. Como en teoría, si has seguido todos los pasos anteriores, ya tiene las medidas correctas, no es necesario que lo recortes.

Publica los cambios y ya tendrás tu favicon visible para todo el mundo 🙂

Conclusión

Pues ya ves, en un momento has aprendido qué es y cómo crear un favicon de tres maneras diferentes, cada cual más fácil que la anterior (bueno, más o menos).

Si no lo tienes ya, ¿a qué estás esperando a crear el de tu web? Se tarda menos de 5 minutos en hacerlo y ayuda a que la gente vaya recordando tu logo o icono.

Si tienes cualquier duda a la hora de generar tu favicon puedes hacerla utilizando los comentarios de abajo y la responderé encantado.