Un favicon no es que sea un elemento imprescindible para el funcionamiento de un blog, pero lo cierto es que sería recomendable tener uno.

¿Por qué? Básicamente porque le añade la guinda al pastel (a la identidad visual de tu blog). De algún modo, ver un blog sin favicon o con el que viene por defecto con la plataforma a la que pertenece, le da un aspecto menos profesional.

En este tutorial vamos a ver cómo crear y añadir un favicon a un blog, por lo que si todavía no tienes uno (o no sabes qué es) te aconsejo que sigas leyendo estas líneas 🙂

¿Qué es un favicon?

El nombre de favicon viene de las palabras inglesas “favorite icon” (icono favorito).

Se trata simplemente de un icono de 16×16 píxeles que aparece junto al nombre de un sitio web en la pestaña del navegador, así como en la lista de marcadores (o favoritos).

Qué es un favicon

Además, cuando tenemos muchas pestañas abiertas no es posible ver el nombre de cada sitio web, por lo que gracias al favicon podemos identificarlas fácilmente.

Creando mi propio favicon

Vayamos por pasos:

1. Una cosa que hay que tener en cuenta es que, al ser un icono tan pequeñito, la imagen que se escoja debe ser muy simple y con pocos detalles.

Si deseas mostrar tu logo en él, pero este no se ve bien a tamaño tan reducido, lo que puedes hacer es utilizar la primera letra o tal vez cualquier otro elemento representativo de tu marca.

Lo importante es que elijas algo acorde con la identidad visual de tu sitio web.

2. Lo siguiente que tienes que hacer es abrir Photoshop. Si no tienes este programa hay otras opciones como PicMonkey, el cual es un editor de fotos online gratuito.

3. Ahora toca cortar la imagen elegida de manera que quede con forma cuadrada. Debe medir lo mismo de ancho que de alto.

4. Redúcela a un tamaño de 200x200px aproximadamente y guárdala como jpg, o en caso de que tenga transparencias, como png.

5. Para crear el favicon vamos a utilizar un generador que se llama Favicon.cc

6. Ve a Favicon.cc e importa la imagen que has creado.

Creando un favicon

7. Aparecerá tu foto de manera similar a lo que ves en la siguiente imagen, y lo que tienes que hacer es descargar el favicon donde pone “Download Favicon”.

Cómo crear un favicon

8. ¡Enhorabuena! Ya tienes un favicon. Ahora observarás que tiene el siguiente nombre y extensión: favicon.ico.

Existen algunas ventajas al tener un favicon con la extensión “.ico” frente a otras como “.png” o “.gif”. La principal es que te aseguras la compatibilidad con todos los navegadores.

Veamos cómo añadir un favicon a un blog

Para añadir un favicon tenemos dos formas: con un plugin o manual.

Elige la que prefieras.

1. Mediante un plugin

El plugin que utilizaríamos es All In One Favicon y resulta muy fácil de configurar.

Descárgalo, actívalo y a continuación ve a “configuraciones”.

Una vez allí, sube el favicon donde pone “ICO Portada”.

Cómo añadir un favicon

¡Ya está! Ahora debería salirte situado donde corresponde.

2. De forma manual

Para hacerlo de manera manual, lo primero que tienes que hacer es subir el favicon que has creado al directorio raíz de tu tema, a través de un cliente FTP como FileZilla.

De este modo, tu favicon tendría que ser accesible a través de una url como esta:

www.tusitiowebaquí.com/favicon.ico

Es muy sencillo, pero si todo esto te resulta demasiado difícil es mejor que optes por la opción del plugin, y así evitar posibles accidentes al tocar el código.

 

Después, en el archivo header.php de tu tema, tienes que pegar entre las etiquetas <head> </head> el siguiente código:

<link rel="shortcut icon" type="image/x-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

No te preocupes si no lo ves aparecer de inmediato, a veces tarda un poco.

Realmente no es nada difícil añadir un favicon en un blog, y por muy pequeño que pueda resultar este detalle, ahora tu blog luce muchísimo mejor.

Espero que te haya servido de ayuda este tutorial. Cualquier duda que surja ya sabes, abajo en los comentarios 🙂

¡No te pierdas ni un solo post!

100% libre de spam