Favicon-ի չափը կայքի համար

Բովանդակություն:

Favicon-ի չափը կայքի համար
Favicon-ի չափը կայքի համար
Anonim

Վեբ դիզայնում, ինչպես հավանաբար գիտեք, յուրաքանչյուր մանրուք կարևոր է: Մարդը, ով անցել է ձեր ռեսուրսին, չի տեսնում տարրերից յուրաքանչյուրը առանձին, այլ ընկալում է ամբողջ պատկերը որպես այլ մանր մանրամասներից բաղկացած փաթեթ։ Այսպիսով, եթե ինչ-որ բան բաց եք թողնում ձեր ռեսուրսի մշակման գործընթացում, ապա այս դետալը կարող է հետագայում փչացնել ամբողջ համալիրը, ամբողջ կազմը։

Նման մանրուք կարող է լինել, օրինակ, կոճակի ֆոնը, ինչ-որ փոքր տարրի սխալ ընտրված տառատեսակը և նույնիսկ ֆավիկոնը: Իսկապես, համոզվեք ինքներդ. մեծ, հայտնի կայքերն ունեն անհատական պատկերակ, որը ցույց է տալիս այն օգտագործողի բրաուզերի «Էջանիշներ» բաժնում: Առանց դրա, ռեսուրսի մշակողները չէին կարողանա ստեղծել այն կոմպոզիցիան, որին ի սկզբանե ձգտում էին:

Հետևաբար, ձեր կայքի համար դիզայն ստեղծելիս պետք է հոգ տանել այնպիսի դետալների մասին, ինչպիսին ֆավիկոնն է։ Այս հոդվածում մենք կխոսենք այն մասին, թե ինչպես այն համապատասխանեցնել ռեսուրսի ընդհանուր ոճին, ինչպես նաև այն մասին, թե ինչ չափեր պետք է ունենա այս պատկերը:

Կայքի պատկերակ

favicon չափը
favicon չափը

Նախ, եկեք սահմանենք, թե ինչ է այս տարրը: Հենց հիմա նայեք ձեր դիտարկիչի ներդիրի վերնագրին: Ինչպես տեսնում եք, դրա ձախ կողմում կա մի փոքրիկ պատկեր, որը ցույց է տալիս ռեսուրսի լոգոյի պարզեցված տարբերակը: Նույն նկարը գտնվում է նաև որոնման արդյունքներում ցուցադրված կայքի անվան մոտ։ Ահա թե ինչով է առաջնորդվում օգտատերը, երբ տեսնում է վերնագիրը:

Շատ վեբ-վարպետներ հասկանում են, որ նման նկար է անհրաժեշտ, բայց քչերը գիտեն, թե կայքի համար ֆավիկոնի որ չափն է առավել հարմար: Հետևաբար, այս հոդվածում մենք ոչ միայն տեղեկատվություն կտանք, թե ինչպես պատրաստել նման պատկերակ և ինչպես կարող եք տեղադրել այն ձեր ռեսուրսի վրա, այլև կխոսենք պատկերների չափերի մասին:

Ֆավիկոնի նպատակը

Այսպիսով, կայքի վերնագրի մոտ գտնվող նկարն օգտագործվում է նույնականացման համար: Սա է նրա սկզբնական նպատակը. արտահայտել այն կայքը, որի անունը մենք տեսնում ենք, և այն առանձնացնել մնացածների աչքում: Դա արվում է հնարավորինս պարզ գրաֆիկայի միջոցով. մենք նկարներում ինֆորմացիան ինտուիտիվ կերպով ընկալում ենք շատ ավելի արագ և հեշտ, քան տեքստային ձևաչափով: Favicons-ն օգնում է մեզ հենց դա անել: Բայց մի մոռացեք, որ ֆավիկոնի չափը օգտագործողի աչքում նվազագույն է: Սա կայքի «վերնագրի» լոգոն չէ, որը կարող է պարունակել լրացուցիչ տեղեկատվություն մակագրությունների, որոշ պարզաբանումների կամ կոնտակտային տվյալների տեսքով: Այն ամենը, ինչ կարող է ցուցադրվել անվան կողքի պատկերակում, պետք է հնարավորինս համապատասխանի ֆավիկոնի չափին: Եվ նա, ինչպես արդեն նշվեց, պարզապես մանրանկարչություն է (ընդամենը 16 x 16 պիքսել):

ինչ չափի ֆավիկոն
ինչ չափի ֆավիկոն

Ինչպես ընտրելfavicon?

Ուրեմն ինչպե՞ս կարող է վեբ վարպետը պատկերակ նախագծել իր կայքի համար: Պետք է նշել, որ կայքի տարբերանշանի պարզապես սեղմումը, ամենից հաճախ, չի աշխատի։ Նշանների վրա, որոնք դրված են որոշակի ռեսուրսի տարբերանշանի տեսքով, հաճախ տեսանելի են տարբեր տարրեր, որոնք միշտ չէ, որ ճիշտ կցուցադրվեն մանրանկարչության տեսքով: Ավելի լավ է անմիջապես հրաժարվել նման ձեռնարկումից։

Իհարկե, ֆավիկոնի չափը թույլ չի տալիս խոսել այնտեղ պարզապես մակագրություն տեղադրելու մասին։ Ցանկացած տեքստ պարզապես անտեսանելի կլինի այս բանաձեւում։ Մենք պետք է մշակենք նոր պատկերակ, որը կփոխանցի կայքի ոճը: Լուծումներ գտնելու համար կրկին դիմենք ամենամեծ կայքերին։

Շատերն օգտագործում են ծառայության անվան ոճավորված առաջին տառը որպես ֆավիկոն: Սա է ճանապարհը, օրինակ, Bing, Yahoo, Yandex, Wikipedia, Google: Կա մեկ այլ մոտեցում. եթե դուք ունեք կայքի կարճ անուն, կարող եք այն սահմանել որպես ձեր պատկերակի ֆոն: Որպեսզի ֆավիկոնի չափը (պիքսելներով այն հասնում է, կրկնում եմ՝ 16 x 16 պիքսելների) այս մակագրությունը ճիշտ ցուցադրելու համար, այն պետք է լինի ոչ ավելի, քան 3 տառ: Ահա թե ինչ է անում, օրինակ, Aol ծառայությունը։

Ինչպե՞ս ստեղծել ֆավիկոն:

կայքի ֆավիկոնի չափը
կայքի ֆավիկոնի չափը

Կայքի անվան համար պատկերակ ստեղծելու մի քանի եղանակ կա: Իհարկե, ամենահեշտը տարբեր պատրաստի լուծումներով աշխատելն է։ Մենք կարող ենք խոսել որոշ ծառայությունների կամ ծրագրերի մասին, որոնք թույլ են տալիս պատկերակ պատրաստել լիարժեք պատկերից՝ նվազեցնելով այն: Այնուամենայնիվ, ես խորհուրդ կտայի ինքնուրույն մշակել նման լոգոն: Սա առաջին հերթին կտաինչ-որ բան սովորելու հնարավորություն; և երկրորդը, այն ավելի շատ գործիքներ կտա: Դրա համար անհրաժեշտ է միայն իմանալ, թե ինչ նկարել, ինչպես նաև իմանալ, թե ինչ չափի պետք է լինի ֆավիկոնը վերջնական տարբերակում: Կայքի պատկերակի չափի մասին մենք կխոսենք մի փոքր ուշ, բայց առայժմ կնշենք նման պատկերների հետ աշխատելու որոշ նրբություններ: Մասնավորապես, առանց կայքի համար ֆավիկոնի չափը նշելու, պետք է հստակեցնել նման պատկերի ֆորմատը։ Ինչպես նշում են փորձառու դիզայներները, նկարը պետք է պահպանվի որպես-p.webp

Դուք կարող եք պահպանել նկարը, օրինակ՝ Photoshop-ի միջոցով, որտեղ կնկարվի զինանշանը։

Ֆավիկոնի չափսեր

ինչ չափի պետք է լինի ֆավիկոնը
ինչ չափի պետք է լինի ֆավիկոնը

Այսպիսով, հիմա եկեք խոսենք այն մասին, թե որքան մեծ պետք է լինի պատկերը, որը մենք տեսնում ենք կայքի անվան կողքին որոնման արդյունքներում: Լռելյայն, ինչպես արդեն նշվեց, դրա չափը կազմում է ընդամենը 16 պիքսել (յուրաքանչյուր կողմում): Այնուամենայնիվ, եթե փորձեք խմբագրել այս պատկերը Photoshop-ում, ապա ինքներդ կտեսնեք, թե որքան անհարմար է այն։ Ուստի խորհուրդ ենք տալիս աշխատել մեծացված նկարի հետ, որը հետագայում պարզապես կարելի է սեղմել եզրերի երկայնքով և պահպանել անհրաժեշտ ձևաչափով։

Մուլտիպլատֆորմ

Սակայն, խոսելով այն մասին, թե որքան մեծ պետք է լինի ֆավիկոնը ձեր կայքում, ևս մեկ բան պետք է հիշել: Ոչ բոլոր հարթակներն են նույն կերպ ցուցադրում ռեսուրսի պատկերը: Օրինակ, Retina էկրանով սարքերը «տեսնում են» ձեր ֆավիկոնը 32 x 32 պիքսել: Իսկ Safari-ում և Windows-ի նոր հարթակում, և ընդհանրապես, այս պատկերակները հասնում են 64-ի չափիպիքսելներ։

Հետևաբար խորհուրդ ենք տալիս պահպանել պատկերակի տարբեր տարբերակներ և ուղղակի նախատեսել դրա փոփոխությունը՝ կախված օգտատիրոջ հարթակից ապագայում: Մեկ այլ հետաքրքիր կետ. դուք կարող եք փորձել բեռնել պատկերակը ամենամեծ ձևաչափով, հաշվի առնելով այն փաստը, որ այն «կծկվի» կախված բրաուզերից:

Արտաքին խմբագիրներ

ֆավիկոնի չափը պիքսելներով
ֆավիկոնի չափը պիքսելներով

Իհարկե, լավ է, եթե լավ եք տիրապետում Photoshop-ին և գիտեք, թե ինչ չափի պետք է լինի ֆավիկոնը և ինչպես հասնել դրան՝ պահպանելով ձեր պատկերը: Այնուամենայնիվ, կան շատ սկսնակներ, ովքեր պարզապես նախկինում այդքան մոտիկից չեն հանդիպել գրաֆիկական խմբագրիչներին, ուստի չեն կարող այդքան հեշտությամբ նկարել ցանկալի պատկերը: Նման վեբ վարպետներին օգնելու համար կան տարբեր ծառայություններ, որոնք թույլ են տալիս ավտոմատ կերպով ստեղծել ձեզ հետաքրքրող պատկերակը: Դրանցից շատերը նույնիսկ անվճար են, ինչը օգտատիրոջից որևէ ներդրում չի պահանջում:

Երբեմն աշխատանքի համար անհրաժեշտ է միայն գրանցվել, բայց, ինչպես հասկանում եք, դա արվում է մեկ անգամ. չէ՞ որ ընկերություններն այնքան էլ հաճախ չեն փոխում իրենց ֆավիկոնը: Նայեք Google-ին, որն ամեն օր փոխում է լոգոն, բայց չի դիպչում պատկերակին։

Ինչպե՞ս տեղադրել ֆավիկոն:

Ընդհանուր առմամբ, ձեր կայքի կարգավորումն այնպես, որ այն ճիշտ ցուցադրի ձեզ անհրաժեշտ պատկերը, շատ պարզ է: Բավական է կատարել մի շարք պարզ քայլեր, որոնք թույլ կտան որոնման համակարգերին, ինչպես նաև պարզ բրաուզերներին կարդալ տեղեկատվությունը:

որն է ֆավիկոնի չափը կայքի համար
որն է ֆավիկոնի չափը կայքի համար

Դա անելու համար ստացված պատկերը պետք է պահպանվի դրանովանվանվել է favicon.ico և տեղադրվել ձեր ռեսուրսի արմատում: Վերջ, այժմ ձեր պատկերն ինքնաբերաբար կճանաչվի, և որոշ ժամանակ անց այն կկապվի ձեր կայքի հետ։

Այս կապակցումից բացի, դուք կարող եք ավելացնել ևս մեկ տող, որը «կառաջարկի», թե որտեղ է գտնվում ձեր պատկերակը: Կարծես հետևյալն է՝

Տեղադրեք կոդը կայքի վերնագրում:

Եզրակացություններ

որքան մեծ պետք է լինի ֆավիկոնը կայքի համար
որքան մեծ պետք է լինի ֆավիկոնը կայքի համար

Այսպիսով, մեր հոդվածը կարդալուց հետո դուք հասկացաք, թե ինչ չափի պետք է լինի ֆավիկոնը կայքի համար և ինչ է այն: Նաև, կարծում եմ, դուք հասկացաք, որ ձեր ռեսուրսի համար ճիշտ պատկերակը գտնելն անհրաժեշտություն է, քանի որ այն ձեր ձեռքերում է և՛ ճանաչելիության աճի, և՛ ձեր մրցակիցների շրջանում լրացուցիչ աչքի ընկնելու առումով: Համենայն դեպս ամենախոշոր կայքերը նույնն են անում, ինչը կարելի է որպես վառ օրինակ վերցնել: Եվ բացի այդ, դա մեծ ջանք չի գործադրում. մեկ անգամ ֆավիկոն պատրաստելով և այն ճիշտ տեղադրելով ձեր կայքում, կարող եք մոռանալ դրա մասին առաջիկա մի քանի ամիսների ընթացքում:

Հետևաբար, ազատ զգալ փորձարկել, նոր բան հորինել, փորձել, և ամեն ինչ կստացվի:

Խորհուրդ ենք տալիս: