Content Marketing

Bevált gyakorlatok a kedvencek webhelyén való megvalósításához

Amikor eredetileg bemutatták őket, a favicon kijelölt egy képet, amelyet akkor kell megjeleníteni, amikor a felhasználók elmentik a URL parancsikont az asztalukon. Ma webhelye kedvenc ikonja megjelenhet a böngésző lapjain, az e-mail kliensekben, a közösségi médiában megosztott tartalmakban és a keresési eredményekben.

A favicon ma már minden webhely szükséges branding eleme, de gyakran figyelmen kívül hagyják… nem kellene. A faviconok általában a webböngészők különböző helyein jelennek meg, hogy segítsenek a felhasználóknak azonosítani és könyvjelzővel ellátni a webhelyeket. Íme néhány kulcsfontosságú pont a faviconokkal kapcsolatban:

  • Böngésző lapjai: Amikor a felhasználók megnyitnak egy webhelyet egy webböngészőben, a favicon megjelenik a böngésző lapon az oldal címe mellett. Ez vizuális azonosítót biztosít a megnyitott lap számára, megkönnyítve a felhasználók számára a több lap megtalálását és közötti váltást.
  • Könyvjelzők és kedvencek: Amikor a felhasználók kedvencként jelölnek meg vagy mentenek el egy webhelyet, a favicon gyakran megjelenik a webhely neve mellett a könyvjelzők vagy a kedvencek menüben. Segítségével a felhasználók gyorsan azonosíthatják és hozzáférhetnek mentett webhelyeikhez.
  • Böngésző címsora: Egyes böngészőkben, amikor a felhasználók felkeresnek egy webhelyet, a favicon megjelenik a böngésző címsorában vagy cím- és keresősávjában. Ez vizuális elemet ad a webhely URL-címéhez.
  • Keresési eredmények: Egyes keresőmotorok kedvenc ikonokat jeleníthetnek meg a keresési eredmények mellett, segítve a felhasználókat a webhelyek egyszerű azonosításában a keresési listákon.

A favicon egy webhely kicsi, ikonikus ábrázolása, amely javítja a felhasználói élményt azáltal, hogy vizuális jelzéseket ad a webhely azonosításához, a könyvjelzőkhöz és a lapok kezeléséhez a webböngészőn belül. A webdizájn és a márkaépítés fontos eleme.

Ikon fájltípusok

Eredetileg egy ICO fájlt, de számos megjeleníthető platformmal fejlődtek PNG és a SVG fájlokat. Az ICO-fájlok több ikonkép egyetlen fájlba történő összeállításának tekinthetők. Amikor létrehoz egy ICO-fájlt, különböző méretű és színmélységű ikonképeket állít össze egyetlen, meghatározott szerkezetű fájlba. Így működik az ICO fájl:

  1. Több ikon kép: Egy ICO-fájl általában több ikonképet tartalmaz különböző méretekkel és színmélységgel. Ezek a képek ugyanazt az ikont ábrázolják, de úgy vannak kialakítva, hogy különböző méretben jelenjenek meg a minőség romlása nélkül.
  2. Ikonkönyvtár: Az ICO-fájlon belül van egy ikonkönyvtár, amely megadja az egyes ikonképek attribútumait, beleértve a méretét, a színmélységét és a fájlon belüli helyét.
  3. Fejléc információk: Az ICO-fájl fejléc-információkat is tartalmaz, amelyek lényeges részleteket tartalmaznak a fájlról, például a fájlban tárolt ikonképek számát.
  4. Képadatok: Az ICO-fájl minden ikonképe nyers képadatként, tömörítés nélkül kerül tárolásra. Ez lehetővé teszi az egyes ikonképek gyors elérését és szoftver általi megjelenítését.
  5. Ikon visszakeresés: Ha egy alkalmazásnak vagy operációs rendszernek egy fájlhoz, mappához, parancsikonhoz vagy alkalmazáshoz társított ikont kell megjelenítenie, a kívánt méret és színmélység alapján le tudja kérni a megfelelő ikonképet az ICO-fájlból.

ICO

Előnyök:

  • Széleskörű támogatás: Az ICO egy hagyományos favicon formátum, amelyet széles körben támogatnak a különféle webböngészők, beleértve a régebbi verziókat is. Ez egy biztonságos választás a kompatibilitás biztosítására.
  • Több méret és színmélység: Az ICO fájlok több, különböző méretű és színmélységű ikonképet is tartalmazhatnak, lehetővé téve a favicon megfelelő megjelenítését különböző környezetekben.

Hátrányok:

  • Korlátozott méretezhetőség: Az ICO ikonok nem skálázódnak olyan jól, mint a vektorformátumok, például az SVG. Ha nem szabványos méretben jelennek meg, az ICO ikonok pixeles formában jelenhetnek meg.

PNG

Előnyök:

  • Veszteségmentes tömörítés: A PNG faviconok veszteségmentes tömörítést kínálnak, így kis fájlméret mellett is kiváló képminőséget biztosítanak. Ez különösen hasznos az éles és részletes ikonok esetében.
  • Átláthatóság: A PNG támogatja az alfa-átlátszóságot, lehetővé téve az összetett és félig átlátszó minták létrehozását, amelyek zökkenőmentesen illeszkednek a háttérhez.
  • Támogatás a modern böngészőkben: A PNG-t jól támogatják a modern webböngészők, és jó kompatibilitást kínál.

Hátrányok:

  • Több fájl: A különböző méretek és felbontások lefedéséhez több különböző méretű PNG-fájlt kell megadnia, ami megnövelheti a HTTP-kérések számát.
  • A vektortámogatás hiánya: A PNG egy raszteres formátum, ezért nem skálázódik olyan kecsesen, mint a vektoros formátumok, például az SVG.

SVG

Előnyök:

  • Vektor alapú: Az SVG egy vektoros formátum, ami azt jelenti, hogy minőségromlás nélkül méretezhető. Ideális bármilyen méretű, éles, kiváló minőségű ikonok létrehozásához.
  • Kis fájlméret: Az SVG fájlok gyakran kisebb méretűek a raszteres társaikhoz képest, így hatékonyak a webes használatra.
  • Sokoldalúság: Az SVG összetett és művészi tervezést tesz lehetővé, beleértve a többszínű ikonokat, színátmeneteket és bonyolult formákat.
  • CSS stílus: Az SVG faviconok egyszerűen stílusozhatók CSS segítségével, ami nagyobb tervezési rugalmasságot kínál.

Hátrányok:

  • Böngésző kompatibilitás: Míg a modern böngészők támogatják az SVG kedvenceket, a régebbi böngészők korlátozottan vagy egyáltalán nem támogatják. A szélesebb körű kompatibilitás érdekében elengedhetetlen tartalék formátumok, például ICO vagy PNG biztosítása.
  • Bonyolultság: Az SVG ikonok tervezése bonyolultabb lehet, különösen azok számára, akik nem ismerik a vektorgrafikus szoftvereket.

A favicon formátum kiválasztása a tervezési követelményektől és az elérni kívánt kompatibilitás szintjétől függ. Az ICO biztonságos választás a szélesebb körű kompatibilitás érdekében, a PNG veszteségmentes minőséget és átláthatóságot kínál, az SVG pedig ideális a skálázhatósághoz és a bonyolult kialakításokhoz, de gondosan mérlegelni kell a böngésző támogatását és a tartalékokat. A formátumok kombinációjának használata, amint az a következő példákban látható, maximális kompatibilitást és minőséget biztosíthat webhelye kedvenc ikonjai számára.

Hogyan hozzunk létre ICO fájlt

Véleményem szerint elég furcsa, hogy az Adobe Illustrator és a Photoshop alapértelmezés szerint nem készít .ICO fájlokat (pluginok elérhetőek). A különböző képméretek mindegyikét kiadhatja velük, de… majd elkészítheti őket a következő módszerek bármelyikével:

  • GIMP natívan támogatja az ICO fájlokat. Ez egy ingyenes, nyílt forráskódú platform, amely minden operációs rendszerhez elérhető.
  • ImageMagicknek egy ingyenes, nyílt forráskódú szolgáltatás, amelyet betölthet PC-re vagy Mac-re, lehetővé téve, hogy több fájlját egy ICO-fájllá egyesítse. Példa parancs:
convert image1.png image2.png image3.png favicon.ico
  • Vannak olyan online eszközök is, amelyek segíthetnek .ICO fájl létrehozásában, de érdemes körültekintően választani. Sokan átméreteznek egyetlen feltöltött képfájlt, és mindegyiket rosszul tömörítik. Favicon.io egy ingyenes online webhely, amely lehetővé teszi az ICO-fájl feltöltését és létrehozását. A platform használatakor mindig a legnagyobb fájlméretet és felbontást használja, mivel az automatikusan létrehozza a kisebb képméreteket.

Érdemes kísérletezni az ICO fájljával. Egyszerűen lekicsinyíti az emblémát egy 16 képpontos négyzet alakú ikonra, és megkülönböztethetetlenné teheti. Még azt is látni fogja, hogy nem a miénk a teljes logónk, csak a M logónkról.

image 3
Forrás: Favicon Checker

Ellenőrizze webhelye Faviconját

Favicon HTML legjobb gyakorlatok

A böngészők előnyben részesítik a kedvenc ikonok kiválasztását számos tényező alapján, beleértve a formátumot, a méretet és az adott deklarációk meglétét. A böngészők általában a következőképpen rangsorolják és választják ki a kedvenc ikonokat:

  1. Fájlformátum prioritás: A böngészők általában az .ico fájlokat részesítik előnyben, ha vannak, mivel ez a hagyományos favicon formátum. Ha megadja a .ico favicon segítségével <link rel="icon" type="image/x-icon" href="favicon.ico">, gyakran elsőbbséget élvez más formátumokkal szemben.
  2. Méret prioritás: A böngészők a size attribútumot is figyelembe veszik a kontextusnak leginkább megfelelő favicon kiválasztásához. Ha különböző méreteket ad meg a .png vagy .svg kedvenc ikonokhoz, a böngésző kiválasztja azt, amelyik a legjobban megfelel az eszköz megjelenítési követelményeinek.
  3. SVG „bármilyen” méret: Ha a „bármely” értéket használja a sizes attribútum egy SVG favicon deklarációban (sizes="any"), azt jelzi, hogy az SVG bármilyen mérethez képes alkalmazkodni. A böngészők előnyben részesíthetik a „bármilyen” méretű SVG-t, hogy biztosítsák a megfelelő méretezést a különböző képernyőfelbontásokhoz.
  4. Az utolsó nyilatkozat élvez elsőbbséget: Ha több, azonos formátumú és méretű favicon deklarációt ad meg, a böngésző általában az utolsó deklarációt választja, amellyel a HTML-ben találkozik. Ezért a sorrend az Ön <link> az elemek számítanak. Az utoljára talált kap prioritást.
  5. Visszatérés az alapértelmezett ikonra: Ha a megadott faviconok egyike sem felel meg a böngésző kritériumainak, vagy nincsenek favicon-deklarációk, akkor a böngésző alapértelmezett ikont (pl. a böngésző ikonját) vagy ikont sem használhat.
  6. Felhasználói beállítások: Egyes böngészők lehetővé teszik a felhasználók számára, hogy beállítsák a kedvenc ikonokat. A felhasználó választása ilyen esetekben felülírhatja a weboldal meghatározott kedvenceit.

Ha először egy ICO-favicon-deklarációt sorol fel, de azt szeretné, hogy az SVG-t előnyben részesített faviconként használjuk, előfordulhat, hogy az nem mindig működik megfelelően, mert egyes böngészők az első érvényes favicon-deklarációt részesítik előnyben. Azonban továbbra is biztosíthatja, hogy az SVG legyen az előnyben részesített favicon, ha utoljára adja meg, és használja a bármilyen méret attribútum.

Így teheti meg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website Title</title>

    <!-- Favicon Declarations -->

    <!-- .ico Format (for maximum compatibility) -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <!-- .png Format (for modern browsers) -->
    <link rel="icon" type="image/png" href="favicon.png" sizes="32x32">

    <!-- .svg Format (preferred) -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">

    <!-- Alternative Text for Accessibility -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any" alt="Your Website Favicon">

    <!-- Additional Sizes (optional) -->
    <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="favicon-48x48.png" sizes="48x48">

    <!-- End of Favicon Declarations -->

    <!-- Your other meta tags, styles, and scripts go here -->

</head>
<body>
    <!-- Your website content goes here -->
</body>
</html>

Ebben a példában az .ico formátum továbbra is szerepel a maximális kompatibilitás érdekében, de az SVG formátum utolsóként van megadva bármilyen méret attribútum. Ez a beállítás nagyobb előnyben részesíti az SVG formátumot, miközben továbbra is az .ico formátumot biztosítja tartalékként az azt előnyben részesítő böngészők számára. Az SVG utolsó megadásával a bármilyen size attribútum, növeli annak valószínűségét, hogy a modern böngészők az SVG-t választják kedvenc favicon formátumként, mivel az képes alkalmazkodni a különböző méretekhez.

Douglas Karr

Douglas Karr CMO of OpenINSIGHTS és az alapítója a Martech Zone. Douglas több tucat sikeres MarTech startupnak segített, több mint 5 milliárd dolláros átvilágításban segédkezett a Martech akvizíciókban és befektetésekben, és továbbra is segíti a vállalatokat értékesítési és marketingstratégiáik megvalósításában és automatizálásában. Douglas nemzetközileg elismert digitális átalakulás és MarTech szakértő és előadó. Douglas egy Dummie's Guide és egy üzleti vezetői könyv szerzője is.

Kapcsolódó cikkek

Vissza a lap tetejére gombra
közel

Adblock észlelve

Martech Zone ingyenesen tudja biztosítani Önnek ezt a tartalmat, mivel webhelyünkkel bevételt szerezünk hirdetési bevételek, társult linkek és szponzorálás révén. Nagyra értékelnénk, ha eltávolítaná hirdetésblokkolóját, miközben megtekinti webhelyünket.