Cómo añadir un Site Icon en WordPress (favicon)

El favicon es una pequeña imagen que se relacionada con una página web y que sirve para identificarla más fácilmente cuándo se presenta información sobre ella. Por ejemplo, cuándo se ve la lista de favoritos en un navegador, el favicon permite al usuario identificar lo que busca más fácilmente.

Es precisamente de este uso de dónde viene el nombre favicon, del inglés favorites icon, aunque en la actualidad se utiliza para otras muchas más cosas que para las listas de favoritos. Por eso parece más apropiado hablar de icono de sitio en general, o site icon, y no de favicon.

La forma original de definir un favicon en un sitio web era subiendo un archivo llamado favicon.ico al directorio raíz en el servidor. Luego se hizo una implementación mucho más flexible pudiéndose definir a través de un elemento <link> en la sección <head> de un documento HTML y también se amplió el soporte para otros formatos de imagen (png, jpeg, gif).

En HTML5 el site icon tiene esta sintaxis:

<head>
  <link rel="icon" href="https://ejemplo.com/images/unaimagen.png">
</head>

Y además se pueden añadir varios tamaños para que cada navegador o sistema operativo utilice la que más le convenga:

<link rel="icon" href="https://ejemplo.com/images/unaimagen-32x32.png" sizes="32x32">
<link rel="icon" href="https://ejemplo.com/images/unaimagen-64x64.png" sizes="64x64">

El icono de sitio en WordPress

WordPress integró el site icon en el core en la versión 4.3. Añadirlo es tan fácil como ir al área de administración e ir al menú Apariencia – Personalizar. Busca la sección «Identidad del sitio»; aquí podrás ver un apartado de nombre «Icono del sitio» dónde puedes subir la imagen que desees utilizar o seleccionar una de la biblioteca multimedia:

Una vez elegida puedes ajustar el encuadre y recorte de la imagen si es necesario:

Personalización site icon en WordPress — Personalización site icon

Cuándo estés listo, guarda los cambios y WordPress se encargará del resto.

La imagen que elijas debería cumplir estos requisitos:

Dimensiones mínimas recomendadas: 512×512 píxeles (WordPress creará un icono 512×512 incluso si la imagen que eliges es más pequeña).
Formato: png, jpg/jpeg o gif

WordPress generará cinco tamaños de icono:

32x32px favicon
180x180px icono de apps en iOS
192x192px icono de apps en Android y Chrome
270x270px icono de apps en Windows
512x512px como icono original

Y un HTML en el <head> similar a este:

<link rel="icon" href="https://ejemplo.com/wp-content/uploads/2015/10/cropped-fav-nombre-32x32.png" sizes="32x32" />
<link rel="icon" href="https://ejemplo.com/wp-content/uploads/2015/10/cropped-fav-nombre-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="https://ejemplo.com/wp-content/uploads/2015/10/cropped-fav-nombre-180x180.png" />
<meta name="msapplication-TileImage" content="https://ejemplo.com/wp-content/uploads/2015/10/cropped-fav-nombre-270x270.png" />

Si utilizas versiones anteriores a WordPress 4.3, ya es hora de que actualices. Si no puedes o no quieres puedes añadir el icono utilizando el action wp_head y admin_head:

// Añadir icono de sitio en WordPress < 4.3
add_action('wp_head', 'add_site_icon');
add_action('admin_head', 'add_site_icon);
function add_site_icon() {
    $favicon_url = get_stylesheet_directory_uri() . 'ruta-a-tu-favicon.ico';
    echo '<link rel="icon" href="' . esc_url( $favicon_url ) . '" />';
}

Site icon API

Para trabajar con el icono de sitio, WordPress ofrece cuatro funciones y dos filtros. Veamos algunos ejemplos de lo que podemos hacer con ellos.

Definir tamaños e iconos de sitio personalizados

Para definir un tamaño de icono personalizado se utiliza el filtro site_icon_image_sizes y luego con el filtro site_icon_meta_tags generamos la etiqueta meta correspondiente para el nuevo tamaño.

Por ejemplo, imginemos que queremos añadir un icono de tamaño 128×128:

add_filter( 'site_icon_image_sizes', 'add_custom_site_icon_size' );
// $sizes: array con todos los tamaños establecidos
function add_custom_site_icon_size( $sizes ) {
  $sizes[] = 128;
  return $sizes;
}

add_filter( 'site_icon_meta_tags', 'add_custom_site_icon_tag' );
// $meta_tags: array con todos los meta existentes
function add_custom_site_icon_tag( $meta_tags ) {
  $meta_tags[] = sprintf( '<link rel="icon" href="%s" sizes="128x128" />',
                        esc_url( get_site_icon_url( 128 ) )
  );
  return $meta_tags;
}

Fíjate que con el filtro site_icon_meta_tags se puede alterar cualquier elemento meta, no sólo el del nuevo tamaño. Nota que el callback de este fitlro recibe un array con todos los meta de cada tamaño.

Conocer si el icono de sitio ha sido configurado

Si necesitamos conocer si el icono del sitio ha sido o no añadido podemos utilizar la función has_site_icon(). Esta función devuelve true si el icono ha sido establecido o false en caso contrario:

if( has_site_icon() ) {
  // Hay site icon
} else {
  // No hay site icon
}

Si estás en una instalación multisite puedes utilizar el id de un sitio específico:

if( has_site_icon ( (int) $some_blog_id ) ) {
  // Hay site icon
} else {
 // No hay site icon
}

Obtener las URLs del icono de sitio

Con la función get_site_icon_url() podemos obtener la URL del icon site de un tamaño concreto. La sintaxis es:

get_site_icon_url ( int $size = 512, string $url = '', int $blog_id = 0 )

Parámetros

$size: (int) Tamaño del icono cuya URL se quiere obtener. Predeterminado 512 (para el icono 512×512).
$url: (string) URL que se debe utilizar si no se encuentra la URL del tamaño especificado. Predeterminado string vacío (ninguna).
$blog_id: (int) En instalaciones multisite, ID del sitio del que se quiere obtener el icono. Predeterminado 0 (sitio actual).

El uso más simple sin ningún parámetro obtendría la URL del icono del sitio actual en tamaño 512×512:

if( has_site_icon() ) {
  $site_icon = get_site_icon_url();
}

Si queremos obtener el icono en otro tamaño, por ejemplo 192 (tiene que ser alguno de los tamaños registrados):

if( has_site_icon() ) {
  $site_icon = get_site_icon_url( 192 );
}

La otra función, site_icon_url(), tiene los mismos parámetros que get_site_icon_url() pero muestra la URL en lugar de devolverla:

site_icon_url():
// Equivalente a:
echo esc_url( get_site_icon_url() );

Imprimir los meta tags

Los elementos meta del icon site que genera WordPress se pueden imprimir mediante la función wp_site_icon(). Nota que imprime todos los meta del icon site disponibles de todos los tamaños:

wp_site_icon();

Salvo casos excepcionales, está función no se debe utilizar en un theme. El theme debe utilizar wp_head() y es wp_head() la que internamente ejecutará, entre otras muchas funciones, wp_site_icon() para añadir los meta del icono a nuestro sitio.