Añadir un favicon personalizado en WordPress

Un favicon (del inglés favorites icon) no es más que una pequeña imagen asociada a una página web y que se muestra tanto en la barra de direcciones como en el encabezado de la pestaña de la web. Se suele utilizar para identificar más fácilmente a las webs cuando las guardamos en marcadores o favoritos y al visitar el historial de navegación de nuestro navegador.

favicon_blog

En este post voy a comentar como añadir un favicon personalizado a WordPress. No es una tarea difícil, pero dado que hay que tocar el código fuente de nuestro tema puede resultar complicado para la gente que no entienda HTML y PHP.

Para poder poner un favicon en nuestra web necesitamos una imagen de 16×16 o 32×32 pixeles en formato ICO que llamaremos favicon.ico. Actualmente muchos navegadores soportan otros formatos como GIF, JPEG y PNG, sin embargo, yo prefiero seguir utilizando el formato ICO por compatibilidad y así asegurarme de que mi favicon se mostrará en la mayoría de navegadores.

Una vez tengamos nuestra imagen en formato ICO tenemos que subirla al servidor y meterla en el directorio raíz de nuestro tema de WordPress. Para ello se puede utilizar cualquier cliente FTP como FileZilla. En mi caso el tema que estoy utilizando es Twenty Twelve y una vez subida la imagen al servidor deberíamos de tener algo así:

FTP_Favicon

Una vez tengamos el favicon en el directorio raíz de nuestro tema, solo nos quedará indicarle a la cabecera del mismo donde se encuentra nuestro favicon para que lo muestre. Para ello tenemos que editar el fichero header.php de nuestro tema. Podemos acceder a dicho fichero desde el propio panel de control de WordPress. Vamos a Apariencia > Editor y en la parte derecha veremos una sección llamada Plantillas donde se encuentra el fichero header.php (o cabecera si tenemos WordPress en Español).

Lo único que tenemos que hacer es buscar la etiqueta <head> en el fichero y añadir la siguiente línea después de la etiqueta:

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

Después de añadir la línea anterior tendríamos algo así:

<head>
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

Si guardamos los cambios y vamos a nuestra web veremos nuestro bonito favicon en la pestaña de nuestra web.

Nota:

Hay que tener en cuenta que al haber modificado un fichero del tema, si lo actualizamos o cambiamos por otro tema distinto, tendremos que volver a realizar todo el proceso de nuevo para volver a poner el favicon en nuestra web. Existen plugins que permiten añadir un favicon de forma permanente aunque cambies de tema, pero utilizar un plugin para algo tan sencillo me parece una tontería. Además, tener demasiados plugins puede hacer demasiado pesada nuestra web.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *