Come cambiare la favicon in WordPress?

Per un po' di interoperabilità, considera di utilizzare il formato Microsoft Icon.

Basta posizionare un file chiamato favicon.ico con la tua icona grafica nella root del tuo sito.

Questo è importante perché molti lo richiedono direttamente.

Ovviamente dovresti aggiungere anche il meta all'output del tuo sito, va inserito nella sezione head dell'html:

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

In questo modo funzionerà in una grande varietà di browser e previene i messaggi di errore 404 nei log del server, poiché l'href del meta non è riconosciuto da tutti gli user-agent.

Favicon in WordPress

Un hook di WordPress relativo all'head HTML è 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"/>');
    });

Dalla versione 3, WordPress include un favicon.ico vuoto integrato.

Se sei interessato ad alcuni dettagli, c'è stata una discussione in Should include default favicon (Ticket #3426) e Discard requests for favicon.ico (Ticket #11412) che ha portato a quel file virtuale /favicon.ico predefinito lungo 0 byte (se WordPress è posizionato nella root del server).

Quindi è fondamentalmente un file in cui il browser fallirà in una configurazione predefinita senza un file /favicon.ico aggiunto dall'utente.

Basta caricare un file "favicon.ico" nella root del tuo sito web e il gioco è fatto! In realtà, anche la risposta di Fernando funziona:

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

E per aggiungere Favicon per dispositivi Apple aggiungi questo nell'head:

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

Nel caso in cui supporti IE 6, un piccolo avvertimento: la favicon non viene visualizzata nella barra degli strumenti a meno che l'URL non venga aggiunto ai 'Preferiti' (segnalibri), e le favicon vengono memorizzate nella cache di IE, quindi verranno eliminate quando svuoti la cache o quando viene periodicamente cancellata.

Per completare l'elenco delle risposte, nelle risposte precedenti sono stati menzionati (vedi anche http://en.wikipedia.org/wiki/Favicon) e la tua scelta:

1. Aggiungere un /favicon.ico nella root (http://en.wikipedia.org/wiki/Favicon), puoi aggiungere solo icone qui, quindi ad esempio /favicon.png non è valido. Ci sono alcune considerazioni sul tipo ico, i browser IE molto vecchi supportano SOLO il formato MS ICO.
2. Tag con rel=shortcut icon: supporto cross-browser con note, molti siti preferiscono questo metodo, puoi aggiungere altri tipi di file qui ma principalmente vedo png, gif, ico, jpg e jpeg. Puoi anche aggiungere GIF animate quando usi il formato GIF.
3. Tag con rel=icon: dove specifichi il tipo MIME.

4. Incorporarlo direttamente nella pagina utilizzando ad esempio la codifica base64: es. href="data:image/x-icon;base64,iVBORw0==", questo non è supportato da tutti i browser ma ci sono molti siti che lo utilizzano.

   • Nota il tipo MIME specificato, ad esempio per le icone lo standard ufficiale è ancora menzionato come "image/vnd.microsoft.icon" ma "image/x-icon" è necessario qui anche per le versioni di IE 6.
   • Inoltre noto che il tipo MIME specificato non sempre corrisponde al tipo di file effettivo, a volte viene specificato ICO ma è presente un PNG effettivo. Quindi fai attenzione al tipo MIME corretto.
   • Se vuoi finire nel provider di favicon di Google, dovresti aggiungere l'ico nella root.
   • Altri supporti per le icone: oltre a favicon.ico ci sono MOLTI altri tag per le icone come l'icona Apple menzionata sopra ma anche link rel="avatar", link rel="pavatar" ecc...

Dall'altro lato, se cerco un favicon:

• Prima cerco su Google: http://plugins.svn.wordpress.org/wp-favicons/trunk/filters/search/filter_google_s2.php
• Poi cerco in altri provider come geticon: http://plugins.svn.wordpress.org/wp-favicons/trunk/filters/search/filter_geticon.org.php
• Poi scansiono la pagina prima per rel icon e poi per rel shortcut icon: http://plugins.svn.wordpress.org/wp-favicons/trunk/filters/search/filter_extract_from_page.php e se è incorporato, ottengo quello incorporato.
• E solo allora provo a recuperare l'icona dalla root: http://plugins.svn.wordpress.org/wp-favicons/trunk/filters/search/filter_extract_from_root.php

P.S. Puoi ovviamente applicare tutti questi metodi per il tuo sito per offrire il supporto più ampio possibile ;)

Incolla semplicemente questo codice nel file functions.php e modifica l'attributo href con il percorso del tuo 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');

Ho utilizzato:

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

con favicon.ico nella root del tema.