Mi az a favicon, és mi ez a

Tervezze létrehozására és fejlesztésére a helyén, mint egy információs és kereskedelmi, ügyelni kell arra, hogy saját egyedi képet erőforrás. Fontos, hogy dolgozzon ki elemeket, hogy a webhely felismerhető. Az egyik ilyen tényező a kis képen - egy ikon.

1. Hol favicons

A kifejezés favicon - rövidítése az angol fav ourite ikonra. azaz „a kiválasztott ikont.” Ez a kép-ikon - ikon helyén (vagy oldal).

Favicons látható az alábbi helyeken.

1. Ahogy a neve is mondja, a kifejezés, favicons ikon jelenik meg a böngésző könyvjelzőit mellett a helyszínen.


Egy példa a könyvjelző sáv a Mozilla Firefox

Ha a felhasználó Könyvjelzők eszköztár számos linket, majd navigáljon a két legkönnyebb az ikonok helyett szöveg ezeket a linkeket: képet agyunk olvasás gyorsabb, mint a szöveg. Ezért e területek, amelyek nem rendelkeznek a favicon, ebben a tekintetben veszít: vannak nehezebb megtalálni a listában közül az azonos arctalan oldalakon.

2. favicons megjelenik a böngésző egyik lapján nyitott a bal oldalon az oldal címe. Használata favicons ezen a helyen nehéz lenne túlbecsülni, ha a böngésző meg van nyitva egy csomó fülek, ezek a címek nem látható, és a legtöbb gyorsan a kívánt lapon van abban az esetben, létesítő „arc”, hogy egy ikon. De még ha egy része a fejléc látható, még mindig inkább a szöveges információk grafika, amely felett nem kell aggódnia.


A lap bár a Google Chrome

3. A keresőmotor Yandex mutatják favicons a keresési eredmények között, ami megkülönbözteti a más keresőmotorok, amelyek nem rendelkeznek ilyen gyakorlatokat. A felhasználóbarát és előnyös az oldalak jelennek meg a keresési eredmények között: Először is, az információ és a kép vonz több mint nélküle, másrészt, miután az első ismerős a helyszín a kereső a látogató lenyűgözte a „portré” - ikon.

Favikonok az indexelés helyeket Yandex még egy speciális robot:

Most, hogy remélhetőleg felismerték annak fontosságát, ennek a kis elem a design a helyén, lépni a technikai rész: hogyan lehet egy ikon.

2. Válogatás kép-ikon favicons

Először is, meg kell, hogy határozza meg a sorrendet, amely képet mutatja ki a böngészők a látogatók, mint a helyszínen ikonra. Ez egy nagyon fontos pont. Közelítik meg hanyagul, és gyorsan teszi favicons szerint az elv „ha csak ez volt:” teljesen elfogadhatatlan! Egyrészt, favicons kell világosan és egyértelműen azt mutatják, a lényeg az oldalon. Másrészt, meg kell tömör. Sites társaságok elismert márka a minimalista stílusban egyszerűen használható kedvencikonjainak a logót:

De másfelől, ha, mondjuk, favicons weboldalán a kacsacsőrű emlős, egy vadállat, de még mindig semmi jele a stílus, de még mindig a háttérben, néhány ember, hogy ki, mi az. favikonok méret - csak 16x16 pixel. és a 256 pontot kell, hogy illeszkedjen a lehető legtöbb információt, de meg kell nézni, elegáns és szép. Fejezi ki a művészi képessége jobb, bíznak a szakemberek - művészek, tervezők.

3. Format favicons

Modern böngésző „megtanulta” felismerni nem csak a kedvenc ikonok az ICO formátumban, hanem jpg, gif (statikus vagy animált), png. Csak Internet Explorer még mindig alapvetően nem akarja támogatni jpg, valamint az animált SIFCO. De másfelől, az utóbbi változat a Mozilla Firefox böngésző animált favikonok gif.

Tartsuk szem előtt, hogy a jpg formátum nem támogatja az átláthatóságot. Tehát, ha például van egy kép háttér nélkül, akkor jobb, ha nem használja a favicons jpg.

Ne felejtsük el, hogy a saját böngészője nem fogja megtalálni favicons eltérő formátumot ico, akkor kell, hogy jelezze a helyét egy speciálisan favicons.

4. elhelyezése favicons Online

Létrehozása favicons, töltsd fel a gyökérkönyvtárba az oldalon. Ha te mindent szabvány szerint, további lépésekre van szükség. De ha kell, hogy egy favicon nem a gyökér, de egy másik könyvtárba, vagy a kedvenc ikonok eltérő formátumot ico, meg kell mondani a böngésző a helyét. Itt van, hogyan. Belül az oldal címét meg kell adni a következő meta tagek:



A második sor szükséges Őfelsége Internet Explorer böngésző, de a többi böngésző fogja érteni az első sorban. By the way, ez következik a következtetés, hogy tudod, hogy egy ikont ICO formátumban Internet Explorer és más böngészők - bármelyik más támogatott formátumok és az első sorban, hogy jelezze nekik, hogy van egy honlap, és ez:


Ha egy egyéni utat, vagy képformátum, akkor meg kell tenni a megfelelő változtatásokat a kódban ezeket a sorokat.


Ha szeretné használni az egyes oldalak más favicons, arra is van lehetőség, hogy a. Hozza létre a kívánt képet, töltse ki őket a helyszínre, és a címke válogatott oldalakon az utat a kívánt ikon.

Néhány szó a mobil ikonok

A mobil eszközök is használják ikonok oldalakon. Ugyanezen okok miatt, amelyeket be említettük, ezek az ikonok is felhívják a jobb, különben helyett magánszeméllyel helyszínen iPhone vagy iPad mutatja ki egy képernyőképet a helyszínen, ami nem túl szép. Tovább mínusz hiánya egy ikont a mobil eszközök - tölti az oldalon jelentkezzen hiba, hogy így néz ki:

A fájl nem létezik. /www/apple-touch-icon-precomposed.png
A fájl nem létezik. /www/apple-touch-icon.png

Ez azért van, mert a mobil eszközök az iOS operációs rendszer, amikor közeledik a helyszínen az első dolog keresi az ilyen ikonok. És minden látogató, így van egy új sort a rönkök hiba a nem létező képet. A további terhelést a szerveren, akkor is, ha egy kis dolog, nem hasznos, így a legjobb, hogy megszabaduljon tőle.

Mint látható, a példában két fájl: alma-touch-icon.png és alma-touch-icon-precomposed.png. Az első feltételezi, hogy a kép lesz alkalmazni a hatását szabványos Apple ikonok - sarkok kerekítés, árnyékok és kiemeli. Ha nem szeretné, hogy a kép is alkalmazza az ilyen hatások, hozzon létre egy képet elemzi apple-touch-icon-precomposed.png.

Icon apple-touch-icon kell a formátum png, de a mérete sokkal bonyolultabb, mint a kedvenc ikonok. Az a tény, hogy az „alma” termékek különböző felbontású használja különböző méretű ikonokat:

  • iPhone: 60 x 60 px;
  • IPAD: 76 x 76 px;
  • IPhone Retina: 120 x 120 px;
  • iPad Retina: 152 x 152 képpont.

A legjobb, hogy ikonok minden lehetséges méretben. Add hozzájuk egy másik méretű 196h196 - eszközök Android operációs rendszerrel.

Ahhoz, hogy hozzon létre egy sor ikonok „ömlesztve” könnyen használható, online szolgáltatás, amely generálja az ikonok a kívánt méretű kívánt.

Töltsük be a kapott ikonok gyökérkönyvtárában az oldalon, és felsorolja, hogy milyen módon

, Mint ez a példa:




És most, a webhely saját „alma” személy, és a kiszolgáló hibát naplózza lesz sokkal kevesebb.

Kapcsolódó cikkek