Faviconi näited, parimad tavad ja tehnikad

Kas pöörate kunagi tähelepanu nendele pisikestele ikoonidele brauseri vahekaartide ülaosas? Kuidas oleks, kui salvestate otsetee veebisaidile või lehele? Need pisikesed pildid või faikoonid on spetsiaalselt selleks otstarbeks loodud.

Selle vahel, mis teeb hea või halva pisikese ikooni, on üsna selge erinevus. Teile antakse andeks, kui arvate, et pisikeses mõõtkavas disainilahendused on vähem olulised. Kuid halvasti kujundatud favoon võib teie kaubamärki halvasti kajastada.

Täna vaatame, mis need ikoonid on, nende kujundamise põhivõtteid ja tehnilisi andmeid, mida peate järgima.

Uurige Envato elemente

Mis on Favicon?

Lihtsalt on favicon väike läbipaistev ikoon, mida kasutatakse veebisaidi, kaubamärgi või ettevõtte tähistamiseks. Faviconid aitavad kasutajakogemust parendada, pakkudes ühtlast markerit, mis teatab veebisaidi külastajatele, et nad asuvad tänu järjepidevale visuaalsusele samal saidil, kus nad navigeerivad.

Mõiste favicon pärineb “lemmikuikoonilt”. See terminoloogia pärineb Internet Exploreri päevilt, kui järjehoidjatega lehti nimetati lemmikuteks. Faviconi võttis esmakordselt kasutusele veebiversioon World Wide Web Consortium (W3C) HTML 4.0 jaoks, umbes 2000, ja see hakkas järgmisel aastal brauseriakendes järjepidevamalt ilmuma.

Kasutage favikoone, et hõlpsalt brauseri vahelehtede vahel sirvida, järjehoidjat tuvastada või telefonis salvestatud rakendust või otseteed leida. Visuaalne identifikaator on see, mida enamik inimesi seob nende linkide ja lehtede parema nupuga, et neile juurde pääseda.

Traditsiooniliselt kasutasid faviconid .ico-failivormingut, kuid see on praegu vähem probleem. Mis tahes läbipaistev failitüüp töötab enamikul juhtudel; .png on sageli valitud vorming.

Tehnilised kaalutlused

Korraga olid kõik faviconid üliväikesed 16-pikslised ruudud. Enam pole kõrglahutusega võrkkesta ekraanide ja otseteede ikoonide puhul enam nii.

HTML 5 sisaldab erineva suurusega kaubikute jaoks mõeldud standardeid igasuguseks kasutamiseks, alates pisikestest brauseri ikoonidest kuni arvuti dokkimisjaama ikoonide ja avaekraani ikoonideni. Teil pole seda 16-pikslist ruutu enam tegelikult vaja.

Kaasaegsed faviconi suurused ja kasutamine:

• 32 × 32: standard enamiku lauaarvuti brauserite jaoks (asendab 16 × 16)
• 128 × 128: Chrome'i pood ja väike Windows 8 täheekraani ikoon
• 152 × 152: iPadi puuteikoon
• 167 × 167: iPadi Retina puuteikoon
• 180 × 180: iPhone võrkkesta ikoon
• 192 × 192: Google'i arendaja veebirakenduse soovitus
• 196 × 196: Androidi avaekraani ikoon

Parimad tavad

Ehkki see tundub ikoonina, mis võib olla üldise kujunduse osas väheoluline, pole see kaugeltki tõsi.

Favicon ütleb teie brändi ja veebisaidi kohta palju. Kasutajad on neid oodanud, kui nad ei suuda neid nime järgi tuvastada. Need väikesed elemendid aitavad kaasa üldisele kasutajakogemusele ja kaubamärgile.

Niisiis, kuidas saate faviconit kõige paremini kasutada?

Pidage meeles neid parimaid tavasid:

• Favicon peaks olema ühendatud teie brändi identiteediga, kuid on sageli liiga väike, et lisada kogu logo. Kasutage tuvastatavat elementi, näiteks oma tootenime esimest tähte või pisikest märki, mida kasutate koos kaubamärgiga.
• Mõelge kujule. Faviconi koht on vaikimisi ruut. Kui soovite midagi muud, on vajalik läbipaistev taust. Mõned süsteemid võivad ka servi ümardada, muutes seda veel üheks kaalutluseks.
• Veenduge, et fail oleks väike, kuid mitte liiga väike. Laadige üles faviconi suurus, mis renderdatakse enamikus seadmetes korralikult, kuid ei riku kogu veebisaiti.
• Vältige faviconi kujunduses sõnu või keerulisi elemente.
• Püsige faviconi lihtsa sujuva värvipaleti juurde. See on liiga väike, et värviga hulluks minna. Sellepärast kasutab enamik neist pisikestest ikoonidest midagi enamat kui tausta- ja esiplaani värvi ning nende kahe vahel on palju kontrasti.

Kujundusvõtted

Kuna võlukunst on väike, võiksite seda Photoshopis kapriisile kujundada. See pole pikaealisuse jaoks soovitatav tee.

Faviconite visuaalse kujunduse peamine reegel on hoida kujundus lihtsana. Ärge minge värvi, teksti või brändielementidega üle parda.

Ehitage oma favoon vektoritööriistas, näiteks Illustrator või Sketch, ja eksportige seejärel kujundus vajalikesse suurustesse. See tagab, et kui ekraani eraldusvõime muutub, on teil ajaproovile vastav favicon. (Teil on vaja vaid reeksportida uues suuruses.)

Faviconite visuaalse kujunduse peamine reegel on hoida kujundus lihtsana. Ärge minge värvi, teksti või brändielementidega üle parda. Vaadates selle postituse näiteid, näete, et peaaegu kõik need pisikesed elemendid on loetavad 16x16 pikslit.

Vältige selliseid trikke nagu animatsioon; nad pääsevad siia ainult teed.

Pea seda disaini väljakutseks. Midagi nii väikest luua, et seda on lihtne lugeda, võib olla üsna raske.

Salvestage fail läbipaistva png-na. See on hea komme, mis tagab, et te ei jõua faviconi veidrate servade ega piiridega. (Miski ei näe halvem kui ikooni ümbritsev sakiline valge serv.)

Kasutage hea disaini põhimõtteid. Kunagi ei või teada, millal võib faviconit kasutada millegi suurema, nähtavama suurusega jaoks. Näiteks veebisaidi järjehoidja salvestamisel saab kasutada faviconi suurt versiooni. Sama kehtib dokkimise ja isegi otsingumootori tulemuste eelvaadete puhul.

Kuigi see ikoon on väike, tähistab see ikoon teie kaubamärki. Kujundage see hästi välja.

Kui fail on valmis, saate selle oma veebisaidile lisada vaid paarirealise koodiga. (Paljudel WordPressi teemadel ja veebisaitide koostajatel on juba faviconi element kaasatud, nii et te ei pea isegi seda sammu mõtlema.)

Pärast pildifaili üleslaadimist sisestage järgmine kood oma veebisaidi päisesse, märkides, et ikoonitee ja ikoonimärk viitavad teie konkreetsele failielemendile:

• HTML-i indeksifail:
• WordPress:

Näited

Allpool toodud näited hõlmavad mõnda brändielementi koos seotud faviconitega. (Klõpsake kindlasti läbi ja näidake disaineritele oma Dribbble'i lehtedel armastust.)

Prodigi.team reageeriv logo

Butterscotchi pakutud logosüsteem

Logo Faviconi ekraan

Faviconi mall

TEC logo 2. võimalus

Järeldus

Millistel kaubikutel pole suurust, moodustavad need kasutajakogemuse. Need ikoonid toimivad navigeerimisriistadena teie saidi külastajatele ja neile, kes jätavad liiga palju brauseri vahelehti lahti.

Üldiselt on favicon kiire visuaalne identifikaator, mis seob kasutaja teie digitaalse kohalolekuga. Hoolitsege selle eest, et see oleks teie kaubamärgi parim ja täpsem esitus.