Good Mood

Favicon tervezés sokkal fontosabb, mint gondolnád,. A méret itt valóban számít, mivel a jól megtervezett logónak bármilyen méretben felismerhetőnek kell lennie. Meg kell méretezni a hatalmas képernyők egészen egy ikon, amely lehet olyan kicsi, mint 16 x 16 pixel, az úgynevezett favicon. A favicon design nagyszerű példája a Google logó. Tökéletesen működik a nagyobb képernyők számára a nagy ” G ” -vel és a jellegzetes négyszínű szöveggel., És még mindig ugyanolyan felismerhető, amikor a böngészők címsorában látható apró négyszínű ” G ” -re csökken.
a favicon parancsikonnak, fül ikonnak vagy könyvjelző ikonnak is tekinthető, ezért meg kell néznie az alkatrészt. Ha látni favicon tervez, hogy a munka, lásd a roundup logo design inspirációt, és nézd meg ezt a lenyűgöző gyűjteménye iOS app ikonok, hogy kap ez csak jobb.

ebben a cikkben végigfutjuk a tökéletes favicon tervezésének folyamatát., Konkrét tippeket fogunk adni egy favicon létrehozásához az Apple eszközökhöz, az Androidhoz, A Chrome-hoz, az Opera-hoz és a Safarihoz. Plusz egy praktikus útmutató a különböző favicon méretekhez és formátumokhoz, amelyeket tudnod kell. Használja a gyorshivatkozásokat (jobbra), hogy egyenesen a kívánt szakaszra ugorjon.

• másfajta ikont keres? Tekintse meg a legjobb ingyenes ikonkészletek útmutatóját

a web korai napjaiban a favicon egyszerűen egy 16x16px ikonfájl volt, de manapság ez egy kicsit bonyolultabb., Vannak különböző favicon méretek és folyamatok különböző kontextusokban. A megfelelő favicon létrehozása tudomány.

tehát néhány felső tippet fogunk elindítani a favicon kinézetéhez, majd továbblépünk egy konkrét tanácsra arról, hogyan lehet favicont létrehozni a különböző kontextusokhoz. A pixelek alkalmazásakor rendelkezésre álló sablont fogjuk használni, hogy könnyen létrehozhassuk a szükséges favicon méreteket, példaként pedig a favicon az Apply képpontokból.,

Favicon tervezési szabályok

tegye felismerhetővé

Az első dolog, amelyet figyelembe kell venni a favicon tervezésekor, az, amit a vásznon kell ábrázolni. Ne feledje, hogy a favicon csak akkor jelenik meg a felhasználó számára, ha már a webhelyén vannak, vagy könyvjelzővel rendelkezik. Tehát nem kell megpróbálnia vonzani a felhasználót a favicon segítségével.

Használja a logó

Fontolja meg favicons olyan józan, útjelző táblák, hogy a támogatás a felhasználók felismerve, a honlapon való böngészés közben a könyvjelzők listák, valamint homescreens., Ezért a logóját vagy bármelyik szimbólumot szeretné használni, amely a legkönnyebben lehetővé teszi a felhasználó számára, hogy felismerje webhelyét. Ha nincs olyan logomarkja, amely megfelel a kvadratikus vászonnak, használja a logó leginkább felismerhető részét.

tartsa tisztán

van még néhány dolog, amit el kell kerülni. Ne használja a favicont marketing eszközként – ez azt jelenti, hogy nincs árcédula, ” új “vagy” frissített ” banner stb. Valójában egyáltalán nem akar szöveget tenni a faviconba. A szöveg nem terjed ki jól, és az esélyek szerint egyébként is olvashatatlan lesz., Végül ne használjon fényképet – sáros és felismerhetetlen lesz a méretben, amelyen megjelenik.

Létre két változat

Ha favicons vezették be először az Internet Explorer 5, megjelentek az URL-t, bár a könyvjelzők listája. Manapság a faviconok sok más kontextusban jelennek meg, beleértve a könyvjelzőlistákat, a parancsikonok menüket, sőt a mobil és a TV homescreeneket is., Ez megnehezíti megjósolni, hogy a favicon hogyan jelenik meg a végfelhasználó számára.

ahhoz, Hogy biztosítsa a favicon jól néz ki a sok különböző kontextusokban fog megjelenni, ideális esetben meg kell adnia két favicon stílusok:

Logó átlátszó háttér
Ez a verzió jelenik meg a címsorba a könyvjelzők listák, illetve egyéb helyeken, ahol a favicon mellett jelenik meg a webhely URL-címét vagy nevét.,

Logo on solid fill
ezt a verziót rácsszerű könyvjelzőkben és parancsikonmenükben használják, ahol a böngésző vagy az eszköz maszkolja a hátteret, hogy egységes megjelenést érjen el a kontextusban.

Favicon méretű cheatsheet

mint korábban említettük, a különböző kontextusok különböző méretű faviconokat igényelnek. Az alábbiakban látható egy gyors útmutató a különböző formátumokat, méreteket meg kell adnia, hogy fedezze az összes fő felhasználási esetek.

korábban a faviconokat ICO formátumban kellett megadni., Ma rendben van a fájlok PNG formátumban történő megadása (kivéve a Safari rögzített lap ikonját, amelyet SVG-ként kell megadni).

ha egyszerű módot szeretne az összes favicon méret megtervezésére és exportálására, vessen egy pillantást a favicon sablonra az Apply Pixeleknél.

most nézzük meg közelebbről a különböző használati esetek egyedi követelményeit.,

asztali böngésző favicons

Hogyan hozzunk létre egy asztali böngészőt favicon

kezdjük a legegyszerűbb faviconnal, amelyet létre kell hoznia: egy klasszikus favicon a klasszikus asztali böngészőkhöz. Ez a fajta favicon működik a legjobban átlátszó háttérrel, mivel gyakran megjelenik az URL-sávban, valamint a könyvjelzők listáiban.,

akkor kell megadni, írja be a favicon három méretben, mind PNG formátum egy átlátszó háttérrel.,

• 16×16
• 32×32
• 48×48

Alma

, Hogyan kell létrehozni az Apple Touch favicons

az Apple iOS használ az Apple Érintse meg az Ikonokat, hogy képviselje weboldalak már megmentette az iOS kezdőképernyőn könyvjelzőként. Ez azt jelenti, hogy az Apple Touch ikon lesz kerekítve a squircle maszk iOS app ikonok.

az is megjelenik, hogy a felhasználó melyik hátteret választotta a kezdőképernyőhöz. Ezt szem előtt tartva, az Apple Touch ikonnak szilárd kitöltési háttérrel kell rendelkeznie.,

Az Apple favicons PNG formátumban kell szállítani. Megúszhatja egy 180×180-as Apple Touch ikon biztosítását, amely automatikusan méretezi a különböző iPhone és iPad méreteket. Ez a legtöbb esetben jól működik.,

Ha nem, akkor további méreteket adhat a különböző Apple eszközökhöz:

<link rel="manifest" href="/manifest.json">

 <link rel="mask-icon" href="your_icon.svg">