Hogyan készítsünk egy világos favonot

Miért kell minden webhelynek szüksége van Favonra, és a Favonu a megfelelő méret és formátum

Jan 17, Olvasás: 12 perc

Webes erőforrás ikon, ikon, favon és még Favonka – amint nem hívnak olyan kompakt képet, amely a webhely mini-logójának szerepét végzi.

Egy kis ikonról beszélünk, amely minden egyes nyitott böngésző lapon van. Ez a favona, amely segít gyorsan megérteni, hogy melyik helyen van minden lapon – különösen akkor, ha olyan sokan vannak, hogy lehetetlen elolvasni a nevet.

Ebben a cikkben úgy döntöttünk, hogy kitaláljuk, hogy miért van szükségem Favona-ra, milyen helyeken láthatók, hogy meg kell hoznia egy favonot, és milyen formátumot kell használni.

Ahogy már kitaláltad, a favon nem olyan egyszerű, mint az első látásra. Ez nem csak egy kis kép, amely “díszíti” a webhelyét, hanem az azonosítás, a márkázás és a használhatóság fontos részét.

Mi a favon és ahol használják

Favon (favicon) – Ez az angol szóbeszédben van. “Kedvencek” ikon (kedvencek). Ez az úgynevezett könyvjelzők az Internet Explorer böngészőben, ahol az első alkalommal kezdett használni a vizuális ikonokat, hogy gyorsan megtalálják a kívánt webhelyet.

Általában a webhely Favy tartalmaz egy logót, a cég nevének első betűjét vagy bármely más képet, amely megfelel az üzleti funkcióknak. A legfontosabb dolog az, hogy ezek az elemek szervesen illeszkednek a négyzetbe.

Hol láthatom a favonot?

1. A webhely neve előtt nyitott lapokon. Ha nem töltötte le a favont, webhelye szabványos ikonja van egy fekete-fehér bolygó formájában.

2. A böngésző nézetek történetében.

3. A Könyvjelzők panelen.

4. A kedvenceknél, ahol minden érdekes oldalt ment.

5. A Yandex asztali és mobil kibocsátásában – mind szerves, mind hirdetésekben és hirdetésekben.

6. A Google mobil és asztali kibocsátásában. A mobil képernyőkön lévő favononok az év tavaszán jelentek meg, de az asztali kiadatásban – szó szerint az év első hetében.

Bárhol láttad a favonki-t, felhívják a figyelmet, segítenek emlékezni a márkára, és megkülönböztetik másoktól, növelni a vállalat elismerését és hozzon létre egy teljes körű üzleti hatást. Favorki Kedvenc márkák Nem fog megzavarni másokkal.

Hogyan készítsünk saját Favy-t az oldalra? Lehetséges-e egyszerűen csökkenteni a meglévő márkát, és feltöltheti azt a webhelyre? Milyen méretű phavikon jobb használni? Értjük.

Rövid technikai technológia

Figyeljük meg a műszaki paramétereket a Favonov biztosítani kell, hogy a helyszínen ikonok jelennek meg minden olyan eszközhöz – a jó minőségű és pontosan azt a képet, fogant. És meg kell kezdeni a megfelelő formátum és méret kiválasztásával.

Favicon formátum

A leghíresebb, bár a favonov elavult formátuma – ico. Fő előnye, hogy egy fájl tárolhat a favicon méretek több verzióját.

Korábban az Internet Explorer csak ezt a formátumot támogatta, ma szinte minden ismert böngésző felismeri az ikonokat a PNG-ben, néhány – GIF, JPEG, SVG. Kivétel – Internet Explorer 10 és korábbi verziók a böngésző, amely csak az ICO fájlokat fogadja el.

Ma az ICO kis elavult formátumnak számít, a leggyakrabban a PNG-t adja meg. Miért ez a formátum? A válasz egyszerű – annak érdekében, hogy bármilyen körülmények között (böngészők és eszközök) megtartsa a favicon magas színvonalát. A PNG-t szinte minden modern böngésző támogatja és helyesen jeleníti meg.

Favonov SVG, GIF formátumban, a JPEG problémák az ilyen széles körű támogatás hiányában vannak. De néhány szó az SVG formátum védelmében még mindig azt akarja mondani – ikonok SVG-ben, ami a minőség elvesztése nélkül, ami a jövőben kiváló megoldás lehet minden probléma a Favonov feltérképezése. Üzleti böngészők, akik már fokozatosan kezdtek bevezetni ezt a formátumot szabad vektoros grafika.

Tudja meg, hogy melyik Favonov formátumok támogatják a különböző böngészőket, használhatom az online szolgáltatást. Például láthatja, hogy melyik böngésző támogatja vagy nem támogatja Favonki PNG és SVG formátumban.

Favicon méret

A klasszikus favic méret 16×16 képpont. Ezért ellenőrizni kell, hogy az ikon úgy néz ki, mint egy kis felbontás.

Más méretek, amelyeket általában a faviconhoz használnak a készülék típusának és operációs rendszerének függvényében:

Nem is olyan régen, néhány webmesterek levelet kapott a Google ajánlásával, hogy növelje a felbontása Favicon a & #;

Egy levélben arról volt szó, hogy a jobb favononok kétszörös kattintást hozhatnak a Chrome és az Android kezdőlapon. Elfogadom, hogy a homályos favon valószínűleg nem kíván kattintani – ez azt jelenti, hogy az ikon alacsony felbontása nem opció a jó felhasználói élményhez.

Számos általános szabály, amelyet be kell tartani:

• Használja a négyzet webhelyét.
• Ne használjon Favion valakinek más cégét vagy elfogadhatatlan természetét (például Swastika) – Ellenkező esetben a keresőmotor alapértelmezett képet jelenít meg – színtelen bolygót.
• Favonnak rendelkezésre kell állnia a keresési robotok szkenneléséhez.

Öt évvel ezelőtt a HTML5 felszabadulásával megjelentek a méretek attribútuma, ami nagymértékben megkönnyíti a phanique-t. Ezt az attribútumot formátumban kell megadni Szélesség x magasság mérőegységek nélkül (ha vannak több közülük, használja a helyet). Például:

LINK REL = “ICON” méret = “Szélesség magas” link rel = “Ikon” méret = “Width1x Highness1, Width2xput2”

A Favonov technikai paraméterei nagymértékben függenek azoktól az eszközöktől vagy böngészőktől, amelyek olvashatók. Ezért vannak olyan online szolgáltatások, amelyek segítenek figyelembe venni az összes árnyalatokat, és létrehozhat webhelyikonokat a megfelelő formátumokban és méretekben.

Hogyan készítsünk kedvenceket online

Ha gondolatod van, egyszerűen átnevezzük a logófájlodat a Hab-ban, felejtsd el, hogy nem működik. Valószínűleg várja a hibákat, amikor a favon különböző böngészőkben található.

Hogyan lehet elkerülni?

Módja annak, hogy hozzon létre egy phavique-t a helyszínen több:

1. Legyen egy grafikus szerkesztőben, például a Photoshopban egy speciális HAB plugin segítségével

2. Rajzoljon favon speciális online szolgáltatásokban (például Katvin vagy Hab), majd töltse le onnan a már megfelelő formátumban.

3. Használja ki a képét (például a logóját), és töltse le az online favonov generátorhoz – például Hab, Hab, stb.

4. Letöltés Ready Favon a webhelyről Speciális bankok ikonok – például a Findicons Galéria. Ez a szerelvény több ezer ikonja van.

Ha letölti a generált favonot, akkor csak a webhelyéhez adja hozzá.

Hogyan adjunk hozzá favonot az oldalhoz

Először töltse le a kész favonot a webhely gyökérkönyvtárában a fájlkezelő segítségével, például a FileZilla segítségével.

Ezt követően csak a következő kódot kell behelyeznie a fej / fej meta címkéjében:

Headlink rel = “ikon” href = “Hab” típus = “kép / x-ikon” link rel = “gyorsbillentyű” href = “Hab” típus = “Kép / x-ikon” / fej

Favonov fő technikai pillanataival rájöttünk, és most menjünk, hogy a Favonok tervezésében megfelelőnek tartsák, és mit kell elfelejteni.

Favicon design – ha nem jelent rosszabb

Mielőtt elkezdené kitalálni az ötleteket a Favic, nézze meg a kulcsfontosságú kérelmek kibocsátását, és nézze meg, hogy mely javításokat már bemutatták. És próbálja meg válaszolni a kérdéseire:

A Phawacon kiemelkedik a versenytársak között? Lehetséges, ha a versenytársak színes ikonokkal rendelkeznek, fekete-fehér verziót használhat, vagy gondolkodhat a kép, amely koncepcionálisan különbözik a másiktól.

Ha a mozgó favonot GIF formátumban szeretné használni, függetlenül attól, hogy megkülönbözteti Önt más ikonokról? Vagy ő csak elvonja, és még bosszantja a felhasználók, ami hatással nem, amíg a végén a betöltött oldalon (ami valószínűbb).

A 16 * 16-os összegben egyértelműen azt mondják, hogy mit ábrázolnak a favonne-on? Próbálja meg megtartani a favonot, hogy kis részleteket tartalmazzon, jól megkülönböztették, és nem csavarja a szivárvány összes színét.

A rögzítés a szférával, amelyben dolgozik, és a webhelyének kialakításával? Az egyik favonka a könyvjelzők panelen emlékezhető arra, hogy melyik oldalon van, és néha – és pontosan ez az oldal, ha a favon megtartja a márka vizuális stílusát.

Három jó favicon bálna – világosnak, egyszerűnek és emlékezetesnek kell lennie.

Most, hogy tudod, hogyan kell létrehozni egy gyönyörű favonot, és add hozzá a webhelyhez, függetlenül attól, hogy megjelenik-e a keresőmotorokban? Nézzük meg!

A rögzítés és az alaphibák rögzítése

Hogy gyorsan ellenőrizze, hogy a Favon megjelenjen a fő keresőmotorokban, akkor csak a Google erőforrását. Vagy kihasználják a következő linkeket, hogy ebben az esetben a címét a webhely őket:

• Yandex – Hab
• Google – Hab?Domain = Hab

Van még egy lehetőség, hogy ellenőrizze a favon különböző eszközökön – speciális szolgáltatások, például realfavicongenerator.

Ha a rögzítés nem jelenik meg a Yandexben vagy a Google-ban, kezdje el az ilyen pillanatok ellenőrzését:

1. Az ICO, a PNG vagy a GIF formátumban grafikus kép az erőforrás gyökerében van?
2. Az erőforrás oldalain lévő képhez vezető kód helyesen van bejegyezve?
3. Ikon nem homályos és egyedi?
4. A FAVON fájl a keresett robotok beolvasásához?

Kérjük, vegye figyelembe, hogy a kijelző közvetlenül a kép elérési útjától függ. Ha törölni vagy megváltoztatni a Favon, csak törölni kell, vagy módosítani kell a HA HAF fájlt (JPEG, GIF, PNG).

A Favonov a Yandexben lehet árnyalatok. Például a Yandex megjeleníti az ikonokat a keresési eredmények összes oldalán. Ha az oldal a pozíció alatt van, akkor a link melletti képek nem lesznek.

Általánosságban elmondható, hogy ha mindent megtesz az Ön részéről, ne feledje, hogy a Favonov indexálására a keresőmotorokban kell időre van szüksége. Ez egy külön robotsal foglalkozik, ikonok letöltése a szerverre, így a grafikus indexálás több hétig várható.

Miért van szüksége a favonnak minden webhelyre

Favonons segítsen a webes erőforrásoknak, hogy ne legyél elveszik a hatalmas számú más webhelyek, és vonzóbbá tegyék őket a látogatók szemében.

Szerszámunk “webhelyelemzés”, amely az erőforrás teljes ellenőrzését végzi, beleértve a favicon igazolását és jelenlétét. Elemezheti webhelyét egyszerűen regisztrálva egy fiókot SE rangsorban.

Ha favon van, és az ellenőrzés nem látja – ez azt jelenti, hogy az indexeléssel vagy cím ikonjával kapcsolatos probléma. Nézd meg újra.

Angolul beszélő kollégáink azt mondják: “Az ördög a triflesben van”. És Favon a legkisebb részlet, amely befolyásolhatja a megítélése a helyszínen, és a márka, azok elismerésére, sőt az átmenetek száma a keresési.

Jó favon – az egyes webhelyek márkájának és műszaki szabványának szerves része, és pontosan rá költözik rá.

Julia – tartalomporosó nyári tapasztalattal az újságírásban, a copywriting, a reklám és a pr. Megosztja tapasztalatait és tudását, hasznos cikkeket hoz létre a SEO és a digitális marketingről az SE rangsorolására és a népszerű médiára. Amikor Julia nem írja cikkeket, az új ázsiaiok, utazik, és segít az önkéntes szervezet YWCA.