A favicon az a jó kis kép a címsor mellett a böngészőben. Ez különbözteti meg webhelyét a könyvjelzők lapon, és felhasználható a márka ismertségének növelésére. Ha van webhelye, de soha nem gondolkozott a favicon létrehozásán, akkor gondolja át a döntését. A szoftverfejlesztők egyre gyakrabban használnak faviconokat alkalmazásuk különböző aspektusaihoz, például a táblagépek kezdőképernyőjének ikonjaihoz. Szerencsére a favicon tervezése, létrehozása és megvalósítása szinte mindenki megteheti, ha követi a megfelelő lépéseket.
Lépések
Módszer 1 /3: A Favicon tervezése
1. lépés. Hozzon létre egy favicont, amely a webhelyét képviseli
A webhely típusának meg kell határoznia a favicon megjelenését. Próbáljon meg olyasmit tervezni, amely illeszkedik a márka arculatához, és amely felismerhető és emlékezetes lesz az emberek számára. A kedvence lesz az első dolog, amit az emberek látnak, amikor böngészőjük lapjait nézik, és megjelennek az emberek könyvjelzőiben is.
- Például, ha van egy élelmiszer -webhelye, akkor egy olyan gyümölcsöt vagy zöldséget tartalmazó favicont választhat, amely emlékezetesebbé teszi azt.
- Ha webhelye ügyvédi iroda vagy befektetési társaság számára készült, akkor a hagyományos és elegáns favicon a legjobb.
- Ha webhelye fiatalabbakat céloz meg, próbáljon játékos és színes favicont létrehozni.
2. lépés Döntse el, hogy átlátszó hátteret szeretne -e
Ha nem jelöl ki hátteret, akkor fehér színű lesz, ami esetleg nem illeszkedik a márkájához. Az átlátszó háttér felveszi a személy böngészőjének színét, és bizonyos esetekben korszerűbbnek tűnik. Más esetekben, ha a háttér színe van, az előtér betűi vagy grafikái felpattannak. Döntse el, mi lenne a legjobb a tervezéshez, és tartsa szem előtt, amikor elkészíti.
A legalapvetőbb favicon egy 16x16 -os négyzet, és háttérszíne van
3. Hozzon létre egy könnyen olvasható favicont
Mivel a favicon kép, amelyet használni fog, kicsi, fontos, hogy népszerűsítse a márkáját anélkül, hogy megzavarná látogatóit. A nehezen olvasható favicon negatív benyomást hagy, és kérdéseket vethet fel a látogató fejében az Ön által nyújtott munka minőségével kapcsolatban. A túl bonyolult képek és logók nem néznek ki jól, ha 16x16 vagy 32x32 képpontra csökkentik őket.
- Ha a meglévő logója túl bonyolult, akkor taktikával egyszerűsítheti azt, így favicon méretben felismerhető. Használja a kezdőbetűket a teljes cégnév megjelenítése helyett, vagy tervezzen egy egyszerű ikont a kép helyett.
- Ha már rendelkezik egyszerű emblémával, kicsinyítheti a képet, és beállíthatja kedvenc ikonjává. Előfordulhat, hogy módosítania kell, mielőtt ikonfájlba konvertálja.
- Használhat egy olyan objektumról készült képet is, amely leírja webhelye általános témáját.
Lépés 4. Hozzon létre egy esztétikus megjelenésű favicont
A favicon szerkezetét formájának nevezik. A faviconok általában olyan formákat öltenek, mint egy kör vagy négyzet. Amikor megtervezi a faviconját, általában jobb, ha elfér ezen alapformák egyikén, mert a szabad formájú formák gyakran zavarosak vagy zavarosak lehetnek 16x16 képponton. A tervezés másik fontos aspektusa az esztétikai egység. Az esztétikai egység magában foglalja a favicon különböző összetevőinek részleteit és méreteit, valamint a favicon kiegyensúlyozottságát. Minél egységesebbek a részletek, annál összetartóbb lesz a favicon. Például, ha különböző betűtípusokat vagy méreteket használ a faviconon belül, nem kellemes a szemnek, és zavarossá vagy rendetlenné teheti a favicont.
- Az esztétikai egység másik példája a lekerekített sarkok fenntartása a favicon formáiban.
- Jó példa az ikonra, amely megváltoztatta a formáját, a Google faviconja. Négyzetből kör alakúra változott.
5. lépés Használjon a márkához illeszkedő színeket
A favicon létrehozásakor 8 bites (256 szín) vagy 24 bites (16,7 millió szín) színmélységet kell létrehoznia, mivel ez működik a modern böngészőkben. Győződjön meg arról, hogy a kiválasztott színek megtalálhatók máshol a webhelyen, vagy valamilyen módon a márkához vannak társítva. Ha a színek nem jelennek meg a webhelyen, a logóban vagy az alkalmazásokban, akkor nem lesz emlékezetes, és az emberek nem tudják társítani az ikont a márkájához.
- A favicon szín kreatív felhasználási területei közé tartozik a GitHub, amely a rendszer állapotától függően megváltoztatja a színeket, és a Trello, amely a háttérszíntől függően változik.
- A faviconokban leggyakrabban használt színek a piros és a kék.
6. Favicon tervezésekor vegye figyelembe a közönségét
A márka azonosításán kívül a faviconnak vonzónak kell lennie a látogatók számára. A különböző ízlésű, érdeklődési körű és társadalmi normákkal rendelkező emberek különböző szempontok szerint fognak tekinteni a különböző ikonológiákra. Kulturális különbségek léteznek társadalmunkon belül, és megzavarhatják vagy elriaszthatják a közönséget, amelyet megpróbál vonzani.
Például a Mac Os X bélyeget használ, amely univerzális szimbólum a levélhez. A postafiók használata nem lenne olyan hatékony, mert a postaládák a világ különböző részein eltérőek
7. Lépés a barátok és kollégák véleményére
Bár nem hihetetlen grafikus intenzitású, a favicon fontos része a márkának. Gondoljon például a kedvenc webhelyeire, például a Twitterre, a Gmailre, a Facebookra vagy a wikiHow -ra, és arra, hogy a favicont mennyire társítja a márkához. Ha nincs jó szeme a tervezéshez, vagy elgondolkodik azon, hogy milyen formatervezéssel kell rendelkeznie webhelyéhez, forduljon barátaival, akik szemmel tartják a tervezést vagy grafikai tervezéssel foglalkoznak.
- Kérdezze meg baráti körében, hátha tud valaki ingyenes tervezési tanácsot adni.
- A nagyobb cégek saját grafikusokkal rendelkeznek, amelyek képesek létrehozni a favicon képet.
2. módszer a 3 -ból: A Favicon létrehozása
1. lépés Használja a képszerkesztő szoftvert a favicon létrehozásához
Használhatja a képszerkesztő szoftvert, például az Adobe Photoshopot vagy az Illustrator programot a kép létrehozásához a faviconhoz. Ezek a szoftveralkalmazások lehetővé teszik a kép átméretezését és exportálását is a megfelelő formátumban. Egyes szoftverek lehetővé teszik a favicon kézi létrehozását.
- Vannak favicon -specifikus szerkesztő programok is, amelyeket megtalálhat az interneten.
- Használjon keresőmotort, és írja be a "favicon editor" kifejezést.
- Állítsa a vászon méretét 512x512 képpontra, mert ez a szám a legtöbb alkalmazható favicon méretre bontható, és még mindig elég nagy ahhoz, hogy hatékonyan szerkeszthesse.
- Egyéb népszerű képszerkesztő szoftver a GIMP, a PhotoScape és a Paint. NET.
- A szoftver használatakor nem tudja közvetlenül szerkeszteni az.ico fájlokat, de használhat.png,-j.webp" />
2. lépés Méretezze át és mentse el a favicont
32x32 px a Windows asztali elemeinek mérete, míg 16x16 px a böngésző lapján található faviconok mérete. Miután létrehozta a favicont nagyobb formátumban, fontos csökkenteni annak méretét, hogy láthassa, hogyan fog kinézni az emberek böngészőiben. Ha olvashatatlan vagy nem esztétikus, kezdje elölről az eredeti tervezést. Gondolja át azokat a platformokat, amelyeken webhelyét vagy alkalmazását nagy valószínűséggel használni fogják, majd hozzon létre egy favicont, amely lefedi az összes bázist.
- Fontos megjegyezni, hogy a különböző hardverek és szoftverek különböző méretű faviconokat használnak.
- Néhány más favicon méret a következő: 57x57px a normál iOS kezdőképernyőn, 72x72px iPaden, 96x96px Google TV -n, 128x128px a Chrome Internetes áruházon és 195x195px az Opera gyorstárcsázáson.
- Ha le szeretné fedni az összes alapját, létrehozhatja a favicon verzióit mindegyik méretben.
- Mentse el a favicon külön verzióit, hogy ne veszítse el az elvégzett munkát.
3. lépés. Kombinálja fájljait konverter segítségével
A.ico fájlok nagyszerű tulajdonsága, hogy több fájlt is kombinálhat a létrehozásához. Ez azért hasznos, mert a különböző böngészők és szoftverek eltérő méretű favicont akarnak. Annak érdekében, hogy a favicon minden platformon jól nézzen ki, konvertálja fájljait egy online konverter segítségével. Írja be az "icon converter" -t a kedvenc keresőmotorjába, hogy ingyenes online alkalmazásokat találjon ehhez. Mentse az egyesített fájlt "favicon.ico" néven.
- Használhat olyan programot is, mint a GIMP, amely rendelkezik beépített funkcióval, vagy letölthet egy ICO FORMAT nevű bővítményt az Adobe Photoshopba.
- Hozzon létre egy új mappát, így tárolhatja az új kedvenceket vagy folyamatban lévő műveket.
- Írja be a ".ico converter" vagy a "favicon generator" kifejezést a keresőbe, hogy megtalálja a különböző használható eszközöket.
3. módszer a 3 -ból: A Favicon megvalósítása
1. lépés. Töltse fel a favicont, ha webhelyszerkesztőt használ
Sok webhelyszerkesztő beépített űrlappal rendelkezik, amely lehetővé teszi a favicon automatikus feltöltését a webhelyére. Ha egy beépített webhelyszerkesztőt használ, akkor keressen olyan beállításokat, amelyek azt mondják: „Favicon feltöltése” vagy „Favicon hozzáadása” a webhely beállítási menüjében. Válassza ki a favicon.ico fájlt, és töltse fel webhelyére.
Ha nem találja a favicon feltöltésének helyét a webhelyszerkesztőben, akkor manuálisan kell elvégeznie
2. lépés. Töltse fel a fájlt webhelye gyökérkönyvtárába
Ha webhelye támogatja a fájlátviteli protokollt vagy az FTP -t, akkor az FTP -ügyfél segítségével feltöltheti új favicon.icon fájlját a gyökér (index) könyvtárba. Ha nem, akkor el kell mennie a webtárhely oldalára, és manuálisan kell feltöltenie a képet. Ne felejtse el kicserélni a meglévő favicon.ico fájlt az új fájlra.
3. lépés. Adja hozzá a fájlt a fejlécéhez
Keresse meg azt a helyet, ahol elérheti webhelye PHP- és CSS -fájljait. Nyissa meg webhelye header.php fájlját, és szerkessze azt. A címketípus alatt"
-
Ennek össze kell kapcsolnia webhelyét a faviconnal.
Mivel PHP -t használ, ez azt jelenti, hogy a fejlécfájlt használó webhelyek ugyanazt a favicont fogják használni
Hozza létre saját Favicon ikonját 14. lépés 4. lépés. Frissítse a böngészőt
Miután befejezte a favicon feltöltését, frissítse a böngészőt, hogy az új kép a címsor mellett látható legyen. Ha közvetlenül a frissített favicon képére szeretne lépni, írja be: "https://www.yourdomain.com/favicon.ico".
- Ha a favicon kezdetben nem jelenik meg, előfordulhat, hogy vissza kell állítania a böngésző gyorsítótárát.
- A gyorsítótár törléséhez nyissa meg a böngésző beállításait, és törölje az ideiglenes internetes fájlokat, cookie -kat és előzményeket.
