Egy cikk, amelyben megvizsgáljuk, hogyan készítsünk megfelelő favicont az oldalhoz.
A favicon egy adott webhelyhez vagy weboldalhoz társított ikon. A favicon jelenléte a webhelyen általában lehetővé teszi, hogy jobban felismerhető legyen. Ez annak köszönhető, hogy ezen a weboldalon (mindegyik oldalán) lesz egy ikon, amelyre nézve a felhasználó tudni fogja, hogy milyen erőforrásról van szó. Az oldal favicon ikonja a böngésző különböző elemeiben látható, például lapon, címsoron, böngészési előzményekben (napló), 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 svg (skálázható vektorgrafika) vektoros 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 elkészítése a favicon számára
Fontolja meg a kép svg formátumú faviconhoz való elkészítésének alapvető lépéseit.
A webhely favicon ikonjaként használt kép megrajzolható, vagy beszerezhető a Google vagy a Yandex szolgáltatás képkeresőjével. Kívánatos svg formátumú képet (ikont) keresni. De ha nem talál megfelelő ikont svg formátumban, választhat másik formátumot (például png vagy jpg). Ezután az Inkscape programban egy speciális eszközzel konvertálja át vektorgrafikává (vektorizálja a rasztert).
Fontolja meg például, hogyan készíthet 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 favicon számára (letöltéshez - a kép helyi menüjében válassza a "Kép mentése másként ..." elemet):
Favicon generáció minden platformra
Minden platformhoz (iOS, Android, PC, MAC stb.) készítünk favicon ikonokat 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 be kell állítania a háttérszíneket, és be kell írnia az Android (Chrome) operációs rendszerhez tartozó alkalmazás nevét.
Ezután válassza ki az "Elhelyezem ..." opciót, amely azt mondja, hogy az eredményül kapott favicon fájlokat a webhely gyökerébe kell helyezni. Ez a művelet biztosítja a támogatást a legtöbb böngészőben.
A művelet után a realfavicongenerator.net szolgáltatás létrehozza a favicon ikont és a 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 elvégzése után kezdjük el a favicon csatlakoztatását a helyszínre. A favicon webhelyhez való hozzáadásának összes 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.
Weboldal favicon ellenőrzése
Az oldal faviconjának ellenőrzése a 4. bekezdésben található hivatkozás segítségével történik (ellenőrizd a kedvencedet). Ezt a műveletet a főmenü Favicon -> Favicon checker segítségével is végrehajthatja.
Az oldal faviconjának érvényesítésének megkezdéséhez válassza ki a webhely protokollt (http:// vagy https://) a megjelenő űrlapon, írja be a domain nevet, és kattintson a "Favicon ellenőrzése" gombra.
Ezt követően megbizonyosodunk arról, hogy az oldal faviconját a realfavicongenerator.net szolgáltatáson teszteltük, és minden platformon megfelelően megjelenik.
Favicon indexelés keresőmotorok által
A különböző keresőmotorok ikonjainak indexelésének folyamata 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, hogyan látják a keresőrobotok a webhely kedvenc ikonját:
- Yandex - https://favicon.yandex.net/favicon/domain_name
- Google – https://www.google.com/s2/favicons?domain=domain_name
A domain_name helyett a tartomány nevét kell megadni (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.
Új lecke workshop stílusában, és ezúttal a favicon titkait ismerkedünk meg. favicon - egy kis ikon, amely a könyvjelzők között és a böngészősávban jelenik meg. Ha saját weboldalad van, és még kis dolgokban is szeretnél összehasonlítani másokkal - favicon szükséges. A legelőnyösebb természetesen a könyvjelzők között látszik, 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 favicont csatolni a böngésző sorához, hanem arról, hogyan rajzoljunk saját kedvencet a Photoshopban.
Milyen formátumban kell elmenteni a favicont?
Minden a böngészőtől függ. Mert Microsoft Explorer illeszkedik ikon formátumba ICO. Ezzel a formátummal már a kurzor elkészítésekor találkoztunk. Más böngészőkhöz a Google Chrome előtt Apple Safari normál illeszkedés gif vagy PNG. faviconáttetsző lehet. Ehhez áttetszőbe kell menteni PNG, majd konvertálja a formátumba ICO. Egy jó programmal meg tudod csinálni IcoFX. Azonban számos harmadik fél webhelye létezik favicon létrehozására, és ezek közül a legnyilvánvalóbb a www.favicon.ru
Hogyan lehet favicont elhelyezni egy webhelyen?
Hogyan lehet biztos abban favicon működni fog? 4 feltételnek kell teljesülnie.
- A fájlt - favicon.
- Favicon mérete 16 a 16 képpont
- A legjobb hely a favicon számára a webhely gyökérmappája.
- Írja be az ikon címét a metacímkékbe fejléc a webhelyindexben.
HTML-ben í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ímke jelzi link . A modern böngészők leggyakrabban maguk keresnek egy fájlt a gyökéroldalon, az úgynevezett favicon, azonban az biztos, hogy nem árt megadni a pontos linkeket.
Hozzon létre egy favicont a Photoshopban
Teremt favicon Nagyon egyszerű. Akarja-e ugyanezt tenni favicon mint a Vkontakte vagy az Odnoklassniki? Jó favicon Nem teheti meg úgy, hogy csökkenti a nagyméretű képeket mindenféle favicon „generátorban”, amelyek bőségesen megtalálhatók az interneten. A favicon nagyon kicsi. Valójában olyanok vagyunk pixel art, amelynek megvannak a maga sajátosságai. Nem írhatsz levelet, csak kicsinyítheted 16 képpont .
Mint favicon homályos és homályos lesz, mivel a betű szélei néhány képponttal megnyúlnak az átméretezéskor. Kap egy kicsit anti-alias, ami általában jó dolog, de a pixel art esetében egyszerűen nincs szükség ilyen átmenetekre. A kerekségen viszont érdemes kerülni a túlzott „rongyoskodást”, különben kijön a hello gif 1999.
Hozzon létre egy méretű fájlt 16 x 16 képpont . Egy nagyon egyszerű áttetszőt készítünk favicon-val 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.
Rajzolja meg a hátteret
Miért a bevezetőben ennek a leckének látsz egy hatalmas sima és nyaldosott favicon? Mert a lecke bevezetőjére növeltem. Hogyan sikerült nagyítani a képet 16 képpont? Nagyon egyszerű, mindig vektorban dolgozom, ha lehet használni és ha van értelme. És a vektor könnyen átad bármilyen transzformációt, és nem veszít minőségében.
Válasszon egy eszközt Lekerekített téglalap eszköz. A beállítások panelen válassza ki azt a módot, amely lehetővé teszi a vektoros rajzolást. A panel legördülő menüjében jelölje be - Snap To Pixel. Erre azért van szükség, hogy a vektorpályák a pixelekhez illeszkedjenek, é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 megszabaduljunk a fehér háttértől, nincs rá szükségünk. 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.
A Favicon (angol. Favorite Icon) egy speciális formátumú kis ikon (kép, kép), amely az oldal megtekintésekor a böngésző címsorában, a böngésző lapján vagy a könyvjelzői között ("Kedvencek") jelenik meg.
A favicon kiegészítő dekorációja webhelyének, mini logójának. Akkor is megjelenik, amikor a webhelyek listáját tekinti meg a Yandex, Google keresésben, és kiemeli az Ön webhelyét a többi közül.
Miért van szüksége faviconra egy weboldalhoz?
A favicon az Ön webhelyének védjegye. Manapság sok vállalat rendelkezik egy jellegzetes favicon ikonnal, amely megkülönbözteti őket versenytársaitól. Annak érdekében, hogy a felhasználók jobban megjegyezzék az ikont, a cégeknek meg kell jeleníteniük logójukat, ami egyben az oldal fejlécének egyik eleme is legyen. A favicon használatának másik pozitív tulajdonsága, hogy nagyszámú oldal megtekintésekor a böngészőben nem látja az oldalak teljes címét, hanem csak az ikont látja, és azonnal könnyen meghatározhatja azt a lapot, ahová szeretne eljutni.
Mit lehet jobban ábrázolni egy faviconon?
- Az ikonnak meg kell egyeznie a webhely témájával.
- márka, ha webhelye ehhez a márkához kapcsolódik. Ugyanakkor a különböző oldalakon különböző márkák jeleníthetők meg;
- Használjon olyan favicont, amelyre kattintani szeretne, ez növeli a kattinthatóságot a Yandexben, a Google keresőjében;
- Készítsen több favicon-tervet webhelye különböző szakaszaihoz.
- Készítsen favicon-terveket különböző eseményekre (pl. újév, Valentin-nap vagy a kozmonautika napja :).
Hogyan készítsünk animált favicont?
Az ICO formátum nem támogatja az animációt. A modern böngészők azonban lehetővé teszik a GIF formátum használatát bélyegképekhez. Lehetőség van egy animált fájl megadására a modern böngészőkhöz (favicon.gif), és az ősi böngészőkhöz, például az Intertet Explorerhez, egy másikat (favicon.ico). Ehhez a fejrészben adja hozzá a következő két sort:
Természetesen először mindkét fájlt el kell helyeznie a webhely gyökérmappájába.
Mi a teendő, ha a képek megjelenítése le van tiltva a böngészőben?
Ha létrehoz egy favicont az oldal kódjába beágyazott képpel:
Ez az ikon akkor is megjelenik a böngészőben, ha a képek le vannak tiltva. .
Hogyan lehet favicont szerezni egy webhelyről
Nem minden webmester helyezi el a favicon.ico fájlt a webhely gyökerében. A favicon címének lekéréséhez használja a következő szkriptet:
]*)link([^>]*)(rel="icon"|rel="shortcut icon")([^>]*)>/iU", $html, $out)) ( $link_tag = $out ; if (preg_match("/href([s]*)=([s]*)"([^"]*)"/iU", $link_tag, $out)) ( $favicon = trim($out) ; if (strpos($favicon, "://")===false) $favicon = $url. "/" .ltrim($favicon, "/"); ) ) ?>
Keresőmotorok Google, Yandex és favicon
A keresőrobotok gyorsítótárazzák a webhely ikonjait. A gyorsítótárazott ikonok a következő kérésekhez állnak rendelkezésre:
Ezenkívül a Yandex különféle webhelyekről származó ikonok "szpredévé" teheti Önt:
iPhone és iPad ikonok
Ha nem is adsz meg linket a képhez, az iphone akkor is megkeres egy apple-touch-icon.png nevű fájlt az oldal gyökérmappájában, és ha megtalálja, akkor készít róla képet. , kerekítse le a sarkokban, és magától automatikusan tükröződik rajta. Ennek elkerülése érdekében az apple-touch-icon.png helyett apple-touch-icon-precomposed.png-t kell írni iPhone-ok tulajdonosai és pontok, mert. nekik készítünk egy gyönyörű, 57x57-es méretű ikont (egyébként lehet nagyobb is, de ez az ebéd képernyőn látható ikon szabványos mérete), így összekötjük:
Hogyan lehet dinamikusan megváltoztatni a favicont?
Ha megpróbálja megváltoztatni egy címketulajdon értékét a DOM-on keresztül, nem fogja elérni a kívánt eredményt. Az oldalikon dinamikus megváltoztatásához először el kell távolítania a régi ikonnal ellátott linkcímkét az oldal fejlécéből, majd hozzá kell adni az új tartalommal. Ez így történik: // Hivatkozás az új ikonfájlra var icon="new_favicon.ico"; var head = document.getElementsByTagName("fej"); // Keresse meg és távolítsa el a régi ikont a HEAD címkéből var links = head.getElementsByTagName("link"); for (var i = 0; i< links.length; i++) { var lnk = links[i]; if (lnk.rel=="shortcut icon") { head.removeChild(lnk); } } // Добавить новую иконку var link = document.createElement("link"); link.setAttribute("href",icon); link.setAttribute("type","image/x-icon"); link.setAttribute("rel","shortcut icon"); head.appendChild(link);HTML5 és favicon
A HTML5 hozzáadta a sizes attribútumot, hogy lehetővé tegye ugyanazon ikon több különböző verziójának deklarálását, és ezek lehetnek PNG-fájlok:
Hogyan lehet csempét deklarálni táblagépekhez Windows 8 rendszeren?
A Windows 8.0 bejelentése valahogy így néz ki:
A Windows 8.1 és az IE 11 a böngészőconfig.xml fájlban deklarált kép több verzióját várja. Például:
Lehetőség van nem deklarálni, ha a fájlnév nem változik:
Favicon - (az angol FAVorites ICON szóból: "ikon a kedvencekhez") - 16x16px vagy 32x32px méretű webhelyikon, amelyet a böngésző a címsávban vagy egy mentett könyvjelző mellett jelenít meg. Hagyományosan az ikon neve és kiterjesztése favicon.ico.
Szolgáltatásunk képes az Ön által kiválasztott képet (175 Kb-ig) weboldal ikonná alakítani (16x16px vagy 32x32px méretű). A generálás után csak a favicon.ico fájlt kell feltöltenie a kívánt webhelytárhelyre.
Az ikon hiánya az erőforrás technikai optimalizálásának hibája, csökkenti a márkaismertséget, csökkenti a keresési kivonatok CTR-jét, rontja a webes erőforrás keresését a böngésző könyvjelzőivel stb.
A Yandexnek van egy speciális botja, amely egyedileg indexeli az összes webhely kedvenceit. Az új ikonok kereséshez való hozzáadásának gyakorisága körülbelül két héttől egy hónapig terjed.
Honnan tudok letölteni egy favicont, hogy online legyen?
A webhelyikonként létrehozott favicon.ico megjelenítéséhez fel kell töltenie a webhely gyökérkönyvtárába (vagy bármely könyvtárba), és meg kell adnia az abszolút vagy relatív elérési utat a webhelysablon kódjában (), kódpélda :
Miért adja meg a Favicon elérési útját?
Ha egy webhely ikont használ a teljes webhelyen, és ha a favicon.ico a gyökérmappában található, akkor az elérési út elhagyható - a böngészők maguk találják meg, és webhelyikonként jelenítik meg. A nagy vagy egyedi erőforrások minden kategóriájukhoz különböző webhelyikonokat használnak. Ehhez megvan a különböző favicon.ico elérési útja a megfelelő sablonokban.
A mai cikk témája az, hogyan készítsünk online favicont egy webhelyhez vagy bloghoz a WordPressen. Ha valamilyen oknál fogva még mindig nem tudja, mi az, és miért van szükség erre a fájlra, akkor azt javaslom, hogy olvassa el a témában már írt cikkeket:
Általában minden webhelynek rendelkeznie kell ezzel a kis képpel.
Favicon.ico létrehozása egy webhelyhez
Tehát most megpróbálom elmondani, hol, hogyan és hogyan készítsünk favicont. De először azt kell tudni, hogy mekkora legyen a favicon az oldalhoz?
favicon egy ICO, JPEG, PNG, BMP és GIF formátumú kép, amely különböző méretű lehet, 16x16 pixeltől kezdve. Pontosan ekkora ikont kell feltölteni az oldalra, hogy a Yandex robot indexelje.
Más méretek másodlagos szerepet töltenek be, és nem jelennek meg a Yandex keresésében, hanem a böngészőkben való megjelenítésre használják, például az iPhone vagy iPad készülékeken. Ha azt szeretné, hogy webhelye kiemelkedjen a keresési eredmények között, ne feledje a következő szabályt.
Ha több különböző méretű favicon van, akkor a 16x16 px méretű kép elérési útját kell először elhelyezni az oldal kódjában, mivel a Yandex favicon robot csak az első címet olvassa be.
A legegyszerűbb módja egy favicon rajzolása a Photoshopban vagy bármely más grafikus szerkesztőben. Még egyszerűbben is megteheti, ha kész képet vagy fényképet készít, és egyszerűen konvertálja a kívánt formátumra és méretre. Mivel egy ilyen ikon nagyon kicsi, a kép apró részletei nem lesznek jól láthatóak rajta. Ezért jobb, ha a favicon a lehető legegyszerűbb, de ugyanakkor vonzó és egyedi. Végül is ez a webes erőforrás névjegykártyája.
Ha nem vagy nagy ismerője a Photoshopnak, akkor nem számít, az interneten számos ingyenes generátorszolgáltatás található egy webhely faviconjának létrehozásához. Némelyikük csak a képeket ICO formátumba tudja konvertálni, míg mások lehetővé teszik a favicon szerkesztését vagy létrehozását a semmiből. Szeretnék figyelmébe ajánlani egy kis áttekintést az ilyen online generátorokról.
Szolgáltatások online favicon generátor - favicon létrehozása online
Kezdem a legegyszerűbb szolgáltatásokkal, majd fokozatosan áttérek a fejlettebbekre, ahol a semmiből lehet statikus és animált ikonokat készíteni, illetve készeket szerkeszteni.
Ha éppen elindítja blogját vagy céges weboldalát, és még nincs logója, a Logaster szolgáltatás nagyszerű megoldást jelent az Ön számára. Ezzel létrehozhat egy logót, majd ez alapján a logógenerátor sok kedvenc favicont készít. A kényelem az, hogy a logó és a favicon ugyanabban a stílusban készül, így webhelye professzionálisabb lesz.
Egyszerű favicon generátorok
Kezdetnek néhány webhely, ahol egyszerűen készíthet ikont az oldalhoz úgy, hogy bármilyen képet favicon.ico fájllá alakít, szerkesztési lehetőség nélkül.
www.favicongenerator.com - talán a legminimalistabb szolgáltatás. Semmi több - válasszon egy képet, nyomja meg a „Favicon generálása” gombot! ” és töltse le a létrehozott ikont.
tools.dynamicdrive.com/favicon- egy egyszerű és érthető szolgáltatás, ahol három méretben készíthet favicont. A kapott fájlok letöltéséhez kattintson az alattuk található „FavIcon letöltése” gombra.
A www.cy-pr.com/tools/favicon és a www.favicon.co.uk az előzőhöz hasonló szolgáltatások. Az elsőben a favicon 16x16 és 32x32, a másodikban pedig 48x48 és 64x64 méretre tehető.
www.genfavicon.com - az ikonok létrehozásának teljes folyamata három lépésből áll:
- Válasszon ki egy fájlt (JPEG, GIF, PNG) a számítógépen, vagy egyszerűen írja be a kép URL-jét, és kattintson a „ Kép feltöltése“;
- Válassza ki a kép méretét (16×16, 32×32, 48×48, 64×64 vagy 128×128) és a kívánt területet, ha a képnek csak egy részét szeretnénk generálni a „ Rögzítés és kép“;
- Megnézzük az eredményt, és ha minden megfelel, letöltjük a fájlt.
Animált favicon készítése egy weboldalhoz online generátorokban
Most nézzünk meg néhány szolgáltatást, ahol animált faviconokat készíthet, valamint hozzáadhat latin szöveget, amely a ticker ikonnal együtt gördül. A valódi animációt nem minden böngésző támogatja.
www.favicon.by - orosz nyelvű szolgáltatás. Mindössze annyit kell tennie, hogy kiválaszt egy fájlt, írja be a szöveget latinul (ha szükséges), és kattintson a „Favicon létrehozása” gombra. Alább láthatja az eredményt, és letöltheti az archívumot a fájlokkal.
A www.favicon.com.mx az előzővel teljesen azonos szolgáltatás, csak angol nyelven.
Hol készítsünk favicont a semmiből - online favicon szerkesztők
antifavicon.com - ez a szolgáltatás, valamiért az anti előtaggal, abból a szempontból érdekes, hogy lehetővé teszi a favicon.ico fájl létrehozását saját kezűleg, de nem képként, hanem szövegként színes háttéren. Csak be kell írni a megfelelő betűket és kiválasztani a színeket. Egyébként itt készítettem a kedvencemet. Gondoltam, hogy később változtatok rajta, de most már megszoktam.
favicon-generator.org - itt a konverter mellett van egy ikonszerkesztő is. Ezenkívül a létrehozott favicont feltöltheti a nyilvános galériába, ahonnan az oldal többi felhasználója szabadon letöltheti.
A favicon.ru egy népszerű orosz online generátor, ahol képekből faviconokat készíthet és rajzolhat is. Azt is megrendelheti, hogy 20 dollárért favicont készítsenek a szakemberek. Érdeklődnék, hogy rendel-e valaki onnan?
A www.favicon.cc egy másik népszerű generátor, hasonló az előzőhöz. A szolgáltatás érdekessége, hogy itt akár 20 másodperces animációt is készíthetünk kockánként.
Megtekintheti az animált favicont, és letöltheti az előnézeti ablakban.
www.degraeve.com/favicon – egy másik online favicon generátor. Ez a szerkesztő az előzőekhez hasonlóan lehetővé teszi az ikon hátterének átlátszóvá tételét.
Talán mára elég, bár ezek messze nem minden online szolgáltatás. De még ezek is elegendőek ahhoz, hogy gyönyörű favicont hozzon létre webhelye vagy blogja számára, és látható legyen a keresési eredmények között.
Mégis elmentettem egy másik online ikongenerátort az oldalhoz későbbre. Ez a szolgáltatás külön bejegyzést érdemel, ahol elmondom, hogyan készítsünk favicont iPhone, iPod Touch és iPad böngészőkhöz, és elidőzök az animált ikonok webhelyre történő telepítésén. Ezen kívül bemutatom a Favicon Validator szolgáltatást, ahol az összes favicon.ico ikont ellenőrizheti és láthatja, ha ez a fájl egynél több képet tartalmaz.. Viszlát mindenkinek!
