Crear el Favicon perfecto para una web

Tabla de contenidos

• ¿Qué es un Favicon y para qué sirve?
• Ideas para un Favicon
• ¿Cómo crear un Favicon perfecto?
• Integrar el Favicon en WordPress

¿Qué es un Favicon y para qué sirve?

Un favicon es un elemento HTML que sirve para mostrar «el logotipo» de nuestra web, los existen de todo tipo, pueden ser dinámicos. Y aunque es una etiqueta HTML, es una etiqueta que contiene una fotografía, una imagen. Antes era el formato .ico, hoy en día también se usa el formato .png y .gif.

Los favicones son útiles para grabar en la mente de los usuarios el logo de nuestra web y también para que a los usuarios les sea más sencillo cambiar de pestañas en su navegador sin confundirse.

Un favicon a dia de hoy no puedes ser de un tamaño mayor de 16×16 píxeles, lo que significa que es cuadrado. Algunos usuarios pueden pensar que un favicon puede ser de un mayor tamaño porque en algunos CMS les permite subir favicones más grandes, pero eso es falso pues el CMS se encarga de reducirlo al tamaño correcto.

Ahora mismo estás en yourwpweb.com, si te fijas hay un pequeño símbolo azul con la W de WordPress en la pestaña(a no ser que haya cambiado el logo, quizás haya otro 🙂 ).

Ideas para un Favicon

Un favicon debe ser bonito, llamativo, y fácil de recordar, pero con el problema de su reducido tamaño. Así pues, normalmente un favicon será nuestro logo en pequeñito o si no pudiera ser así por su tamaño reducido y la complejidad de nuestro logo, entonces sería una parte del logo o un logo relacionado con la temática de nuestra web. Por supuesto puedes poner al final lo que quieras, puedes introducir un favicon divertido si lo deseas aunque no tenga mucho que ver con tu web.

En mi opnión lo principal es eso, que el favicon sea «cool» y se quede grabado en la mente del usuario. Además los favicon dinámicos son de lo más guay y llamativo que puede hacer, por tanto, un favicon dinámico, en mi opinión, siempre es buena idea.

¿Cómo crear un Favicon perfecto?

Yo voy a dividir en 2 las formas de crar un favicon:

La primera, crear un favicon como una imagen normal: Se trata de conseguir una imagen, un logo y simplemente lo introducimos como favicon, ya sea en una web que creamos como HTML, en WordPress o en cualquier otro CMS.

La mayoría de CMS nos permitirán introducir directamente la imagen y hacer crop directamente en nuestra web, crop significa recortarla y así dejarlo con el tamaño adecuado, o simplemente reducirán el tamaño automáticamente.

Si nuestro CMS no nos permitiera nada de lo anterior nos tocaría reducir la imagen a nosotros. Simplemente puedes usar esta web para convertir una imagen en favicon.

Como solo necesitamos una imgen, podremos, simplemente crearla con algún programa o descargarla de internet, yo recomiendo esta web de iconos que ya he usado alguna vez para logos en mis webs. Además esa web e permite descargarte el icono-logo vectorizado(fondo transparente) por lo que queda más cool.

Pero hay muchas otras webs que puedes usar para conseguir logos o imagenes, incluso buscar directamente en google imagenes usando los filtros.

La segunda forma, crear un favicon usando herramientas webs para ello: Yo también he usado algunas webs para crear favicon de forma fácil y rápida y contruyendo mi favicon pixel a pixel. Más concretamente he usado favicoin.cc, esta web es fantástica para crear un favicon ya que nos permite crearlo píxel a píxel. Es mi web favorita sin duda para crear un favicon.

No solo he creado algunos favicoin pixel a pixel sino también dinámicos.

He creado un favicon solo para ilustrar este artículo, así pues:

Como se observa en la fotografía podremos seleccionar el color exacto que queremos para cada cuadraito, se puede pintar de corrido, es decir, no necesitamos pinchar cuadrado a cuadrado para colorearlo, y además podremos añadir semi transparencia a los colores, los cuadrados no pintados son transparentes pero los podriamos pintar de balnco, negro o lo que queramos, yo pienso que un favicoin con fondo transparente es lo más cool en esta vida! 🙂

Si os fijaís hay 16×16 cuadraditos, que es el número de píxeles de un favicon.

Otra cosa graciosa de esta web es que no tiene favicoin propio, sino que muestra el que estamos creando, permitiendonos así ver en tiempo real como quedaría nuestro favicoin, otra joyita más de esta herramienta web. El anterior favicon quedaría así:

Y además si os fijaís abajo del favicon en la primera foto, podeís crear una animación, que os petmitirá que el favicon se mueva en tiempo real, haciendolo muy llamativo. En mi caso lo queharía sería que estiviera solo el centro del favicon en la primera «captura», en la segunda que se completara una de las lineas de color, en la tercera otra linea y así sucesivamente hasta completarse, y luego empieza desde el principip. Además podeís seleccionar los segundos que dura hasta saltar hasta la siguiente animación pudiendo hacerlo más o menos fluido el móvimiento, según gustos.

Para descargar el favicon solo teneís que darle al botón de download que hay abajo del panel de crear el favicon.

Y con esto doy por terminada la clase de «crear el favicoin perfecto», creo que es fácil y con las herramientas dadas os será sencillo crear un favicoin muy bueno.

Actualización: Por si alguien se lía he decidido crear un video en el que exclusivamente voy a explicar y crear un favicon dinámico:

Integrar el Favicon en WordPress

Yo solo voy a hablar de cómo integrar el Favicon en WordPress, en otras plataformas podeis crear el favicon con las herramientas dadas y buscar infomación adicional para integrarlo, pero suele ser súper sencillo y haber varias formas.

Para WordPress hay plugins y tonterías no solo para crear el favicon(lamentable) sino también para integrarlo. Y es que me parece una estupidez tener un plugin para crear un favicon como si eso lo fueramos a cambiar todos los días, plugin que realentiza nuestra web y ocupa espacio del hosting.

En cambio los plugins para insertar el favicon es más útil. Ya que si insertamos nuestro favicon en el HTML de nuestra web en wordpress nos encontraremos con 2 problemas: la mayoría de los usuarios no sabrían hacerlo o les costaría trabajo, sobre todo si no llevan mucho tiempo con wordpress y el segundo problema es que cada vez que se actualiza la versión de wordpress tendremos que volver a introducir el favicon en el HTML porque se perderá. Así pues solo hay 2 soluciones:

Introducir el favicon a través de nuestra plantilla, tema, theme o como lo quieras llamar. La cosa es que no todos los temas incluyen eso, es decir, hay temas que una vez instalados le damos en nuestro panel de wordpress a customizar y nos aparecerá, normalmente en un apartado llamado «identidad» un botón para subir el logo de nuestra web y/o el favicon. Pero como todos los temas no lo incluyen y no vamos a cambiar un tema si nos gusta por un maldito favicon, eso nos dejaría en la siguiente opción:

Introducir el favicon a través de un plugin. Para ello encontraremos multitud de plugins, yo no voy a mencionar ninguno especializado en eso, sino simplemente nuestra cuenta en WordPress.com unido a Jetpack(el plugin más famoso de wordpress seguramente) nos será suficiente para subir el favicon. Para ello debemos entrar en nuestra cuenta en wordpress.com, seleccionamos la web a customizar, en ajustes y ya nos aparecerá lo primero. Puede que lo cambien de sitio de aquí a unos meses o años porque estas cosas cambian, pero estará por ahí, solo rebusca.

	Acepto donaciones de BAT's mediante el navegador Brave 🙂