A Favicon nem jelenik meg – Javítás Chrome, WordPress és amp; Shopify

Mi az a Favicon

A faviconok megkönnyítik a felhasználók számára az Ön webhelyének azonosítását, ha a webböngészőben sok lap van nyitva. A kedvenc ikonok általában közvetlenül az URL előtt jelennek meg a böngészőben. Faviconokat is láthat a könyvjelzőknél, a Google automatikus kiegészítésének eredményeiben és a keresési előzményekben. Itt van a helyek, ahol faviconok jeleníthetők meg különböző böngészőkön.

A faviconok olyan ikonokként definiálhatók, amelyek a webhely márkaépítésének részeként használhatók. A favicon lehet egy márka logója, egy karakter vagy karakterkészlet, a logó egy része, vagy akár egy általános kép, amely a márka vállalkozásának vagy iparágának típusát reprezentálja.

Ebben a cikkben megvizsgáljuk, hogy miért nem jelennek meg a kedvenc ikonok, és hogyan lehet megoldani ezeket a problémákat.

A Faviconok helyes telepítése

Helyesen kell telepítenie a favicont, ha azt szeretné, hogy megfelelően jelenjen meg. Először hozzon létre egy favicont. Sokan vannak favicon generátorok amit használhatsz erre. Ezután adja hozzá a webhelyéhez. A következőképpen telepítheti webhelye fő oldalain:

Olvasni:  Zenészbarát kuponok és kedvezménykódok

  • Töltse fel a favicon.ico fájlt a webhely kívánt könyvtárába.
  • Illessze be ezt a kódot a szakaszba:

  • Az ‘images’-t le kell cserélni arra a könyvtárra, ahol a kedvenc ikonja található.
  • A „favicon.ico”-t le kell cserélni arra, amit az ikonjának elnevezett.
  • Vegye figyelembe, hogy a rel érték lehet „icon”, „apple-touch-icon” vagy „apple-touch-icon-precomposed” is.
  • A href érték lehet egy relatív elérési út (ahol azt a fájl elérési utat használja, ahol a favicon tárolva van) vagy egy abszolút URL (ahol a domainjét használja, és hozzáadja a favicon fájlt az URL-hez a https://abc.com/favicon címen látható módon .ico)

Ebben a cikkben többet megtudhat arról, hogyan adhat hozzá kedvenc ikonokat. Arról is olvashatsz A Google irányelvei a kedvencekhez itt.

Gyakori okok, amelyek miatt a Favicon nem jelenik meg

Webhely-ellenőrző eszközünk segítségével ellenőrizheti, hogy a kedvenc ikonja megfelelően jelenik-e meg. Íme a gyakori okok, amelyek miatt a kedvenc ikonja nem jelenik meg, és hogyan lehet megoldani a problémákat:

Szintaktikai hibák

Egy egyszerű szintaktikai hiba abban a kódban, amelyet a kedvenc ikonjainak megvalósításához használ, azt eredményezheti, hogy a kedvenc ikonja nem jelenik meg. Íme egy példa:

A fenti kódnak 1 egyszerű szintaktikai hibája van:

  • A href hivatkozásból hiányoznak a záró idézőjelek

Böngészője kedvenc ikon nélkül gyorsítótárazta webhelyét

Amikor hozzáad egy favicont a webhelyéhez, előfordulhat, hogy nem jelenik meg, mivel a böngészője kedvenc ikon nélkül „mentette” a webhelyet. Törölnie kell a gyorsítótárat a böngészőjében, vagy másik böngészőt kell használnia.

Alternatív megoldásként adja hozzá a /favicon.ico címet a domain nevéhez a www.abc.com/favicon.ico címen látható módon

Hibás fájl elérési út

Győződjön meg arról, hogy a favicon fájl elérési útja helyes. Ha az ikonja a képek mappában van, akkor győződjön meg arról, hogy a fájl elérési útja az /images/favicon.ico címet tartalmazza, attól függően, hogy minek nevezte el az ikont.

Olvasni:  19 SEO statisztika a következő stratégiához

Ha a CSS-je és az ikonja testvérek, mivel „ugyanazon a szinten” vannak, akkor ügyeljen arra, hogy ne legyen perjel a favicon fájlneve előtt, mivel a href-ben a következőnek kell lennie:

href=“favicon.ico”

A böngésző nem jeleníti meg a kedvenc ikonokat, ha helyiek

Az olyan böngészők, mint a Chrome és a Safari, nem jelenítenek meg kedvenc ikonokat, ha azok helyiek (nem töltötték fel szerverre). A Chrome például csak akkor tudja megjeleníteni a favicont, ha az a letöltések mappában található.

Fontos, hogy a linket a megfelelő helyre helyezze el, hogy hozzáadja kedvenc ikonját. Ezt a weboldal fejléc részében kell elhelyezni, nem máshol. Míg a törzsbe helyezve működhet egyes böngészőkben, más böngészők, például a Chrome nem töltik be.

A Favicon fájlneve továbbra is az alapértelmezett fájlnév

Néha az oka annak, hogy a kedvenc ikonja nem jelenik meg, a fájlnév módosításának az eredménye. Ennek egyszerű megoldása a favicon fájl átnevezése az alapértelmezett „favicon.ico”-ról

Most koncentráljunk arra, hogy miért nem jelennek meg a kedvenc ikonok a Chrome, a WordPress, a Shopify, a Wix és a Squarespace felületeken:

Okok, amelyek miatt a Favicon nem jelenik meg konkrétan a Chrome-ban

A következő okok miatt előfordulhat, hogy kedvenc ikonja nem jelenik meg a Chrome-ban:

A Favicon mérete rossz

Említettük, hogy a Google-nak van konkrét irányelveket amelyeket követni kell, amikor kedvenc ikonokat ad hozzá webhelyéhez. Az egyik az, hogy az ikon méretének 48 többszörösének kell lennie, és nem lehet 16×16. Ha az ikon mérete 16 x 16, akkor nem jelenik meg.

Olvasni:  WordPress vs. Ueni.com

A tartalomkezelő rendszereknek (CMS-eknek) is vannak meghatározott méretei, amelyeket ajánlanak. A WordPress az 512 x 512-es, a Squarespace pedig a 300 x 300-as felbontást ajánlja. Ezek a CMS-ek képesek átméretezni a favicont, hogy az megfeleljen a különböző forgatókönyveknek. Nagyobb méretre van szükség például a könyvjelzőkhöz, míg a mobilhoz kisebbre.

Ez a cikk megvizsgálja a különböző favicon-méreteket, ahol azok a legalkalmasabbak, sőt, még az elavult méreteket is.

Csak azért, mert a favicon fájl a gyökérkönyvtárban van, ez nem jelenti azt, hogy automatikusan feltöltődik a webhely betöltésekor. Győződjön meg arról, hogy a fejlécben szerepelnek ezek a linkek:

Ezek importálják a favicont a webhelyére.

Okok, amiért a Favicon nem jelenik meg konkrétan a Shopify-ban

A következő okok miatt előfordulhat, hogy a kedvenc ikonja nem jelenik meg a Shopifyban:

A link elhelyezése fontos. Győződjön meg arról, hogy a szakaszban van, és nem a

részben.

Nézze meg, hogyan hozhat létre favicont online Shopify áruházába

Okok, amelyek miatt a Favicon nem jelenik meg konkrétan a WordPressben

A következő okok miatt előfordulhat, hogy a kedvenc ikonja nem jelenik meg a WordPressben:

A Testreszabásban a Webhely ikon az AMP Favicon számára készült

Ha a Testreszabót használja egyéni kedvenc ikonok feltöltéséhez, előfordulhat, hogy nem fog működni, mivel ez olyan oldalakra vonatkozik, amelyek AMP. A probléma megoldásához először el kell távolítania a Testreszabóval feltöltött favicont. Ezután telepítenie kell egy bővítménytFavicon a RealFvicon Generatortól‘. Ezzel a beépülő modullal feltöltheti azt a képet, amelyet kedvenc ikonjaként szeretne használni. Png vagy jpg formátumban kell lennie. A beépülő modul segít .ico formátumba konvertálni.

Lehet, hogy egy plugin testelemeket ad hozzá a fejedhez/fejedhez

Győződjön meg arról, hogy nincs olyan beépülő modulja, amely törzselemeket hoz létre a szakaszban. Menjen át a fejrészen, és ha olyan kódot lát, amely a törzsrészhez tartozik, ellenőrizze, hogy vannak-e beépülő modulok, amelyeket telepített, amikor hozzáadta a kedvenc ikonját a WordPress webhelyéhez. Menjen előre, és inaktiválja vagy akár távolítsa el.

Olvasni:  7 hatékony, folyamatos kapcsolattartó integráció a WordPresshez

Nem adott meg képtípust, ha az nem .ico

Ha az ikonja .png formátumú, akkor módosítania kell a favicon feltöltéséhez használt hivatkozást, hogy a típus szerepeljen a következőképpen:

Ezenkívül hozzá kell adnia az .ico fájlt a webhely gyökérkönyvtárához.

Ismerje meg, hogyan adhat hozzá favicont egy WordPress-webhelyhez.

Okok, amiért a Favicon nem jelenik meg konkrétan a Squarespace-en

A következő okok miatt előfordulhat, hogy a kedvenc ikonja nem jelenik meg a Squarespace-ben:

A gyorsítótárazott verzió még nincs érvénytelenítve

A szakaszban található sablonkód mindig a „favicon.ico” nevet használja fájlnévként. Ez a gyorsítótárazott verzió. Az érvénytelenítéshez módosítsa a fájlnevet.

Még mindig bejelentkezett a CMS-be

Ha még mindig bejelentkezett a CMS-be, előfordulhat, hogy továbbra is a Squarespace alapértelmezett ikonja látható. Egyéni kedvenc ikonjának megtekintéséhez ki kell jelentkeznie a CMS-ből.

Következtetés

A faviconok hasznosak a márka konzisztenciájában. Könnyen azonosíthatóvá teszik webhelyét, ahol a felhasználónak egy pillantással több webhelyet kell azonosítania, például ha sok lap van nyitva. Kiválóan alkalmasak visszatérő látogatók és ügyfelek számára. Amikor a felhasználó könyvjelzőkkel látja el webhelyét, a kedvenc ikonok könnyen azonosíthatóvá teszik azt.

A faviconok megvalósítása nem mindig megy zökkenőmentesen, és megvizsgáltuk a gyakori okokat, amelyek miatt a faviconok nem jelennek meg. Még olyan problémákat is megvizsgáltunk, amelyek bizonyos tartalomkezelő rendszerek – CMS-ek –, például WordPress, Shopify vagy SquareSpace használatakor felmerülhetnek. Amint azt már észrevette, a legtöbb probléma elég egyszerű, és kijavíthatja őket. Ne habozzon azonban szakszerű segítséget kérni, ahol szükséges.

Új publikációk:

Ajánlott