Favicon -(a szavak rövidítése "Kedvenc ikon") egy kis képméret 16x16 pixel, amit a webhely látogatója látni fog. A webhely URL-címe mellett jelenik meg a böngésző címsorában. Ezenkívül ez az ikon megjelenik a webhely neve mellett a megnyitott lapok, könyvjelzők és keresési eredmények listájában, így a felhasználók könnyebben megtalálhatják webhelyét más webhelyek között.

Alapértelmezett mint ikonok egy böngésző ikon jelenik meg a webhelyen. Annak érdekében, hogy az oldal eltérjen a többitől, és ne vesszen el a felhasználó által megnyitott számtalan szürke lapon, el kell készítenie saját eredeti kedvencét.

Bár sok modern webböngésző támogatja a GIF, PNG vagy más népszerű fájlformátumú faviconokat, az Internet Explorer minden verziója továbbra is megköveteli a kedvenc ikonokat fájlként ICO(Microsoft formátum). Ebben a formátumban minden böngésző megérti az ikonját.

Miért van szüksége faviconra?

Faviconra azért van szükség, hogy webhelye valahogy kitűnjön a keresési eredményoldalon a tömegből, és a böngésző számos megnyitott lapján látható legyen. A jó ikon olyan, mint a webhely logója, amely felismerhető lesz, és egy bizonyos attitűdöt hoz létre, és különleges bizalmat ébreszt.

Természetesen egy favicon felkelti a felhasználó figyelmét, és elolvassa a cikk címét. A cím egy jó részlettel és egy gyönyörű ikonnal kombinálva növeli az átkattintási arányt, és ennek megfelelően az erőforrás forgalma.

Azonnal szeretném megjegyezni, hogy a „GS” címkével ellátott webhelyeken maga az ikon nem képes javítani az erőforrás benyomását. De ez olyan, mint egy találkozó a ruhák körül. Egy csodálatos favicon minden bizonnyal megteremti az első benyomást egy olyan webhelyről, amely látogatásra hív.

Hogyan készítsünk favicont

Természetesen megpróbálhatsz egy kész favicon.ico fájlt keresni a www.iconfinder.com weboldalon, de szerintem sokan szeretnének valamit saját maguk készíteni. Végül is a favicon fogja kiemelni webhelyét a keresési eredmények között. Most már tudja, hogyan kell ezt megtenni. Tehát kezdjük.

A Logaster egy online szolgáltatás logók és arculatelemek készítésére. Ebben néhány kattintással automatikusan megkapja a webhely ikonját ICO és PNG formátumban.

De ne feledje, hogy egyetlen automatikus logógenerátor sem helyettesítheti az emberi kreativitást.

Természetesen a nagy cégek nem fognak ilyen eszközöket használni. Találnak egy drága tervezőt, aki professzionális logót készít nekik. De kis cégek és magánvállalkozók számára egy ilyen eszköz jól jöhet.

Hogyan működik az ikonok létrehozásának folyamata a Logasterben?

1. Annak érdekében, hogy a kedvenc ikonja megegyezzen a logójával, először létre kell hoznia egy logót (ingyenes).
2. Írjon egy nevet és ha akar, egy szlogent, jelölje meg a tevékenység típusát, és a Logaster önállóan számos logólehetőséget készít Önnek.
3. Válasszon megfelelő logót, később módosíthatja.

Íme, amit kaptam

Most kattintson a „Lobó letöltése” gombra. Az ingyenes verzióban egy Logaster.com vízjel lesz rajta

A logó megvásárolható. Ezt követően a kiválasztott formátumban (PNG, JPEG, PDF, SVG) és méretben (1024 px, 5000 px) tudod majd letölteni.

Most folytassuk a favicon létrehozását.

1. Ismét válassza ki a kívánt lehetőséget.
2. Módosíthatja az alakzatot négyzetesre, lekerekítettre, kerekre vagy egyáltalán nem alakra.
3. Ha szükséges, adjon hozzá egy színes körvonalat a Körvonal eszközre kattintva.
4. Kattintson a "Mentés" gombra.

Így alakult a favicon. Elvileg jól néz ki.

Favicon hozzáadása a webhelyéhez

1. Vásárolja meg és aktiválja a favicont.
2. Töltsd le.
3. Csomagolja ki a letöltött fájlt webhelye gyökérmappájába.
4. Illessze be a következő kódot a webhely összes oldalára a címkében :

Tervezési csomag kedvezménnyel

Ezenkívül megvásárolhatja a teljes arculat-készletet. Itt van egy lehetőség.

Kapcsolódó cikk: A Yandex.Speller csatlakoztatása a WordPresshez

Beépülő modul kedvenc ikonok létrehozásához

Számos különféle program létezik a faviconok létrehozására. Alapvetően primitívek, lehetővé téve az ikonok létrehozását 16 szín felhasználásával.

Favicont közvetlenül a Photoshopban hozhat létre. Ehhez szüksége lesz egy bővítményre, amely letölthető a www.telegraphics.com.au oldalról. A telepítéshez másolja a fájlt ICOFormat.8bi a c:Program FilesAdobeAdobe Photoshop CS2Plug-InsFile Formats könyvtárába.

Beépülő modul használata ICOFormat.8bi, a képeket „.ico fájlként” mentheti.

Az ICO (Windows Icon) formátum bővítmény telepítése

1. 64 bites Windows (Vista/Windows 7):
   • Indítsa újra a telepítés előtt;
   • Helyezze a beépülő modult a C:Program FilesAdobePhotoshopPlug-InsFile Formats mappába, de nekem más a felépítésem, ezt a fájlt itt tárolom: C:Program FilesAdobeAdobe Photoshop CS6 (64 Bit)Plug-ins.
   • Ha 64 bites Windows rendszeren fut, és a Photoshop CS4 vagy CS5 64 bites verzióját indítja el, töltse le a bővítmény 64 bites verziójátés tedd a 64 bites Photoshopnak megfelelő Plug-Ins mappába (azaz a „Program Files” mappába, nem a „Program Files (x86)” mappába).
2. Helyezze át a beépülő modult a „Fájlformátumok” mappába a Photoshop Plugins mappában:
   • Windows (32 bites) esetén ICOFormat.8bi
   • Windows (64 bites) esetén ICOFormat64.8bi
   • Mac OS X esetén ICOFormat.plugin(megjegyzendő, hogy a CS2, CS3/4 és CS5 külön verziók állnak rendelkezésre)
   • Mac OS X/Classic esetén icoformátum
   • 68K MacOS esetén icoformátum (68K)
3. Ha Corel PSP Photo X2-t használ, helyezze be a beépülő modult a C:Program FilesCorelCorel Paint Shop Pro Photo X2LanguagesENPlugIns mappába.
4. Lépjen ki, és indítsa újra a Photoshopot, ha már fut.

Van egy online szolgáltatás is: www.convertico.com. A ConvertICO egy ingyenes online ICO/PNG fájl konvertáló. Gyorsan működik és könnyen használható. Az asztali ikonok, az alkalmazásikonok és a webhelyek kedvenc ikonjainak konvertálására szolgál.

Hogyan készítsd el magad a favicon.ico-t

1. Nyissa meg a Photoshop programot.
2. Hozzon létre egy 32x32 pixeles dokumentumot.
3. Szúrjon be egy intelligens objektumot a kész képből az Illustratorból.
4. A „Mentés másként” paranccsal mentse el a favicont .ICO * formátumban.
5. Töltse fel a kapott favicont a webhely gyökérkönyvtárába, és csatlakoztassa egy WordPress-témán keresztül, vagy regisztrálja manuálisan a webhelysablonban. Korábban már írtam a favicon csatlakoztatásáról.

*Ha nincs telepítve speciális bővítmény ICO (Windows Icon) formátum, letöltheti a www.telegraphics.com.au/sw/ oldalról. Vannak Mac, Windows 32, 64 bites operációs rendszerekhez, amelyek támogatják a Photoshop összes verzióját, beleértve a CS6-ot is.

favicon kijelző

Az Ön webhelyére megjelenített egy favicont, egyszerűen elhelyezhető a webhely gyökerében. A böngésző és a keresőmotorok maguk állapítják meg, hogy van-e favicon.ico fájlja, és automatikusan megjeleníti azt. Ez a módszer a legegyszerűbb, és az esetek 95%-ában hatásos. De a favicont kifejezetten összekapcsolhatja.

Mi az a favicon?

Azok számára, akik nem tudják, mi az a favicon, adunk egy kis információt, ami segít felgyorsulni. A favicon egy kis, 16x16 vagy 32x32 képpont méretű ikon, amely általában logót, egy márka első betűjét vagy jellegzetes képet tartalmaz, amely tükrözi az üzlet típusát vagy a webhely témáját.

Miért fontos a favicon?

A favicon a következő funkciókat látja el:

Márkaépítés.

A webhely azonosítása a felhasználó által (könnyű használat).

Professzionális megjelenést kölcsönöz az oldalnak.

Nézzük meg közelebbről a faviconok használatának fő előnyeit.

Márka felismerés

A Favicon olyan, mint egy kis webhely-identitás. Ahogy a bevezető részben említettük, egy favicon segít a felhasználónak megjegyezni az Ön webhelyét a sok megtekintett webhely között. Legyen szó böngészési előzményeiről, Google keresési eredményeiről vagy böngészője könyvjelzővel ellátott webhelyeinek listájáról, a faviconok segítenek a felhasználóknak abban, hogy könnyen felismerjék és elérjék webhelyét.

Bizalom

A felhasználók általában az alapján ítélik meg az áruk és szolgáltatások online eladóit, hogy mennyire professzionális webhelyük. A favicon hiányában jelentkező gondatlanság (a keresőmotorok egy favicon nélküli webhelyet egy üres dokumentum ikonjaként jelenítenek meg) könnyen bizalomvesztéshez vezethet, különösen, ha a felhasználók összehasonlítják Önt versenytársaival.

Ismételt látogatások

Köztudott, hogy az emberek jobban reagálnak a képekre, mint a szövegekre. Tegyük fel, hogy webhelyének egy látogatója sietett, amikor először meglátogatta, és úgy döntött, hogy felveszi a könyvjelzők közé, hogy később visszatérhessen. Tegyük fel, hogy ez a személy később úgy dönt, hogy újra felkeresi az Ön webhelyét, és a könyvjelzőihez fordul. Szerencsés, ha van egy felismerhető kedvence, például a Google kiemelkedő és egyedi G-je, és a felhasználók megtalálják. Ha nincs faviconja, akkor akár a könyvjelzőlistájáról is eltávolíthatják.

Felhasználói időt takarít meg

A Faviconok megtakarítják a felhasználónak a webhely azonosítására fordított időt a könyvjelzőkben, az előzményekben vagy más olyan helyeken, ahol a böngésző kedvenceket helyez el a gyors azonosítás érdekében. Egyszerűen megkönnyíti a webhely átlagos látogatójának életét.

SEO előnyei

Ha webhelyén van kedvenc ikon, akkor jobban látható lesz a keresési eredmények között, mint azok, amelyek nem rendelkeznek ilyen ikonnal, és így több látogatót vonzhat.

Hogyan készítsünk favicont?

Számos eszköz létezik, amelyekkel percek alatt létrehozhat egy favicont. Ha nem rendelkezik tervezési készségekkel, vagy nem tudja, hogyan csinálja, megpróbálhat favicont létrehozni a Logaster segítségével.

Ehhez kövesse a lépésenkénti utasításokat:

5. lépés: Hozzon létre egy favicont

Most, hogy már van logója, kattintson a „Favikon létrehozása ezzel az emblémával” elemre a logó oldalon.

6. lépés: Válassza ki a kívánt favicon dizájnt

A logóhoz hasonlóan a Logaster is több tucat gyönyörű és használatra kész favicont fog generálni. Válassza ki kedvenc dizájnját. Az előnézet lehetővé teszi, hogy megnézze, hogyan fog kinézni a kedvenc ikonja az oldalon.

Ha módosítani kell a favicont, akkor ezt a logó szerkesztésével teheti meg, ahogy a faviconok a logóterv alapján jönnek létre. Tehát ha például egy másik favicon színt szeretne, akkor vissza kell lépnie a logó oldalára, módosítania kell a színét, majd újra létre kell hoznia a favicont.

A következő oldalakon találhat ihletet a faviconokhoz:

7. lépés: Töltse le a favicont

Megvásárolhatja a favicont külön 9,99 USD-ért, vagy vásárolhat egy tervezési csomagot, amely nemcsak a favicont, hanem logót, névjegykártyát, borítékot és fejléces papírt is tartalmaz. Megtudhatja, hogyan vásárolhat Design Packet.

Fizetés után letöltheti a favicont ico és png formátumban.

Hol használhatok favicont?

Használhatja a favicont:

Az oldalon;

Mobil eszközök. A felhasználó hozzáadhat egy favicont eszköze kezdőképernyőjéhez (olyan, mint egy könyvjelző) - Android, IOS, Windows Phone stb.;

Programok és alkalmazások PC-re/Mac-re.

Hogyan telepítsünk favicont egy webhelyre?

Miután megkapta a favicont, a telepítés a szerverre nem tart tovább néhány percnél, és két lépésben történik meg. Ehhez hozzá kell férnie webhelye gyökérkönyvtárához, és egy szövegszerkesztőre van szüksége a webhely HTML-kódjának módosításához.

1. lépés. Fel kell töltenie a favicon.ico fájlt a szerverre. Ehhez le kell töltened és telepítened kell egy ftp-klienst, például a FileZillát. Ezután adja meg felhasználónevét és jelszavát, és töltse le a fájlt. Részletesebb utasításokat olvashat a favicon fájl feltöltésével kapcsolatban.

2. lépés. Most szerkesztenie kell webhelye HTML-oldalát, hogy a böngészők megtalálják kedvenc képét. Az FTP ablak megnyitásakor keresse meg és töltse le az index.html vagy header.php fájlt a szerverről.

Nyissa meg az index.html fájlt egy szövegszerkesztőben - Notepad, Notepad++, Sublime Text.

Ha webhelye tiszta HTML-t tartalmaz, illessze be a speciális kódot az index.html fájl HEAD területére.

A kód a Logaster honlapján található favicon oldalon másolható.

Ha WordPress-t használ, illessze be az alábbi kódot a header.php fájl HEAD területére.

Ha ez megtörtént, töltse le a fájlt vissza oda, ahol kapta. Kész! A favicon megtekintéséhez töltse be újra a webhely oldalát.

A legtöbb modern böngésző elég okos ahhoz, hogy ilyen kód nélkül is megtalálja a favicon fájlt, de csak akkor, ha a faviconnak van egy 16x16 pixeles képe, a neve favicon.ico, és a webhelye gyökérkönyvtárába van mentve.

Reméljük, hogy ez a cikk hasznos információkkal szolgált Önnek, hogy segítsen létrehozni egy favicont, amely sikeresebbé és vonzóbbá teszi webhelyét.

Hello barátok! Nemrég telepítettem egy favicont az egyik blogomra, és arra gondoltam, hogy még mindig nincs cikkem ebben a témában. Akkor miért nem írsz? Megértem, hogy a téma elcsépelt, és ezt sokan már régóta tudják. Sokan, de nem mindegyik, a wordstat.yandex.ru statisztikái szerint (lásd az alábbi képernyőképet). Mindannyian először készítettünk favicont, és hasonló információkat kerestünk. Tehát a kezdő webmesterek megtalálják a blogomon. Ráadásul pont erre a célra hoztam létre. És a keresőmotoroktól érkező további forgalom ehhez a kéréshez nem fog fájni nekem. Akkor gyerünk.

Mi az a favicon.ico

Először is határozzuk meg, mi az a favicon, és miért van rá szükségünk. Erre ad választ a Wikipédia () ezekre a kérdésekre.

Könnyebb megmutatni, mint szavakkal elmagyarázni. Az alábbi képernyőképen megmutattam, hogyan jelennek meg a kedvenc ikonok a Google Chrome-ban. Hasonló a helyzet más böngészőkben is.

Összességében, favicon az oldalhoz egy speciális ikon vagy kép, 16x16 pixeles ICO formátumban. Általában ez a fájl neve favicon.icoés a webhely gyökérmappájában található. Más méretek (24×24, 32×32, 48×48 stb.) és formátumok (JPEG, BMP, PNG és GIF) is lehetségesek. Ennek megfelelően a PNG formátum lehetővé teszi, hogy átlátszó háttérre, GIF - animált ikont készítsen.

Miért van szüksége faviconra?

A favicon ico fájl nagyon fontos egy webhely számára. És nem csak azért, mert egy ilyen kép megkönnyíti a kívánt webes erőforrás megtalálását a nagyszámú böngészőkönyvjelző között. A fő jellemzők és előnyök eltérőek.

A helyzet az, hogy a Yandex kedvenc ikonokat jelenít meg a keresési eredmények között minden olyan webhelyen, amelyre telepítve van. Egy egyedi és gyönyörű favicon felhívja magára a figyelmet, és lehetővé teszi, hogy erőforrása kiemelkedjen a versenytársak közül, ezáltal rákényszerítve az embereket, hogy rákattintsanak, és begyűjtse a keresési forgalmat. Emellett egy emlékezetes favicon is hozzájárul ahhoz, hogy az oldalt márkaként ismerjék el az interneten. Fogadd el, hogy mindenekelőtt a képpel ellátott linkre akarsz kattintani.

Érdemes elmondani, hogy a Yandex nem javasolja, hogy a kép áttetsző legyen, és az animáció csak a FireFox böngészőben támogatott. Azt is meg kell értenie, hogy a kép méretének növekedésével a fájl súlya és a tárhely terhelése növekszik. Ezért jobb, ha bármely webhelyhez (WordPress, Joomla, DLE stb.) használ egy favicont .ico formátumban, amelynek mérete 16 x 16 pixel.

Ha egy ilyen ikont szeretne telepíteni egy webhelyre, először rendelkeznie kell vele. Itt több lehetőség is van:

1. kész faviconok letöltése;
2. készítse el a favicon.ico webhelyet Photoshop vagy speciális online generátorok segítségével.

Az első módszer sokkal egyszerűbb, de csökkenti az egyediség valószínűségét. Ennek ellenére vegyük fontolóra.

Honnan tölthető le a favicon.ico. Kész favicon gyűjtemények a weboldalhoz

Egy webhely faviconjának letöltéséhez csak írja be ugyanazt vagy egy hasonló lekérdezést a keresőmotorba. Higgye el, eredményekben nem fog hiányozni. Az alábbiakban megadom több forrás címét, ahonnan kész képeket tölthet le a faviconhoz. Némelyikük lehetővé teszi saját ikonok létrehozását generátorok segítségével.

Ikongalériák (favicon.ico) a webhelyhez:

• www.iconj.com/gallery.php – egy nagy képgyűjtemény és egy online generátor;
• www.audit4web.ru/info/favicon/– több mint 15 000 darab van itt;
• www.favicon.cc/?action=icon_list&order_by_rating=1– animált és statikus ikonok generátora és galériája;
• www.favicon.co.uk/gallery.php – Favicon generátor és favicon katalógus az oldalhoz;
• thefavicongallery.com – egy másik képgaléria.

De talán a findicons.com a legjobb hely különféle ikonok és logók letöltésére webhelyéhez.

A szolgáltatás rövid áttekintése:

A képek különböző formátumban és méretben jelennek meg. A favicon.ico megtalálásához és letöltéséhez a findicons.com webhelyen ki kell választania egy képet, és kattintson a „Részletek” gombra. A megnyíló ablakban kattintson a méretek számát tartalmazó sorra.

Remélem rájössz.

Egy másik csodálatos szolgáltatás ikonok szerinti kereséssel www.iconsearch.ru.

Itt minden egyszerű. A keresősávba beírjuk azt a témát, amely alapján a képet keresni fogjuk, vagy a címkefelhőt használjuk. Lehetőség van a háttér méretének és színének kiválasztására (fehér, átlátszó, fekete).

A kiválasztott favicon letöltéséhez kattintson a PNG vagy ICO formátum ikonra. A „További részletek” gombra kattintva megtekintheti ezt az ikont más méretben és további ikonokat ebből a készletből.

Itt be is fejezem, különben több könyv lett belőle arról, hogy hogyan lehet letölteni a favicon ico-t egy webhelyhez. De erről a WordPress blogon is mesélni akartam. Most legközelebb, ne hagyd ki. Viszlát!

Új lecke műhelystílusban, és ezúttal a favicon titkait ismerjük meg. Favicon - egy kis ikon, amely a könyvjelzők között és a böngészősávban jelenik meg. Ha van saját weboldalad, és még kis dolgokban is szeretnél kitűnni mások közül - favicon szükséges. Természetesen a könyvjelzők közül ez tűnik a legelőnyösebbnek, a grafikai azonosítás nélküli, megfakult címlista hátterében. A leckénk azonban nem annyira arról szól, hogyan kell a böngészősávhoz favicont csatolni, hanem arról, hogyan rajzoljunk saját kedvencet a Photoshopban.

Milyen formátumban kell menteni a favicont?

Minden a böngészőtől függ. Mert Microsoft Explorer megfelelő ikonformátum ICO. A kurzor elkészítésekor már találkoztunk ezzel a formátummal. Más böngészőkhöz a Google Chrome előtt Apple Safari rendes megteszi GIF vagy PNG. Faviconáttetsző lehet. Ehhez el kell mentenie áttetszőben PNG, majd konvertálja a formátumba ICO. Ezt egy jó programmal meg lehet tenni IcoFX. Azonban sok harmadik féltől származó webhely létezik faviconok generálására, és ezek közül a legnyilvánvalóbb a www.favicon.ru

Hogyan lehet elhelyezni egy favicont egy weboldalon?

Hogyan lehet biztos abban favicon működni fog? 4 feltételnek kell teljesülnie.

• A fájlt - favicon.
• Favicon mérete 16 tovább 16 képpont
• A favicon optimális helye a webhely gyökérmappája.
• Írja be az ikon címét a metacímkékbe heder a webhelyindexben.

HTML kifejezésben így néz ki:

Különböző böngészőkhöz több ikont is létrehozhat, például egyet a formátumban ICO, a másik pedig be PNGés mindezt a címkén keresztül jelezze link . A modern böngészők leggyakrabban a webhely gyökerében keresnek egy fájlt favicon, azonban az biztos, hogy nem árt megadni a pontos linkeket.

Hozzon létre egy favicont a Photoshopban

Teremt favicon Nagyon egyszerű. Szeretnél egy ilyet készíteni? favicon mint a VKontakte vagy az Odnoklassniki? Jó favicon nem lehet megcsinálni a nagy képek csökkentésével mindenféle favicon „generátorban”, amelyek tele vannak velük az interneten. A favicon nagyon kicsi. Valójában olyanok vagyunk pixel art, amelynek megvannak a maga sajátosságai. Nem lehet levelet írni, és csak kicsinyíteni 16 képpont .

Mint favicon homályos és homályos lesz, mivel átméretezéskor a betű szélei több képponttal átfedik egymást. Ki fog derülni anti-alias, ami általában jó, de a pixel art esetében egyszerűen nincs szükség ilyen átmenetekre. Másrészt kerülni kell a túlzott „rongyolást” a kerekségen, különben a hello 1999 gifjei lesznek.

Hozzon létre egy méretű fájlt 16 x 16 képpont . Egy nagyon egyszerű áttetszőt készítünk favicon s levél formájában, egy kis mélységgel. A mélységet az árnyék és a színátmenet hozza létre.

A háttér rajza

Miért látod a lecke bevezetőjében egy hatalmas sima és nyalott favicon? Mert a lecke bevezetőjéhez kinagyítottam. Hogyan sikerült minőségileg nagyítani a képet? 16 képpont? Nagyon leegyszerűsítve, mindig vektorral dolgozom, ha lehetséges és van értelme. És a vektor könnyen elvisel bármilyen átalakulást, és nem veszíti el a minőségét.

Válasszon ki egy eszközt Lekerekített téglalap eszköz. A beállítások panelen válassza ki a módot, amely lehetővé teszi a vektoros rajzolást. A panel legördülő menüjében van egy pipa - Snap To Pixel. Erre azért van szükség, hogy a vektorpályák pixelekre legyenek illesztve, és ne rajzoljanak „közöttük”.

Van felületünk favicon, és az áttetsző élek sima kerekséget hoznak létre. Most itt az ideje, hogy megszabaduljon a fehér háttértől, nincs rá szükség. Kapcsolja ki a láthatóságát. Vagy kattintson duplán a rétegre, normál réteggé alakítva, majd törölje.

Egy cikk, amelyben megvizsgáljuk, hogyan készítsünk megfelelő favicont egy webhelyhez.

A favicon egy adott webhelyhez vagy weboldalhoz társított ikon. Ha van egy favicon egy webhelyen, az általában jobban felismerhető. Ez annak köszönhető, hogy ezen a weboldalon (mindegyik oldala) lesz egy ikon, amelyet megnézve a felhasználó tudni fogja, hogy milyen forrásról van szó. A webhely favicon ikonja a böngésző különböző elemeiben látható, például a lapon, a címsoron, a böngészési előzményekben (naplóban), a könyvjelzősávban stb. Ezen kívül a favicon ikon a Yandex keresési eredményei között is megtalálható a webhely neve mellett . A favicon ikon akkor is használatos, ha hivatkozást helyez el (a webhely oldalára) az iOS (Safari), Android (Chrome), Windows 8 és 10 operációs rendszerek főképernyőjén.

Favicon hozzáadása egy webhelyhez

A favicon webhelyre történő telepítésének folyamata általában a létrehozásával kezdődik. Tekintettel arra, hogy a favicon ikon felbontására és formátumára vonatkozó követelmények a különböző eszközökön eltérőek, jobb, ha először vektoros svg (skálázható vektorgrafika) formátumban készíti elő. Ez a művelet lehetővé teszi, hogy egyetlen kép (svg) használatával egy favicon ikont kapjon kiváló minőségben 16x16 pixeles és 512x512 képpontos felbontással.

Az svg grafikával való munkavégzés eszközeként használhat egy professzionális ingyenes vektorszerkesztőt, például az Inkscape-et.

Kép előkészítése a faviconhoz

Nézzük meg az svg formátumú kép faviconhoz való elkészítésének alapvető lépéseit.

A webhely faviconjaként használt kép megrajzolható vagy beszerezhető a Google vagy a Yandex képkeresőjével. Célszerű egy képet (ikont) svg formátumban keresni. De ha nem talál megfelelő ikont svg formátumban, akkor választhat másik formátumot (például png vagy jpg). Ezután az Inkscape programban egy speciális eszközzel konvertálja vektorgrafikává (vektorizálja a rasztert).

Például nézzük meg, hogyan készíthetsz az Inkscape segítségével képet (ajtóikont) svg formátumban egy favicon számára.

Példák előkészített képekre (piros nyíl, villanykörte, pillangó, óra, szív és könyv) a faviconhoz (letöltéshez - válassza a "Kép mentése másként..." lehetőséget a kép helyi menüjében):

Favicon generálása minden platformhoz

Minden platformhoz (iOS, Android, PC, MAC stb.) tudunk favicon ikonokat generálni a http://realfavicongenerator.net/ oldalon.

Ehhez kattintson a "Select your Favicon picture" gombra, és válassza ki az előkészített képet (door.svg) a párbeszédablakban.

Ezt követően konfigurálnia kell a háttérszíneket, és meg kell adnia az Android operációs rendszerhez tartozó alkalmazás nevét (Chrome).

Ezután válassza ki az „Elhelyezem…” opciót, amely azt jelzi, hogy az eredményül kapott favicon fájlokat az oldal gyökerébe kell helyezni. Ez a művelet biztosítja, hogy a legtöbb böngésző támogatja.

A művelet után a realfavicongenerator.net szolgáltatás létrehoz egy favicon ikont és HTML kódot. A művelet eredménye megjelenik a képernyőn.

Favicon telepítése egy webhelyre

Az előkészítő műveletek befejezése után megkezdjük a favicon csatlakoztatását a helyszínre. Az ikonok webhelyhez való hozzáadásának minden alapvető lépése megtalálható a „Kedvencek telepítése” oldalon.

Alap lépések:

Például a CMF MODX-en a favicon (HTML-kód) oldalakhoz való csatlakoztatása általában egy darabban történik, amely a dokumentum fejrészét képezi.

Az oldal faviconjának ellenőrzése

A webhely favicon ellenőrzése a 4. bekezdésben található hivatkozás segítségével történik (ellenőrizze kedvenc ikonját). Ez a művelet a Favicon -> Favicon checker főmenüben is végrehajtható.

A webhely favicon érvényesítésének megkezdéséhez válassza ki a webhely protokollt (http:// vagy https://) a megadott űrlapon, írja be a domain nevet, és kattintson a „Favicon ellenőrzése” gombra.

Ezek után megbizonyosodunk arról, hogy az oldal faviconját a realfavicongenerator.net szolgáltatás tesztelte, és minden platformon megfelelően megjelenik.

Webhely favicon indexelése keresőmotorok által

Az ikonok indexelésének folyamata különböző keresőmotoroknál eltérő időt vesz igénybe. Például a Yandexnél ez a folyamat több hónapig is eltarthat.

A következő URL-ek használatával ellenőrizheti, hogy a keresőrobotok hogyan látják a favicon ikont egy webhelyen:

• Yandex - https://favicon.yandex.net/favicon/domain_name
• Google – https://www.google.com/s2/favicons?domain=domain_name

A domain_name helyett a domain nevet kell megadnia (például webhely).

Megjegyzés: Az animált képek (gif) faviconként való használatát csak egyes böngészők (Firefox) támogatják. Más böngészők statikus képet használnak faviconként.