Cum să schimbi faviconul în WordPress?

Pentru o ușoară interoperabilitate, luați în considerare utilizarea formatului Microsoft Icon.

Pur și simplu plasați un fișier numit favicon.ico cu grafica pictogramei dumneavoastră în rădăcina site-ului.

Aceasta este importantă deoarece mulți utilizatori o solicită direct.

Desigur, ar trebui să adăugați și meta-tag-ul în codul HTML al site-ului, acesta trebuie plasat în secțiunea head:

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

Făcând acest lucru, pictograma va funcționa în majoritatea browserelor și va preveni mesajele de eroare 404 în jurnalele serverului, deoarece unele agenți de utilizator nu respectă atributul href din meta-tag.

Favicon în WordPress

Un hook WordPress legat de secțiunea head este 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"/>');
    });

Începând cu versiunea 3, WordPress are inclus un fișier favicon.ico gol.

Dacă sunteți interesat de detalii, a avut loc o discuție în Should include default favicon (Ticket #3426) și Discard requests for favicon.ico (Ticket #11412) care a dus la crearea acelui fișier virtual implicit de 0 octeți /favicon.ico (dacă WordPress este instalat în rădăcina serverului).

Deci, practic, este un fișier la care browserul va eșua într-o configurație implicită, fără un fișier /favicon.ico adăugat de utilizator.

Doar încărcați un fișier "favicon.ico" în directorul rădăcină al site-ului și asta e tot! De fapt, răspunsul lui Fernando funcționează și el:

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

Și pentru a adăuga Favicon pentru dispozitive Apple, adăugați acest cod în secțiunea head:

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

În cazul în care încă suportați IE 6, un mic avertisment: favicon-ul nu va apărea în bara de instrumente decât dacă URL-ul este adăugat la 'Favorite' (semnături), iar favicon-urile sunt stocate în cache-ul IE, așadar vor fi șterse când ștergeți cache-ul sau când acesta este șters periodic.

Pentru a completa lista de răspunsuri, în răspunsurile de mai sus au fost menționate (vezi și http://en.wikipedia.org/wiki/Favicon) și opțiunile tale:

1. adaugarea unui /favicon.ico în directorul rădăcină (http://en.wikipedia.org/wiki/Favicon), poți adăuga doar iconițe aici, de exemplu /favicon.png nu este valid. Există unele considerații legate de tipul ICO, browserele foarte vechi ale IE suportă DOAR formatul MS ICO.
2. tag-ul cu rel=shortcut icon : suport cross-browser cu note, multe site-uri preferă această metodă, poți adăuga alte tipuri de fișiere aici dar în principal văd png, gif, ico, jpg și jpeg. Poți adăuga și GIF-uri animate când folosești formatul GIF.
3. tag-ul cu rel=icon : unde specifici tipul MIME.

4. înglobarea direct în pagină folosind de exemplu codificarea base64: de exemplu href="data:image/x-icon;base64,iVBORw0==" , această metodă nu este suportată de toate browserele dar există destul de multe site-uri care o folosesc.

   • Ține cont de tipul MIME specificat, de exemplu pentru iconițe standardul oficial este încă menționat ca "image/vnd.microsoft.icon" dar "image/x-icon" este necesar aici chiar și pentru versiunile IE 6.
   • De asemenea, observ că tipul MIME specificat nu corespunde întotdeauna cu tipul real al fișierului, uneori este specificat ICO dar este prezent un PNG. Deci, notează corect tipul MIME.
   • Dacă vrei să ajungi în furnizorul de favicon al Google, ar trebui să adaugi fișierul ICO în directorul rădăcină.
   • Suport pentru alte iconițe: Pe lângă favicon.ico există FOARTE MULTE alte tag-uri pentru iconițe, cum ar fi iconița Apple menționată mai sus, dar și link rel="avatar", link rel="pavatar" etc...

Pe de altă parte, dacă caut un favicon:

• mai întâi caut în Google: http://plugins.svn.wordpress.org/wp-favicons/trunk/filters/search/filter_google_s2.php
• apoi caut în alți furnizori precum geticon: http://plugins.svn.wordpress.org/wp-favicons/trunk/filters/search/filter_geticon.org.php
• apoi scanez pagina pentru primul rel icon și apoi rel shortcut icon: http://plugins.svn.wordpress.org/wp-favicons/trunk/filters/search/filter_extract_from_page.php și dacă este încorporat, obțin pe cel încorporat
• și abia după aceea încerc să obțin iconița din directorul rădăcină: http://plugins.svn.wordpress.org/wp-favicons/trunk/filters/search/filter_extract_from_root.php

p.s. poți aplica, desigur, toate aceste metode pentru site-ul tău pentru a oferi cel mai larg suport posibil ;)

Pur și simplu inserează acest cod în functions.php și schimbă href cu calea către favicon-ul tău

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

Am folosit:

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

cu favicon.ico în rădăcina temei.