Cómo poner un favicon en una web de WordPress

Cómo poner un favicon en una web de WordPress

Recursos Tutoriales

Durante mucho tiempo pensé que poner un favicon en mi página web, hecha con WordPress, sería una tarea harto difícil y yo misma he descubierto que no, que es sumamente sencillo.

Para empezar, y por si hay alguien que no lo sabe, el favicon es esa pequeña imagen que vemos en la esquina superior de una pestaña de nuestro navegador  y que identifica el sitio web en el que nos encontramos. Su nombre es el resultado de una mezcolanza o blending de la expresión inglesa favorite icon. A menudo el favicon suele ser el mismo logo de una empresa o institución. (Nota: haciendo clic sobre cada imagen se puede ver ampliada y con gran calidad). Por ejemplo, todas las páginas de wordpress.org muestran su favicon correspondiente:

CapturaWP

Ahora bien, ¿cómo insertamos un favicon en nuestro blog o página web, realizada con WordPress?

1. Para empezar, deberemos crear el favicon. Elegiremos una imagen que nos guste o nuestro logo (en formato PNG, JPGE, etcétera) y lo convertiremos en favicon. Para ello, subiremos dicha imagen a un sitio web, como FavIcon from Pics o Degraeve y la convertiremos en formato .ico y lo descargaremos (debemos asegurarnos de que el archivo que descargamos acaba en .ico).  Podemos guardarlo con el nombre que queramos, aunque lo más fácil, naturalmente, es llamarlo “favicon”. En estos dos sitios web nos ayudan un poco guiándonos a través del proceso. Entre otras cosas, nos proporcionarán un código, que deberemos guardar y pegar en el header del tema. Este código suele ser algo así:

<link rel=”shortcut icon” href=”favicon.ico”>  

 ¡Ojo! Deberemos sustituir “favicon” por otro nombre (Ej.:<link rel=”shortcut icon” href=”mariposa.ico”>)  si hemos modificado el nombre al descargar y guardar la imagen.

2. Abriremos nuestro cliente FTP, como Filezilla o CyberDuck (ambos de descarga libre y gratuita) y conectaremos con nuestra web o proveedor de alojamiento.  Deberemos acceder un directorio httpdocs, donde deben estar ubicados todos los archivos de nuestra instalación de WordPress para nuestro dominio.

 cpaturazilla

3. Por un lado, debemos descargar el archivo header.php del tema WordPress que tenemos activado (por ejemplo, Twenty ElevenOxygen). Deberemos descargarlo del servidor a nuestro ordenador. Este archivo header.php está ubicado dentro de la carpeta wp-contents > themes > oxygen (o nombre del tema que estamos).  Deberemos pasarlo de allí a nuestro ordenador. Abrimos o editamos el archivo header.php con Notepad++ u otro editor similar (de descarga gratuita y muy fácil desde Internet). Justo casi al principio, en la línea que hay debajo de la etiqueta <head>, deberemos pegar nuestro código (<link rel=”shortcut icon” href=”favicon.ico”>) y guardar el archivo.

4. A continuación, volvemos a abrir Filezilla y deberemos pegar este archivo, header.php, dentro de la carpeta de la que lo extrajimos (es decir, carpeta de instalación de WordPress > wp-contents > themes > tema activado). Deberemos substiuirlo por el antiguo archivo header.php.

capturanotepad

5. En la carpeta de instalación de WordPress, pegaremos también el archivo .ico (por ejemplo, favicon.ico, o mariposa.ico, etc.) que descargamos de Internet. Si eso no da resultado, lo pegaremos también en el directorio root o general de httpdocs, de manera que quede fuera de la carpeta de instalación de WordPress, pero en el mismo nivel. Ya hemos subido todos los archivos necesarios y podemos cerrar Filezilla. 

6. Escribimos la dirección o URL de nuestra web en el navegador y accedemos. Si aún no vemos el favicon, necesitaremos borrar los datos de las cookies y el caché en el historial de navegación y volver a cargar la página.