Cómo cambiar el favicon en WordPress

Para un poco de interoperabilidad, considera usar el formato de icono de Microsoft.

Simplemente coloca un archivo llamado favicon.ico con tu gráfico de icono en la raíz de tu sitio.

Eso es importante porque muchos lo solicitan directamente.

Por supuesto, también deberías agregar el meta a la salida de tu sitio, va en la sección head del html:

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon"/>

Hacer esto hará que funcione en una gran parte de navegadores y evitará mensajes de error 404 en tus registros del servidor, ya que no todos los user-agents reflejan el meta href.

Favicon en WordPress

Un hook de WordPress relacionado con el head HTML es wp_head (Wordpress Codex):

add_filter('wp_head', function(){ 
    printf("%s\n", '<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon"/>');
    });

Desde la versión 3, WordPress incluye un favicon.ico vacío por defecto.

Si estás interesado en algunos detalles, hubo discusión en Debería incluir favicon por defecto (Ticket #3426) y Descartar solicitudes para favicon.ico (Ticket #11412) lo que resultó en ese archivo virtual por defecto de 0 bytes /favicon.ico (si WordPress está colocado en la raíz del servidor).

Así que básicamente es un archivo con el que el navegador fallará en una configuración por defecto sin un archivo /favicon.ico agregado por el usuario.

Solo sube un archivo "favicon.ico" a la raíz de tu sitio web y ¡listo! De hecho, la respuesta de Fernando también funciona:

<link rel="icon" type="image/png" href="http://tublog.com/favicon.png">

Y para añadir Favicons para dispositivos Apple agrega esto en tu head:

<link rel="apple-touch-icon" href="/customIcon.png"/>

En caso de que admitas IE 6, una pequeña advertencia: El favicon no se muestra en la barra de herramientas a menos que la URL se agregue a 'Favoritos' (marcadores), y los favicons se almacenan en la caché de IE, por lo que se eliminarán cuando borres la caché o cuando se eliminen periódicamente.

Para completar la lista de respuestas, en las respuestas anteriores se mencionaron (ver también http://es.wikipedia.org/wiki/Favicon) y tu elección:

1. agregar un /favicon.ico en la raíz (http://es.wikipedia.org/wiki/Favicon), solo puedes agregar iconos aquí, por lo que, por ejemplo, /favicon.png no es válido. Hay algunas consideraciones sobre el tipo ICO, navegadores IE muy antiguos SOLO admiten el formato MS ICO.
2. etiqueta con rel=shortcut icon: soporte multiplataforma con notas, muchos sitios prefieren esto, puedes agregar otros tipos de archivos aquí pero principalmente veo png, gif, ico, jpg y jpeg. También puedes agregar GIFs animados cuando uses el formato GIF.
3. etiqueta con rel=icon: donde especificas el tipo MIME.

4. incrustarlo directamente en la página usando, por ejemplo, codificación base64: por ejemplo href="data:image/x-icon;base64,iVBORw0==", esto TAMPOCO es compatible con todos los navegadores, pero hay bastantes sitios que lo usan.

   • Toma nota del tipo MIME especificado, por ejemplo, para iconos el estándar oficial todavía se menciona como "image/vnd.microsoft.icon", pero "image/x-icon" es necesario aquí incluso para versiones de IE 6.
   • También noto que el tipo MIME especificado no siempre corresponde con el tipo de archivo real, a veces se especifica ICO pero hay un PNG real presente. Así que ten en cuenta el tipo MIME correcto.
   • Si deseas aparecer en el proveedor de favicons de Google, debes agregar el ICO en la raíz.
   • Otro soporte para iconos: Además de favicon.ico, hay MUCHAS etiquetas adicionales para iconos, como el icono de Apple mencionado anteriormente, pero también link rel="avatar", link rel="pavatar", etc.

Por otro lado, si busco un favicon:

• primero busco en Google: http://plugins.svn.wordpress.org/wp-favicons/trunk/filters/search/filter_google_s2.php
• luego busco en otros proveedores como geticon: http://plugins.svn.wordpress.org/wp-favicons/trunk/filters/search/filter_geticon.org.php
• luego escaneo la página primero para rel icon y luego para rel shortcut icon: http://plugins.svn.wordpress.org/wp-favicons/trunk/filters/search/filter_extract_from_page.php y si está incrustado, obtengo el incrustado.
• y solo entonces intento obtener el icono de la raíz: http://plugins.svn.wordpress.org/wp-favicons/trunk/filters/search/filter_extract_from_root.php

PD: por supuesto, puedes aplicar todos estos métodos para tu sitio y ofrecer el mayor soporte posible ;)

Simplemente pega este código en functions.php y cambia el href con la ruta de tu favicon

function blog_favicon() {
    echo '<link rel="Shortcut Icon" type="image/x-icon" href="'.get_bloginfo('wpurl').'/favicon.ico" />';
}
add_action('wp_head', 'blog_favicon');

Usé:

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

con favicon.ico en la raíz del tema.