A webdesignban, amint azt valószínűleg Ön is tudja, minden részlet számít. Az a személy, aki az Ön erőforrására váltott, nem látja külön az egyes elemeket, hanem a teljes képet más apró részletekből álló csomagként érzékeli. Így, ha valamit kihagysz az erőforrás fejlesztése során, ez a részlet később elronthatja az egész komplexumot, az egész kompozíciót.
Ilyen apróság lehet például egy gomb háttere, valamilyen apró elem rosszul megválasztott betűtípusa, vagy akár egy favicon is. Valóban, győződjön meg saját szemével – a nagy, jól ismert webhelyeken van egy külön ikon, amely jelzi azt a felhasználó böngészőjének „Könyvjelzők” részében. Enélkül az erőforrás fejlesztői nem tudták volna elkészíteni azt a kompozíciót, amelyre eredetileg törekedtek.
Ezért a webhely dizájnjának létrehozásakor ügyeljen egy olyan részletre, mint a favicon. Ebben a cikkben arról fogunk beszélni, hogyan illeszthetjük az erőforrás általános stílusához, valamint arról, hogy milyen méretűnek kell lennie ennek a képnek.
Webhely ikon
Először is határozzuk meg, mi ez az elem. Most nézze meg böngészője lapjának címét. Amint láthatja, egy kis kép található tőle balra, amely az erőforrás logójának egyszerűsített változatát jelzi. Ugyanez a kép a keresési eredmények között megjelenő webhely neve mellett is található. Ez az, amit a felhasználó vezérel, amikor látja a címet.
Sok webmester megérti, hogy szükség van egy ilyen képre – de kevesen tudják, hogy milyen favicon-méret lesz a legmegfelelőbb az oldalhoz. Ezért ebben a cikkben nemcsak arról adunk tájékoztatást, hogyan készítsünk ilyen ikont, és hogyan telepítsük az erőforrásunkra, hanem a képméretekről is beszélünk.
A favicon célja
Tehát a webhely fejléce melletti kép az azonosításra szolgál. Ez az eredeti célja: kifejezni azt az old alt, amelynek a nevét látjuk, és kiemelni a többiek szemében. Ez a lehető legegyszerűbben a grafika használatával valósítható meg: sokkal gyorsabban és könnyebben érzékeljük az információkat a képeken, mint a szöveges formátumban. A faviconok ebben segítenek nekünk. De ne felejtsük el, hogy a favicon mérete minimális a felhasználó szemében. Ez nem egy logó az oldal „fejlécében”, amely további információkat tartalmazhat feliratok, pontosítások vagy elérhetőségek formájában. Minden, ami a név melletti ikonban megjeleníthető, a lehető legjobban illeszkedjen a favicon méretéhez. És ő, mint már jeleztük, egyszerűen miniatűr (csak 16 x 16 pixel).
Hogyan válasszfavicon?
Tehát hogyan tervezhet egy webmester ikont a webhelyéhez? Meg kell jegyezni, hogy a webhely logójának egyszerű tömörítése leggyakrabban nem fog működni. Az adott erőforrás logója formájában elhelyezett emblémákon gyakran különböző elemek láthatók, amelyek nem mindig jelennek meg megfelelően miniatűr formában. Jobb, ha azonnal felhagyunk egy ilyen vállalkozással.
Természetesen a favicon mérete nem teszi lehetővé, hogy egyszerűen csak beillesszen egy feliratot. Ennél a felbontásnál minden szöveg egyszerűen láthatatlan lesz. Ki kell fejlesztenünk egy új ikont, amely közvetíti az oldal stílusát. A megoldások megtalálásához forduljunk ismét a legnagyobb oldalakhoz.
Sokan a szolgáltatás nevének stilizált kezdőbetűjét használják faviconként. Így működik például a Bing, a Yahoo, a Yandex, a Wikipédia, a Google. Van egy másik megközelítés is – ha van egy rövid webhelynév, beállíthatja az ikon háttereként. Annak érdekében, hogy a favicon mérete (pixelben eléri, ismétlem, 16 x 16 pixel) helyesen jelenítse meg ezt a feliratot, nem lehet hosszabb 3 betűnél. Ezt teszi például az Aol szolgáltatás.
Hogyan hozhatunk létre kedvenc ikont?
Többféleképpen készíthet ikont a webhely nevéhez. Természetesen a legegyszerűbb különböző kész megoldásokkal dolgozni. Beszélhetünk néhány olyan szolgáltatásról vagy programról, amely lehetővé teszi, hogy egy teljes értékű képből ikont készítsen annak kicsinyítésével. Javasolnám azonban egy ilyen logó önálló kidolgozását. Ez először adlehetőség valamit tanulni; másodszor pedig több eszközt fog biztosítani. Ehhez csak annyit kell tudni, hogy mit kell rajzolni, és azt is, hogy a végső változatban mekkora legyen a favicon. A webhely ikonméretéről egy kicsit később fogunk beszélni, de most megjegyezzük az ilyen képekkel való munka néhány finomságát. Különösen az ilyen képek formátumát kell tisztázni anélkül, hogy megemlítené a webhely faviconjának méretét. Ahogy a tapaszt alt tervezők megjegyzik, a képet-p.webp
Elmentheti a képet például a Photoshop segítségével, ahol az embléma megrajzolódik.
Favicon méretei
Tehát, most beszéljünk arról, hogy mekkora legyen az a kép, amelyet a webhely neve mellett látunk a keresési eredmények között. Alapértelmezésben, mint már említettük, mérete csak 16 pixel (mindkét oldalon). Ha azonban megpróbálja szerkeszteni ezt a képet a Photoshopban, saját szemével látni fogja, milyen kényelmetlen. Ezért azt javasoljuk, hogy nagyított képpel dolgozzon, amelyet a jövőben egyszerűen a szélei mentén össze lehet tömöríteni és elmenteni a kívánt formátumban.
Multiplatform
Ha azonban arról beszélünk, hogy mekkora legyen a favicon a webhelyén, még egy dolgot ne felejtsen el. Nem minden platform egyformán jeleníti meg az erőforrás-képet. Például a Retina kijelzővel rendelkező eszközök 32 x 32 pixelben „látják” a kedvenc ikonját. A Safariban és az új Windows platformon, és egyáltalán, ezek az ikonok elérik a 64-es méretetpixel.
Ezért azt javasoljuk, hogy mentse el az ikon különböző verzióit, és egyszerűen gondoskodjon a későbbiekben a felhasználói platformtól függően történő módosításáról. Egy másik érdekes pont - megpróbálhatja betölteni az ikont a legnagyobb formátumban, számítva arra, hogy a böngészőtől függően „zsugorodik”.
Külső szerkesztők
Persze jó, ha értesz a Photoshophoz, és tudod, hogy mekkora legyen a favicon, és hogyan érd el a kép mentése közben. Viszont nagyon sok a kezdő, aki még nem találkozott ilyen közelről a grafikus szerkesztőkkel, így nem tudja olyan könnyen megrajzolni a kívánt képet. Az ilyen webmesterek segítésére különféle szolgáltatások állnak rendelkezésre, amelyek lehetővé teszik az Önt érdeklő ikon automatikus létrehozását. Sok közülük még ingyenes is, ami nem igényel semmilyen befektetést a felhasználótól.
Néha csak regisztrálnod kell a munkához, de mint tudod, ez egyszer megtörténik – elvégre a cégek nem változtatják olyan gyakran a kedvencüket. Vessen egy pillantást a Google-ra, amely minden nap cseréli az emblémát, de nem érinti az ikont.
Hogyan telepíthetek egy favicont?
Általában nagyon egyszerű webhelyét úgy beállítani, hogy az megfelelően jelenítse meg a kívánt képet. Elég egy sor egyszerű lépés végrehajtása, amelyek lehetővé teszik, hogy a keresőmotorok és az egyszerű böngészők is elolvassák az információkat.
Ehhez az eredményül kapott képet a következővel kell mentenia favicon.ico nevet, és az erőforrás gyökerébe kell helyezni. Ez az, a képét a rendszer most automatikusan felismeri, és egy idő után összekapcsolódik a webhelyével.
Ezen a kötésen kívül hozzáadhat még egy sort, amely „sugalmazza”, hol található az ikonja. Így néz ki:
Telepítse a kódot a webhely fejlécébe.
Következtetések
Tehát cikkünk elolvasása után rájöttél, hogy mekkora legyen a favicon egy webhelyen, és mi az. Azt is gondolom, hogy megértette, hogy a megfelelő ikon megtalálása az erőforrásához elengedhetetlen, mert ez az Ön kezébe kerül mind a növekvő elismertség, mind a versenytársak közül való további kiemelés szempontjából. Legalábbis a legnagyobb oldalak ugyanezt teszik, ami jó példának tekinthető. Ráadásul nem sok erőfeszítést igényel – miután egyszer elkészített egy favicont és megfelelően telepítette webhelyére, a következő néhány hónapra elfelejtheti.
Ezért nyugodtan kísérletezzen, találjon ki valami újat, próbálja ki – és minden sikerülni fog!
