Tīmekļa dizainā, kā jūs droši vien zināt, katrai detaļai ir nozīme. Cilvēks, kurš ir pārgājis uz jūsu resursu, neredz katru no elementiem atsevišķi, bet uztver visu attēlu kā paketi, kas sastāv no citām mazām detaļām. Tādējādi, ja resursa izstrādes procesā jūs kaut ko palaidat garām, šī detaļa vēlāk var sabojāt visu kompleksu, visu kompozīciju.
Šāds sīkums var būt, piemēram, pogas fons, kāda maza elementa nepareizi izvēlēts fonts un pat favicon. Patiešām, pārliecinieties paši – lielām, labi zināmām vietnēm ir atsevišķa ikona, kas to norāda lietotāja pārlūkprogrammas sadaļā "Grāmatzīmes". Bez tā resursa izstrādātāji nebūtu varējuši izveidot kompozīciju, pēc kuras viņi sākotnēji tiecās.
Tāpēc, veidojot vietnes dizainu, jums vajadzētu parūpēties par tādu detaļu kā favicon. Šajā rakstā mēs runāsim par to, kā to saskaņot ar vispārējo resursa stilu, kā arī par to, kādiem izmēriem vajadzētu būt šim attēlam.
Vietnes ikona
Vispirms definēsim, kas ir šis elements. Šobrīd apskatiet pārlūkprogrammas cilnes nosaukumu. Kā redzat, pa kreisi no tā ir neliels attēls, kas norāda uz resursa logotipa vienkāršotu versiju. Tas pats attēls ir arī blakus meklēšanas rezultātos redzamajam vietnes nosaukumam. Tas ir tas, pēc kā lietotājs vadās, redzot virsrakstu.
Daudzi tīmekļa pārziņi saprot, ka šāds attēls ir vajadzīgs, taču tikai daži cilvēki zina, kāds vietnei būs vispiemērotākais favicon izmērs. Tāpēc šajā rakstā mēs ne tikai sniegsim informāciju par to, kā izveidot šādu ikonu un kā to instalēt savā resursā, bet arī runāsim par attēlu izmēriem.
Favikona mērķis
Tātad, attēls pie vietnes galvenes tiek izmantots identifikācijai. Tāds ir tās sākotnējais mērķis: izteikt vietni, kuras nosaukumu mēs redzam, un izcelt to pārējo acīs. Tas tiek darīts pēc iespējas vienkāršāk, izmantojot grafiku: mēs intuitīvi uztveram informāciju attēlos daudz ātrāk un vienkāršāk nekā teksta formātā. Faviconi palīdz mums to izdarīt. Bet neaizmirstiet, ka favicon izmērs lietotāja acīs ir minimāls. Tas nav logotips vietnes “galvenē”, kurā var būt papildu informācija uzrakstu, dažu precizējumu vai kontaktinformācijas veidā. Visam, ko var parādīt ikonā blakus nosaukumam, pēc iespējas jāatbilst favicon izmēram. Un viņš, kā jau norādīts, ir vienkārši miniatūrs (tikai 16 x 16 pikseļi).
Kā izvēlētiesfavicon?
Kā tīmekļa pārzinis var izveidot ikonu savai vietnei? Jāatzīmē, ka vienkārša vietnes logotipa saspiešana visbiežāk nedarbosies. Uz emblēmām, kas tiek ievietotas konkrēta resursa logotipa formā, bieži ir redzami dažādi elementi, kas ne vienmēr tiks pareizi attēloti miniatūrā formā. Labāk ir nekavējoties atteikties no šādas saistības.
Protams, favicon izmērs neļauj runāt par vienkāršu uzraksta ievietošanu. Jebkurš teksts šajā izšķirtspējā vienkārši būs neredzams. Mums ir jāizstrādā jauna ikona, kas atspoguļotu vietnes stilu. Lai rastu risinājumus, atkal pievērsīsimies lielākajām vietnēm.
Daudzi cilvēki izmanto pakalpojuma nosaukuma stilizētu pirmo burtu kā favicon. Tas ir veids, piemēram, Bing, Yahoo, Yandex, Wikipedia, Google. Ir arī cita pieeja - ja jums ir īss vietnes nosaukums, varat to iestatīt kā savas ikonas fonu. Lai favicon izmērs (pikseļos tas sasniedz, atkārtoju, 16 x 16 pikseļi) pareizi attēlotu šo uzrakstu, tam nevajadzētu būt garākam par 3 burtiem. To dara, piemēram, Aol pakalpojums.
Kā izveidot favicon?
Ir vairāki veidi, kā izveidot ikonu vietnes nosaukumam. Protams, visvieglāk ir strādāt ar dažādiem jau gataviem risinājumiem. Mēs varam runāt par dažiem pakalpojumiem vai programmām, kas ļauj izveidot ikonu no pilnvērtīga attēla, to samazinot. Tomēr es ieteiktu izstrādāt šādu logotipu saviem spēkiem. Tas vispirms dosiespēja kaut ko iemācīties; un, otrkārt, tas nodrošinās vairāk rīku. Lai to izdarītu, jums jāzina tikai tas, ko zīmēt, kā arī zināt, kādam izmēram jābūt faviconam galīgajā versijā. Par vietnes ikonas lielumu mēs runāsim nedaudz vēlāk, taču šobrīd mēs atzīmēsim dažus darba ar šādiem attēliem smalkumus. Jo īpaši, neminot vietnes favicon izmēru, būtu jāprecizē šāda attēla formāts. Kā atzīmē pieredzējuši dizaineri, attēls ir jāsaglabā kā-p.webp
Attēlu var saglabāt, piemēram, izmantojot Photoshop, kur tiks uzzīmēta emblēma.
Favicon izmēri
Tātad, tagad parunāsim par to, cik lielam jābūt attēlam, ko mēs redzam blakus vietnes nosaukumam meklēšanas rezultātos. Pēc noklusējuma, kā jau minēts, tā izmērs ir tikai 16 pikseļi (katrā pusē). Tomēr, ja mēģināsit rediģēt šo attēlu programmā Photoshop, jūs paši redzēsit, cik tas ir neērti. Tāpēc iesakām strādāt ar palielinātu attēlu, kuru turpmāk varēs vienkārši saspiest gar malām un saglabāt vajadzīgajā formātā.
Daudzplatformas
Tomēr, runājot par to, cik lielam ir jābūt faviconam jūsu vietnē, ir jāpatur prātā vēl viena lieta. Ne visās platformās resursa attēls tiek rādīts vienādi. Piemēram, ierīces ar Retina displeju “redz” jūsu izlases ikonu 32 x 32 pikseļu izšķirtspējā. Un Safari un jaunajā Windows platformā, un vispār, šīs ikonas sasniedz 64 izmērupikseļi.
Tāpēc iesakām saglabāt dažādas ikonas versijas un vienkārši nodrošināt tās maiņu atkarībā no lietotāja platformas turpmāk. Vēl viens interesants punkts - varat mēģināt ielādēt ikonu lielākajā formātā, rēķinoties ar to, ka tā “saruks” atkarībā no pārlūkprogrammas.
Ārējie redaktori
Protams, ir labi, ja pārvaldāt Photoshop un zināt, kāda izmēra favicon jābūt un kā to panākt, saglabājot attēlu. Taču ir ļoti daudz iesācēju, kuri vienkārši līdz šim nav tik cieši saskārušies ar grafiskajiem redaktoriem, tāpēc nevar tik vienkārši uzzīmēt vēlamo attēlu. Lai palīdzētu šādiem tīmekļa pārziņiem, ir dažādi pakalpojumi, kas ļauj automātiski izveidot jūs interesējošo ikonu. Daudzi no tiem ir pat bezmaksas, kas neprasa nekādus ieguldījumus no lietotāja.
Dažreiz ir tikai jāreģistrējas, lai strādātu, bet, kā jūs saprotat, tas tiek darīts vienu reizi - galu galā uzņēmumi nemaz tik bieži nemaina savu favicon. Apskatiet Google, kas katru dienu maina logotipu, bet nepieskaras ikonai.
Kā instalēt favicon?
Kopumā vietnes iestatīšana tā, lai tajā pareizi parādītu vajadzīgo attēlu, ir ļoti vienkārša. Pietiek veikt virkni vienkāršu darbību, kas ļaus meklētājprogrammām, kā arī vienkāršām pārlūkprogrammām lasīt informāciju.
Lai to izdarītu, iegūtais attēls ir jāsaglabā arar nosaukumu favicon.ico un ievietots jūsu resursa saknē. Tas arī viss. Tagad jūsu attēls tiks atpazīts automātiski, un pēc kāda laika tas tiks saistīts ar jūsu vietni.
Papildus šai iesiešanai varat pievienot vēl vienu rindiņu, kas “norādīs”, kur atrodas jūsu ikona. Tas izskatās šādi:
Instalējiet kodu vietnes galvenē.
Secinājumi
Tātad, izlasot mūsu rakstu, jūs sapratāt, kāda izmēra favicon vajadzētu būt vietnei un kas tas ir. Tāpat, manuprāt, jūs sapratāt, ka resursam īstās ikonas atrašana ir nepieciešamība, jo tas spēlē jūsu rokās gan atpazīstamības palielināšanas, gan papildu izcelšanās ziņā starp konkurentiem. Vismaz lielākās vietnes dara to pašu, ko var uzskatīt par izcilu piemēru. Un turklāt tas neprasa daudz pūļu - vienreiz izveidojot faviconu un pareizi to instalējot savā vietnē, jūs varat par to aizmirst dažus nākamos mēnešus.
Tāpēc droši eksperimentējiet, izdomājiet kaut ko jaunu, izmēģiniet - un viss izdosies!
