Favicon piemēri, labākā prakse un paņēmieni

Vai jūs kādreiz pievērsat uzmanību šīm niecīgajām ikonām pārlūka cilnes augšdaļā? Kā būtu, ja tiešsaistē saglabājat saīsni uz vietni vai lapu? Šie niecīgie attēli vai favoni ir īpaši izstrādāti šim nolūkam.

Starp to, kas veido labu vai sliktu niecīgu ikonu, ir diezgan atšķirīga atšķirība. Jums tiks piedots, ja domājat, ka niecīga mēroga dizaina lēmumiem ir mazāk nozīmes. Bet slikti izstrādāts favons var slikti atspoguļot jūsu zīmolu.

Šodien mēs skatāmies, kādas ir šīs ikonas, to dizaina pamattehnikas un specifikācijas, kas jums būs jāievēro.

Izpētiet Envato elementus

Kas ir Favicon?

Vienkārši, faviks ir maza, caurspīdīga ikona, ko izmanto, lai attēlotu vietni, zīmolu vai uzņēmumu. Faviksoni palīdz uzlabot lietotāju pieredzi, nodrošinot pastāvīgu marķieri, kas vietnes apmeklētājiem paziņo, ka viņi atrodas tajā pašā vietnē, kur pārvietojas, pateicoties konsekventam vizuālam attēlam.

Termins faviks nāk no “iecienītākās ikonas”. Šī terminoloģija datēta ar Internet Explorer dienām, kad grāmatzīmju lapas sauca par “Izlase”. Faviksonu pirmo reizi pieņēma World Wide Web Consortium (W3C) HTML 4.0, aptuveni 2000, un tas nākamajā gadā sāka konsekventāk parādīties pārlūkprogrammu logos.

Izmantojiet padomus, lai ātri pārvietotos starp pārlūka cilnēm, identificētu grāmatzīmi vai atrastu tālrunī saglabātu lietotni vai saīsni. Vizuālais identifikators ir tas, ko vairums cilvēku izmanto, lai šīs saites un lapas saistītu ar labo pogu, lai tām piekļūtu.

Tradicionāli favics izmantoja .ico faila formātu, taču tagad tas ir mazāk aktuāls. Jebkurš caurspīdīgs faila tips darbosies lielākajā daļā gadījumu; .png bieži ir izvēlētais formāts.

Tehniskie apsvērumi

Vienā reizē visi favoni bija super mazi 16 pikseļu kvadrāti. Tas vairs neattiecas uz vairāk augstas izšķirtspējas tīklenes ekrāniem un saīsņu ikonām, kas jāņem vērā.

HTML 5 ir ietverti faviconu standarti ar vairākiem izmēriem visa veida lietojumiem, sākot no sīkām pārlūka ikonām un beidzot ar datoru dokstaciju ikonām līdz sākuma ekrāna ikonām. Jums pat tas 16 pikseļu kvadrāts vairs nav īsti vajadzīgs.

Mūsdienu favona izmēri un lietojums:

• 32 × 32: standarta lielākajai daļai galddatoru pārlūkprogrammu (aizstāj 16 × 16)
• 128 × 128: Chrome veikals un maza Windows 8 zvaigžņu ekrāna ikona
• 152 × 152: iPad pieskāriena ikona
• 167 × 167: pieskāriena ikona iPad Retina
• 180 × 180: iPhone tīklenes ikona
• 192 × 192: Google izstrādātāju tīmekļa lietotnes ieteikums
• 196 × 196: Android sākuma ekrāna ikona

Labākā pieredze

Lai gan šķiet, ka ikona, kas tik ļoti varētu būt nenozīmīga kopējā dizaina ziņā, tā nebūt nav taisnība.

Favicon saka daudz par jūsu zīmolu un vietni. Lietotāji ir gaidījuši, ja viņi tos nevar identificēt pēc nosaukuma. Šie mazie elementi veicina vispārējo lietotāja pieredzi un zīmolu.

Tātad, kā jūs varat maksimāli izmantot favicon?

Paturiet prātā šo labāko praksi:

• Faviconam vajadzētu būt savienotam ar jūsu zīmola identitāti, taču tas bieži ir pārāk mazs, lai iekļautu visu logotipu. Izmantojiet identificējamu elementu, piemēram, sava zīmola pirmo burtu vai nelielu zīmi, kuru izmantojat kopā ar zīmolu.
• Padomājiet par formu. Favicona laukums pēc noklusējuma ir kvadrāts. Ja vēlaties kaut ko citu, ir nepieciešams caurspīdīgs fons. Dažas sistēmas var arī noapaļot malas, padarot šo vēl vienu apsvērumu, kas jāpatur prātā.
• Pārliecinieties, vai fails ir mazs, bet ne pārāk mazs. Augšupielādējiet favona izmēru, kas tiks pareizi atveidots lielākajā daļā ierīču, bet neaizkavēs kopējo vietni.
• Izvairieties no vārdiem vai sarežģītiem elementiem faviksas noformējumā.
• Pieturieties pie vienkāršas, racionalizētas fakeona krāsu paletes. Tas ir pārāk mazs, lai kļūtu traks ar krāsu. Tāpēc lielākajā daļā šo niecīgo ikonu tiek izmantots nedaudz vairāk par fona un priekšplāna krāsu ar lielu kontrastu starp abām.

Dizaina tehnikas

Tā kā faviks ir mazs, jūs, iespējams, vēlēsities to noformēt uz kaprīzes Photoshop. Tas nav ieteicams ilgmūžības ceļš.

Faviconu vizuālā noformējuma galvenais noteikums ir saglabāt dizainu vienkāršu. Nelieciet pāri bortam ar krāsu, tekstu vai zīmola elementiem.

Veidojiet savu iecienīto vektoru rīkā, piemēram, Illustrator vai Sketch, pēc tam eksportējiet dizainu vajadzīgajos izmēros. Tas nodrošinās, ka, mainoties ekrāna izšķirtspējai, jums būs uzticības zīme, kas izturēs laika pārbaudi. (Viss, kas jums būs jādara, ir reeksportēšana jaunā lielumā.)

Faviconu vizuālā noformējuma galvenais noteikums ir saglabāt dizainu vienkāršu. Nelieciet pāri bortam ar krāsu, tekstu vai zīmola elementiem. Aplūkojot šī ziņojuma piemērus, jūs redzēsit, ka gandrīz visi šie sīkie elementi ir lasāmi ar 16 x 16 pikseļiem.

Izvairieties no trikiem, piemēram, animācijas; viņi šeit nokļūst tikai ceļā.

Uzskatiet to par dizaina izaicinājumu. Tas var būt diezgan grūts, lai izveidotu kaut ko tik mazu, ka to ir viegli lasīt.

Saglabājiet failu kā caurspīdīgu png. Tas ir labs ieradums, kas nodrošina, ka jūs neliksities nepāra malās vai malās uz faviksas. (Nekas neizskatās sliktāk kā robaina balta mala, kas apņem ikonu.)

Izmantojiet laba dizaina principus. Jūs nekad nezināt, kad faviksu var izmantot kādam lielākam, redzamākam izmēram. Piemēram, saglabājot vietnes grāmatzīmi, var izmantot lielu favona versiju. Tas pats attiecas uz dokstaciju un pat meklētājprogrammu rezultātu priekšskatījumos.

Lai arī tā ir maza, šī ikona apzīmē jūsu zīmolu. Noformējiet to labi.

Kad fails ir gatavs, varat to pievienot savai vietnei tikai ar pāris koda rindām. (Daudzās WordPress tēmās un vietņu veidotājos jau ir iekļauts favicon elements, tāpēc jums pat nav jādomā par šo darbību.)

Pēc attēla faila augšupielādes jūsu vietnes galvenē ievietojiet šo kodu, atzīmējot, ka “iconpath” un “iconname” attiecas uz jūsu konkrēto faila elementu:

• HTML indeksa fails:
• WordPress:

Piemēri

Zemāk minētie piemēri satur dažus zīmola elementus ar saistītajām fiktīvām ierīcēm. (Noteikti noklikšķiniet cauri un parādiet dizaineriem mīlestību savās Dribbble lapās.)

Prodigi.team atsaucīgs logotips

Ierosinātā sviestkāju logotipu sistēma

Favicon logotips

Faviksona veidne

TEC logotipa 2. variants

Secinājums

Kādu fiktonu trūkst, tie veido lietotāju pieredzi. Šīs ikonas kalpo kā navigācijas rīki vietnes apmeklētājiem un tiem, kuriem ir pārāk daudz pārlūka cilņu.

Parasti faviks ir ātrs vizuāls identifikators, kas sasaista lietotāju ar jūsu digitālo klātbūtni. Esiet piesardzīgs, lai nodrošinātu, ka tas ir labākais, precīzāks jūsu zīmola attēlojums.