Cum să remediați faviconul WordPress care nu este afișat în browsere?

Favicon este o pictogramă mică care apare în bara de titlu a browserului. Browserele folosesc această pictogramă pentru a afișa fila atunci când fixați pagina web. Unele motoare de căutare arată, de asemenea, favicon-ul în rezultatele căutării, făcându-l astfel o pictogramă de marcă pentru site-uri web. Google este un bun exemplu că cei mai mulți dintre noi pot găsi pictograma G simplă indică site-ul de căutare Google. Cu toate acestea, există multe motive pentru care favicon-ul dvs. WordPress nu poate fi vizibil în browsere precum Google Chrome. Dacă vă străduiți să remediați problema, iată câteva dintre intrările pe care le puteți încerca.

Favicon WordPress în browser

Mai jos este cum se va afișa o favicon în browserul desktop Google Chrome.

Când fixați fila, Chrome va folosi favicon-ul pentru acea filă, ca mai jos.

Chrome afișează și pictograma din cache în bara de adrese atunci când încercați să deschideți site-ul. În mod similar, puteți vedea favicon-ul sau pictograma site-ului în aplicația mobilă Chrome, vizualizând toate filele deschise.

Aproape toate browserele, atât pe desktop, cât și pe mobil, folosesc, de asemenea, favicon-ul ca pictograme de comandă rapidă în noua pagină cu filă. Rețineți că mai devreme Căutarea Google afișa favicon-ul site-ului în pagina de rezultate. Cu toate acestea, Google a eliminat favicon-ul din cel mai recent design al rezultatelor căutării.

Remediați faviconul WordPress care nu se afișează în Google Chrome

Dacă nu puteți vedea favicon-ul site-ului dvs. în Google Chrome sau în orice alt browser, urmați soluțiile de mai jos pentru a remedia problema.

1. Verificați Setările Favicon WordPress

WordPress vă permite să adăugați o favicon pe site-ul dvs. După ce vă conectați la panoul de administrare, navigați la secțiunea „Aspect > Personalizare > Identitatea site-ului” și încărcați imaginea de favicon. Spre deosebire de dimensiunile standard ale imaginilor favicon, pictograma site-ului WordPress trebuie să fie de 512 x 512 pixeli.

Puteți încărca o imagine .PNG pentru pictograma site-ului dvs. și după încărcarea imaginii verificați dacă se afișează corect în browser când vă aflați în panoul de administrare. Dacă funcționează corect, atunci deschideți site-ul publicat pentru a vedea dacă imaginea este afișată în bara de titlu.

2. Eliminați Faviconul temei dvs

Multe teme comerciale oferă panou tematic personalizat pentru a încărca sigla și favicon. Dacă utilizați deja funcția implicită pentru pictograma site-ului WordPress, asigurați-vă că dezactivați setările temei pentru favicon. Acest lucru va ajuta la evitarea suprapunerii utilizării aceleiași funcții în locuri diferite, ceea ce ar putea încurca browserul care nu afișează pictograma.

3. Utilizați pluginul Favicon

Dimensiunea recomandată a faviconului de afișat în bara de titlu a browserului este de 16 x 16 sau 32 x 32 sau 48 x 48 pixeli. Cu toate acestea, WordPress sugerează utilizarea 512 x 512 pixeli, deoarece WordPress folosește aceeași pictogramă ca și pictograma aplicației mobile. Din păcate, această dimensiune mai mare a imaginii poate cauza probleme la afișarea corectă a imaginii. Deoarece aveți nevoie de dimensiuni diferite de imagine pentru diferite dispozitive, puteți încerca pluginuri favicon precum RealFaviconGenerator.

• Mai întâi, instalați și activați pluginul pe site-ul dvs.

• Accesați meniul „Setări > Favicon” și activați „Afișare notificări de actualizare” pentru a primi informații atunci când există o actualizare a pluginului.

• Accesați secțiunea „Aspect > Favicon” și selectați favicon-ul din Biblioteca media. Dacă nu aveți pictograma, lăsați „Adresa URL a imaginii principale” necompletat și faceți clic pe butonul „Generează favicon”.

• Aceasta vă va duce la site-ul web al dezvoltatorului unde puteți genera o favicon folosind o altă opțiune. Vă recomandăm să generați o pictogramă cu instrumentul gratuit de generare a favicon-urilor și să o încărcați ca imagine principală.

• Derulați în jos în jos și faceți clic pe butonul „Generează favicon-ul și codul HTML”.

• Veți fi dus automat înapoi la panoul de administrare și veți vedea previzualizarea imaginilor dvs. pe diferite platforme. De asemenea, puteți verifica favicon-ul instantaneu pentru a vedea cum arată în browser.

Când vă uitați la codul sursă al site-ului dvs., pluginul va adăuga o mulțime de metaetichete de link pentru a accepta diferite dispozitive.

Puteți încerca acest plugin pentru a adăuga fișierul favicon.ico de 48 x 48 pixeli dacă pictograma implicită a site-ului WordPress nu funcționează pe site-ul dvs. În plus, pluginul vă va ajuta să generați pictograme pentru diferite dispozitive precum iOS și macOS Safari. Singurul lucru este că trebuie să mențineți pluginul activ pentru a utiliza continuu favicon pe site-ul dvs.

Notă: Spre deosebire de toate celelalte solicitări de imagine pe care le puteți vedea în consola pentru dezvoltatori a browserului, nu veți vedea cererea de imagine favicon. Prin urmare, trebuie să vedeți sursa paginii și să găsiți că imaginea favicon este legată în metaeticheta antetului.

4. Încărcarea manuală a Faviconului

Dacă opțiunea implicită de favicon WordPress nu funcționează și nici nu doriți să utilizați pluginul din niciun motiv, atunci puteți încerca să încărcați manual propria dvs. favicon.

• Pregătiți-vă imaginea favicon din instrumentul gratuit generator de favicon. Asigurați-vă că imaginea este în format .ico sau .gif sau .png cu dimensiunea de 16 x 16 pixeli.
• Conectați-vă la serverul dvs. web folosind FTP sau utilizați aplicația File Manager în panoul de găzduire și încărcați imaginea favicon în directorul rădăcină al instalării WordPress. Dacă doriți să încărcați imaginea din Media Library în panoul de administrare, asigurați-vă că utilizați calea corectă a fișierului.
• Dacă aveți vreo îndoială, deschideți fișierul imagine în browser. Ar trebui să puteți accesa imaginea similar cu orice alte imagini de pe site-ul dvs.
• Acum, accesați „Aspect > Editor de teme” și găsiți fișierul header.php al temei dvs.
• Lipiți codul de mai jos în fișierul header.php împreună cu alte metaetichete.

 <link rel="icon" type="image/png" href="/favicon.png">

• Ar trebui să arate ca mai jos și nu uitați să utilizați adresa URL corectă pentru imaginea favicon.

• Faceți clic pe butonul „Actualizare fișier” pentru a salva modificarea.
• Dacă nu doriți să editați fișierul temei în acest scop, puteți utiliza plugin-uri precum Insert Headers și Footers și lipiți codul de mai sus în zona secțiunii antet.

Acum deschideți site-ul și verificați că favicon-ul este vizibil în bara de titlu.

5. Eliminați Favicon pentru găzduire implicită

Una dintre celelalte probleme cu favicon este că multe companii de găzduire precum Bluehost și HostGator își folosesc propriile pictograme pe unele pagini. De exemplu, când vizualizați imaginile sau vizualizați codul sursă, veți vedea pictogramele HostGator și Bluehost în loc de pictograma site-ului dvs.

Acest lucru nu se întâmplă cu SiteGround și alte companii de găzduire. Ce puteți face este să verificați instalarea root pentru a vedea dacă există vreo favicon disponibilă și să o înlocuiți cu propria pictogramă. În caz contrar, contactați asistența pentru găzduire pentru a verifica dacă acest lucru poate fi rezolvat.

O altă problemă poate apărea din cauza locației faviconului. În site-ul nostru, folosim subdomenii separat pentru păstrarea tuturor fișierelor media. Acest lucru ar putea crea probleme dacă nu furnizați calea corectă a imaginii în valoarea meta link-ului href. Prin urmare, asigurați-vă că furnizați calea corectă și testați ca imaginea dvs. să fie accesibilă în locația pe care ați furnizat-o pentru a evita orice probleme.

6. Favicon în Mac Safari

Unele browsere precum Safari în macOS funcționează diferit. Puteți activa sau dezactiva favicon în funcție de nevoile dvs. Consultați articolul nostru despre cum să activați faviconul în Safari și asigurați-vă că ați activat această setare dacă browserul dvs. oferă această funcție.

7. Goliți site-ul și memoria cache a browserului

Dacă schimbați pictograma sau utilizați o imagine diferită cu același nume de fișier, asigurați-vă că ștergeți memoria cache.

• Ștergeți memoria cache de pe site-ul dvs. dacă utilizați pluginuri de memorare cache precum WP Rocket, W3 Total Cache etc.
• Apoi, deconectați-vă de la panoul de administrare și apăsați „Control + Shift + Delete” în Windows sau „Command + Shift + Delete” în macOS. Aceasta va deschide o fereastră pop-up clară a istoricului de navigare. Selectați opțiunile „Istoric navigare” și „Imagini și fișiere stocate în cache” și ștergeți-le.
• Acum, deschideți site-ul și verificați dacă arată faviconul corect în browser.

Pe dispozitivele mobile, trebuie să accesați secțiunea de setări sau istoric și să ștergeți datele de navigare.

Cuvinte finale

Faviconul anterior este folosit doar de browsere. Cu toate acestea, aceeași etichetă meta link este folosită pentru diferite pictograme, cum ar fi Apple-Touch-icon pentru iOS. Prin urmare, este o idee bună să utilizați toate pictogramele necesare pe site-ul dvs. și să testați că funcționează în browser și alte dispozitive. Pictograma implicită a site-ului WordPress poate să nu fie suficientă în acest caz și trebuie să utilizați propriile metaetichete sau să utilizați o temă sau un plugin care oferă această funcție.