Hogyan hozhat létre egy webhelyet a webhelyhez: hasznos tippek és szolgáltatások

1. Hogyan hozhat létre egy faviconot?
2. Hogyan készítsünk egy faviconot a Photoshopban
3. Hogyan lehet menteni egy faviconot
4. A favicon webhely beszúrása
5. A favicon cseréje
6. Hogyan készítsünk bonyolultabb favicont

Nehéz kitalálni, hogy mi a favicon, amikor először hallod ezt a szót. Ez egy miniatűr ikon , amely a böngészők lapjain, a címsorokban és más területeken jelenik meg, a használt operációs rendszertől és az internetböngészőtől függően. A honlap tervezésének egyik legbonyolultabb és legbonyolultabb eleme.

Jó favicon létrehozása meglehetősen nehéz, mivel az ikon kicsi, világosnak kell lennie, és megjelenítenie kell valamit a webhelyéhez. Az összes népszerű böngészővel kompatibilis favicon létrehozása szintén ijesztő feladat lehet. Ebben a cikkben megalkotásunk minden összetett aspektusával foglalkozunk. Ha szüksége van egy logóra is, akkor van egy cikket hogyan kell csinálni.

Hogyan hozhat létre egy faviconot?

Kezdjük a favicon tervezésével. A jó kialakításnak tömörsége ellenére tükröznie kell webhelyének lényegét, és szerves részét kell képeznie a vállalati identitásnak. Jellemzően az ikon egy cég grafikus jele (ikon), nem egy teljes logó (ikon, szöveg és szlogen).

Faviconként ezek a weboldalak használják az ikonjaikat (vagy a hozzájuk közeli képeket).

A favicon szövegét nem szabad használni, mivel ez a szöveg a kis képméret miatt olvashatatlan lesz. A szabály alól csak a világhírű szöveges karakterek tartoznak, amelyek automatikusan egy adott márkához kapcsolódnak. Például a Wikipedia online erőforrás a „W” betűjét és a Facebookot - az „F” betűtől elhagyta.

Ezeken a faviconokon vannak olyan betűk, amelyek erősen kapcsolódnak egy adott márkához. Például a Facebook használja a grafikus jelét. Ne feledje, hogy a képpontok a Disney-képen láthatók. Ez azért van, mert a képernyőképet egy retina kijelzőn vettük fel, amely 16 × 16 ikonokkal kompatibilis, míg a weboldalak 32 × 32 ikont használnak.

Mivel a favicons kis képek, minden pixel fontos szerepet játszik. Néha a logó csökkentése után az egyes pixelek láthatóvá válnak, ami miatt a kép „elmosódott” lesz. Az érthetőség érdekében szerkeszteni kell az ikont a pixel szinten.

Ennek elkerülése érdekében át kell méretezni a logót speciális szerkesztők, például a Photoshop vagy a GIMP segítségével. Először 64x64 pixelre kell csökkentenie a kép méretét (ez a legnagyobb méret). Ezután minden képpontot a Ceruza eszközzel kell szerkeszteni, amíg a kép tiszta lesz. Ez egy fáradságos folyamat, de az eredmény megéri. Amikor a 64x64 favicon készen áll, ugyanazt a feladatot kell elvégeznie a 16 × 16, 24 × 24 és 32 × 32 képpontos képpel. Olyan sok méretre van szükséged, amellyel a böngészőkben és modulokban helyesen kell megjeleníteni:

• 64x64 - Safari böngésző könyvjelzői;
• 32x32 - nagyfelbontású kijelzők (Retina);
• 24x24 - Internet Explorer és MicroSoft Edge könyvjelzői;
• 16x16 - Google Chrome és más böngészők.

Hogyan készítsünk egy faviconot a Photoshopban

Először néhány, a fenti dimenzióval rendelkező vászont kell létrehoznia.

Ezután hozzá kell adnia egy ikont, egy levelet vagy egy másik képet a vászonhoz.

Hogyan lehet menteni egy faviconot

Különböző méretű ikonok létrehozása után mentse el mindegyiket átlátszó PNG-fájlként (24 bites). A Photoshop alkalmazásban a Fájl menüben elérhető Mentés webre funkciót használhatja. Ezután össze kell egyesítenie az összes PNG-fájlt egy ICO-fájlba. A PNG-fájlokat és az ICO-fájlokat egyszerre használhatja, de gyakran a Safari és a Chrome csak az ICO formátumot részesíti előnyben. Véleményem szerint könnyebb létrehozni egy ICO-fájlt. Az ICO formátum nem túl gyakori, de szerencsére számos olyan eszköz áll rendelkezésre, amelyek segítenek átalakítani a fájlokat erre a formátumra. Ebből a célból előnyben részesítem X-Icon Editor . Ez egy ingyenes online szolgáltatás, amely azonnal letölti a letöltött képeket egy ICO fájlba, majd letöltheti azt. Ez nem bonyolult, csak kövesse az oldalon található utasításokat. Ha kétségbeesett személynek tekinti magát, kísérletezhet a szolgáltatás pixelszerkesztőjével, és saját maga készíthet egy faviconot. (Bár inkább egy profi szerkesztőben, például a Photoshopban szeretnék szerkeszteni a faviconokat).

A PNG-képeket az X-Icon Editor-ra feltöltve egy ICO-fájlt kap a kimeneten.

A favicon webhely beszúrása

Tehát már van ICO-fájlod. Most hozzá kell adnia a webhelyhez. Nevezze át a fájlt a favicon.ico fájlba, és helyezze azt a webhelyének gyökérmappájába (ahol az index.html fájl és más szabványos fájlok tárolódnak). A sikeres kiegészítés után megtekintheti a webhelyén. / Favicon.ico. Majdnem minden böngésző a favicon.ico fájlt keresi a gyökérmappában. Ezért fontos, hogy letöltse a favicont ebben a mappában. A különböző böngészőkkel való kompatibilitás érdekében jobb, ha nem adunk hozzá olyan HTML elemeket vagy hivatkozásokat, amelyek a helyét jelzik. Ez a trükk minden böngésző számára működik, akár IE6-ig. Továbbá, ha van WordPress webhelye, akkor számos témában hozzáadhat egy faviconot a téma beállításaihoz. Ez a módszer használható.

A favicon cseréje

Néhány megmagyarázhatatlan okból a böngészők hozzáadják a gyorsítótárhoz. Ezért, amikor új ICO-fájlt töltött fel, a böngésző továbbra is megjelenítheti a régi faviconot. Mit kell tenni ebben az esetben? Hozzáadhat egy ideiglenes HTML fájlt, amely az új favicon helyét jelzi. Szintén az URL végén kell hozzáadni egy rövid lekérdezési karakterláncot:

<link rel = "gyorsbillentyű ikon" href = "az Ön webhelye .com / favicon.ico? v = 2" />

Tehát a böngésző úgy gondolja, hogy ez egy egyedi URL-cím, ezért kénytelen lesz új ikont megjeleníteni. A favicon frissítése után ez a HTML-kód teljesen eltávolítható. Ha módosítania kell a favicon-ot, használja ugyanazt a technikát, minden alkalommal, amikor a számot a lekérdezési karaktersorozat „v” után növeli. Így a böngésző minden alkalommal egyedülállónak tekinti ezt az URL-t, és megjeleníti az új verzióját. És ne felejtse el törölni a HTML-kódot a sikeres frissítés után.

Hogyan készítsünk bonyolultabb favicont

Ebben a cikkben egy univerzális és egyszerű módszert akartam leírni, amely gyakorlatilag bármilyen platformon működő favicont hoz létre. A webes tervezés és fejlesztés azonban nem korlátozza a tökéletességet. Ha szeretné megtudni, hogyan hozhat létre bonyolultabb ikonok, próbálja meg használni a szolgáltatást favico.js . Lehetővé teszi dinamikus képek létrehozását különböző számokkal. Ennek az ikonnak köszönhetően láthatja az olvasatlan üzenetek számát, még akkor is, ha a megfelelő lap nem aktív. Ha online szeretne animált favicont létrehozni, próbálkozzon favicon generátorral favicon.cc .

Több online generátor található itt .

Ha meg szeretné osztani a faviconok létrehozására vonatkozó tippeket vagy kérdéseket, várom Önt a megjegyzésekben!