Cum să adăugați și să schimbați o favicon WordPress | Buff-uri WP

Publicat: 2022-01-20

Oamenii folosesc WordPress pentru a crea site-uri web pentru persoane fizice și companii. O modalitate de a ajuta vizitatorii repetenți să știe că site-ul este al tău este să ai o favicon personalizată WordPress.

Ce este un Favicon?

Un favicon este o pictogramă care apare în fila sau fereastra browserului și în lista de marcaje sau favorite asociate în mod specific cu un anumit site. Dacă un browser nu găsește o favicon personalizată, va afișa în schimb o favicon implicită.

O favicon WordPress este adesea o versiune mică a siglei site-ului. Este posibil să puteți micșora logo-ul la dimensiunea faviconului, dar de obicei este necesar să creați unul legat de logo-ul original.

Branding și design de logo sunt create pe computer.
Se creează branding și design de logo

De ce ar trebui să folosesc un Favicon?

Companiile ar trebui să aibă o favicon pentru a îmbunătăți familiaritatea și pentru a încuraja încrederea clienților potențiali. Brandingul permite vizitatorilor să recunoască un site instantaneu. Adaugă continuitate și legitimitate.

Persoanele fizice pot folosi, de asemenea, o favicon din motive similare, deși scopul este vizitatorii repeți, mai degrabă decât achizițiile în majoritatea situațiilor.

Specificații Favicon

Dimensiunea faviconului în WordPress este de 16×16 pixeli. Cu toate acestea, alte browsere și aplicații folosesc o dimensiune mai mare, variind de la 16 la 195 de pixeli pătrați.

Dacă rămâneți cu dimensiunea 16×16, aplicațiile care folosesc dimensiuni mai mari o vor mări în general, provocând adesea pixelare. Din acest motiv, Identitatea site-ului WordPress necesită în schimb 512×512.

Câteva dimensiuni alternative comune sunt:

  • 24 de pixeli – pictograma pentru un site fixat în Internet Explorer 9
  • 72 de pixeli – pictograma de pe ecranul de pornire al unui iPad
  • 128 de pixeli – pictograma folosită în Magazinul web Chrome
  • 195 pixeli – pictograma afișată pe Opera Speed ​​Dial

Formate Favicon

O favicon nu se va afișa corect dacă este salvată într-un format incorect. Cel mai comun format este Windows ICO, care era cerința inițială. Poate conține o varietate de dimensiuni și rezoluții pentru utilizare pe mai multe platforme. Este singurul format folosit de Internet Explorer.

PNG este cea mai ușor de utilizat, deoarece aproape orice program de grafică se va salva în acest format și oferă o dimensiune mică a fișierului și permite ca favicon-ul să fie transparent, dacă se dorește.

Opera acceptă utilizarea SVG pentru favicons, deși este singurul browser care o face.

GIF, JPG și APNG sunt opțiuni, dar sunt mai puțin utile, deoarece rezoluția lor este mai proastă și pot distrage atenția. Distragerea atenției este mai ales probabilă cu fișierele GIF animate și fișierele APNG, care sunt, de asemenea, animate.

Crearea unui Favicon

Proiectarea unei favicon WordPress pentru a adăuga recunoaștere site-ului dvs. este o idee grozavă. Puteți crea unul pe un program de grafică de pe computer sau puteți utiliza un site web gratuit online, cum ar fi favicon-generator.org sau favicon.cc.

Exemple de favicon pentru GMail, Slack, HubSpot, TeamWork și Google Drive în browserul Chrome
Exemple de favicon în browserul Chrome

Luați în considerare următorii factori pentru a îmbunătăți valoarea favicon-ului dvs.

Identitate

Cel mai important motiv pentru a avea un favicon este să fii recunoscut. Creați un design care să reprezinte produsul sau serviciul pe care îl oferiți sau un design care se potrivește cu logo-ul mărcii dvs. O imagine care are legătură directă cu marca dvs., cum ar fi o versiune mai mică a logo-ului sau litera sau literele principale ale numelui companiei, este ideală.

Simplitate

Din cauza dimensiunilor sale mici, simplu este cel mai bine. Formele de bază sau literele sunt o alegere bună pentru vizibilitate. Când vizitatorii îl recunosc dintr-o privire, este cel mai eficient. Cu cât încercați să includeți mai multe detalii, cu atât este mai dificil pentru vizitator să recunoască ce este pictograma. Precizia, îndrăzneala și claritatea sunt esențiale.

Culori

Contrastul ridicat va îmbunătăți lizibilitatea și va crește recunoașterea. Luați în considerare favicon-urile unor site-uri precum NBC și Netflix. Site-urile lor sunt imediat evidente. Site-urile care au o identitate clară de culoare ar trebui să includă acea culoare în faviconul lor WordPress. Din nou, păstrați-l simplu. Prea multe culori pot cauza o imagine neclară.

Cum să adăugați o favicon la WordPress

Adăugați o favicon WordPress folosind una dintre următoarele metode:

1) Utilizați opțiunea încorporată pentru pictogramă site în WordPress.

Plasați cursorul peste Aspect și alegeți Personalizare, apoi alegeți fila Identitate site. Pictograma site-ului se află în partea de jos a panoului din stânga și vă permite să alegeți orice imagine pătrată de 512 pixeli sau mai mare, pe care apoi o redimensionează după cum este necesar.

Dacă fișierul pe care îl alegeți nu este un pătrat, WordPress oferă o interfață pentru a decupa imaginea într-un pătrat.

Editor WP Buffs pentru adăugarea unui nou favicon WordPress.
Editor WP Buffs pentru adăugarea unui nou favicon WordPress

2) Editați header.php

Editați fișierul header.php în tema curentă și adăugați acest cod:

 <link rel=”icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” > <link rel=”shortcut icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” />

Înlocuiți „domeniul dumneavoastră” cu numele de domeniu al site-ului dvs. și asigurați-vă că încărcați favicon-ul în spațiul web.

Dacă doriți să împiedicați WordPress să anuleze modificarea într-o actualizare, creați o temă secundară înainte de a edita și editați fișierul cu tema secundară în loc de fișierul cu tema principală.

3) Utilizați un plugin WordPress.

Utilizați unul dintre pluginurile enumerate mai jos.

Cum să schimbați o favicon în WordPress

Schimbarea favicon-ului WordPress este similară cu adăugarea uneia. Aceleași metode funcționează pentru a încărca o nouă favicon. De asemenea, este posibil să încărcați unul nou și să îl suprascrieți pe cel vechi, care îl va schimba atunci când vizitatorii își vor șterge memoria cache sau vor efectua o reîmprospătare tare.

Lăsați WP Buffs să se ocupe de upgrade-urile și modificările dvs. dacă vi se pare că procesul este confuz. Echipa este disponibilă 24/7 pentru a oferi servicii și asistență.

Simplificați cu un plugin WordPress Favicon

Ușurează procesul de adăugare sau modificare a favicon-ului WordPress instalând un plugin.

  • Puteți folosi pluginul Insert Headers and Footers pentru a adăuga cu ușurință codul de mai sus. Lipiți codul în secțiunea antet și salvați-l.
  • Pluginul All in One Favicon adaugă funcționalitatea pentru a ușura procesul de adăugare a unui favicon.
  • RealFaviconGenerator este un plugin care generează pictograme pe baza cerințelor browserului.
  • Un alt plugin popular este Heroic Favicon Generator, care generează o favicon dintr-o imagine încărcată sau una care se află deja în biblioteca dvs. media. Utilizează drag-and-drop pentru a încărca fișiere imagine.

De ce nu apare Faviconul meu WordPress?

Există mai multe motive posibile pentru erorile favicon, de la eroarea utilizatorului la idiosincrazia browserului.

Cache

Când site-ul dvs. este stocat în cache, modificările aduse elementelor precum favicon-ul durează timp să apară. Puteți accelera procesul făcând o reîmprospătare tare (Ctrl + F5) sau ștergând memoria cache a browserului. Dacă acest lucru nu rezolvă problema, verificați tipul de fișier favicon. Dacă nu este un fișier .ico, atunci acesta poate fi incompatibil cu browserul.

Greșeli de tipar

Dacă aveți o eroare tipografică în cod, este posibil ca favicon-ul să apară mai degrabă decât să se afișeze. Erorile simple, cum ar fi ghilimele, bara oblică sau parantezele lipsă, cauzează erori care încurcă imaginea și, eventual, întreaga pagină web. Verificați cu atenție codul.

Locație Favicon WordPress

Referința fișierului este, de asemenea, foarte specifică. Dacă linkul (partea din ghilimele href) indică către o imagine care nu există, favicon-ul nu se va afișa. Aveți grijă să încărcați fișierul favicon și să copiați linkul exact. Cel mai bun mod de a face acest lucru este să utilizați Biblioteca Media din WordPress.

Vizualizare locală

Dacă verificați afișarea pe un computer local în loc să încărcați pagina de internet, favicon-ul WordPress nu va apărea, deoarece majoritatea browserelor nu caută local favicon-ul. Verificați pagina de pe internet pentru a vă asigura că este afișată vizitatorilor.

Tip de imagine greșit

Tipul de fișier implicit pentru imaginea favicon este .ico (“image/ico”). Când se folosește un alt tip de fișier, cum ar fi PNG sau SVG, acesta trebuie ajustat în cod atunci când se utilizează metoda de editare a temei. Tipul de fișier trebuie să se potrivească cu tipul de fișier al imaginii. De exemplu, un fișier PNG ar trebui să spună „image/png” în loc de „image/ico”.

Pentru mai multe informații despre tot felul de subiecte legate de WordPress, abonați-vă la buletinul informativ WPBuffs.

Oamenii întreabă și ei

Cum adaug o favicon la WordPress?

Cel mai simplu mod de a adăuga o favicon WordPress este să utilizați secțiunea Identitate site din Personalizare. Al doilea cel mai ușor este să utilizați un plugin. De asemenea, puteți adăuga manual o favicon prin editarea temei.

Unde este favicon-ul în WordPress?

Pictograma însăși apare în fila sau titlul ferestrei. De asemenea, apare în listele de marcaje. Setarea se găsește sub Aspect, în secțiunea Personalizare. De acolo, faceți clic pe Identitatea site-ului și pictograma site-ului din partea de jos a panoului din stânga este locul în care încărcați favicon-ul.

Ce dimensiune are o favicon WordPress?

16×16 pixeli este dimensiunea implicită, dar dacă utilizați metoda Site Identity, imaginea ar trebui să fie de 512×512 pixeli. Software-ul va micșora imaginea la dimensiunea potrivită pentru fiecare browser sau dispozitiv.

Cum schimb favicon-ul în WordPress?

Schimbați favicon-ul în același mod în care adăugați unul. Fie accesați Aspect → Personalizare → Identitate site, schimbați-l în pluginul dvs. sau încărcați un nou fișier favicon.ico, suprascriindu-l pe cel anterior.