Ինչպես ստեղծել favicon կայքը: օգտակար խորհուրդներ եւ ծառայություններ

1. Ինչպես ստեղծել favicon
2. Ինչպես կատարել favicon- ի Photoshop- ում
3. Ինչպես փրկել favicon
4. Ինչպես տեղադրեք favicon կայքը
5. Ինչպես փոխարինել favicon- ին
6. Ինչպես ստեղծել ավելի բարդ favicons

Դժվար է գուշակել, թե ինչ ֆավիկոն է, երբ առաջին անգամ լսեք այս խոսքը: Սա մանրանկարիչ պատկերակ է , որը ցուցադրվում է բրաուզերների էջերում, հասցեների գծերի եւ այլ ոլորտներում `կախված ձեր օգտագործած օպերացիոն համակարգից եւ ինտերնետ բրաուզերից: Այն կարելի է ապահով կերպով կոչվել կայքերի դիզայնի ամենաարդիական եւ քմահաճ տարրերից մեկը:

Բավական favicon- ի ստեղծումը շատ բարդ է, քանի որ պատկերակը փոքր է, այն պետք է հստակ լինի եւ ցուցադրի ձեր կայքի հետ կապված մի բան: Ստեղծելով favicon- ը, որը համընկնում է բոլոր հայտնի բրաուզերների հետ, կարող է նաեւ լինել ահավոր խնդիր: Այս հոդվածում մենք կզբաղվենք դրա ստեղծման բոլոր բարդ կողմերով: Եթե ​​Ձեզ անհրաժեշտ է նաեւ լոգո, ապա մենք ունենք մի հոդված ինչպես դա անել:

Ինչպես ստեղծել favicon

Սկսենք ֆավիկոնի ձեւավորմանը: Լավ ձեւավորում, չնայած դրա կոմպակտությանը, պետք է արտացոլի Ձեր կայքի էությունը եւ լինեն կորպորատիվ ինքնության օրգանական մաս: Սովորաբար, պատկերակը մի ընկերության գրաֆիկական նշանն է (պատկերակը) եւ ոչ թե ամբողջ logo (պատկերակ, տեքստ եւ կարգախոս):

Որպես favicon, այդ կայքերն օգտագործում են իրենց պատկերակները (կամ պատկերները մոտ են նրանց):

Ֆավիկոնի տեքստը չպետք է օգտագործվի, քանի որ այս տեքստը անընթեռնելի է փոքր չափսի չափի պատճառով: Այս կանոնի միակ բացառություններն այնպիսին են, որոնք հայտնի են ավտոմատ կերպով կապված կոնկրետ ապրանքանիշի հետ: Օրինակ, առցանց ռեսուրսը Wikipedia- ը թողեց favicon- ում `« W »,« Facebook »եւ« F »նամակը:

Այս ֆավիկոններում կան տառեր, որոնք խիստ կապված են որոշակի ապրանքանիշի հետ: Օրինակ, Ֆեյսբուքը օգտագործում է իր գրաֆիկական նշանը: Նաեւ նշում է, որ Disney- ի պատկերով տեսանելի են պիքսելները: Սա այն է, որ պատճենը նկարահանվել է Retina էկրանին, որը համատեղելի է 16 × 16 սենսորների հետ, մինչդեռ կայքերն օգտագործում են 32 × 32 սրբապատկերներ:

Քանի որ favicons փոքր պատկերներ են, յուրաքանչյուր փիքսելը կարեւոր դեր է խաղում: Երբեմն լոգոն կրճատելուց հետո անհատական ​​փիքսելները տեսանելի են դառնում, որի պատճառով պատկերը դառնում է «բլուր»: Հստակության հասնելու համար դուք պետք է խմբաքանակը խմբագրեք մակարդակի վրա:

Խուսափելու համար, դուք պետք է չափափոխեք լոգոն, օգտագործելով հատուկ խմբագիրներ, ինչպիսիք են Photoshop կամ GIMP: Նախ անհրաժեշտ է կրճատել պատկերի չափը 64x64 պիքսել (սա ամենամեծ ֆավիկոնն է): Այնուհետեւ դուք պետք է խմբագրեք յուրաքանչյուր փիքսել, օգտագործելով Մատիտ գործիքը, մինչեւ պատկերը պարզ լինի: Սա դժվար գործ է, բայց արդյունքը արժե այն: Երբ favicon 64x64 պատրաստ է, դուք պետք է նույն աշխատանքը կատարեք 16 × 16, 24 × 24 եւ 32 × 32 պիքսել պատկերը: Այսքան չափսերը պետք է ճիշտ կերպով ցուցադրվեն բոլոր բրաուզերների եւ գործիքների մեջ.

• 64x64 - Safari բրաուզերի էջանիշերը;
• 32x32 - բարձր բանաձեւի ցուցադրում (Retina);
• 24x24 - էջանիշեր Internet Explorer եւ MicroSoft Edge;
• 16x16 - Google Chrome եւ այլ բրաուզերներ:

Ինչպես կատարել favicon- ի Photoshop- ում

Նախեւառաջ անհրաժեշտ է ստեղծել մի քանի կտավ վերը նշված չափսերով:

Այնուհետեւ դուք պետք է ավելացնել կտավ, մի նամակ կամ այլ կերպար կտավին:

Ինչպես փրկել favicon

Ունեցել տարբեր չափերի սրբապատկերներ, յուրաքանչյուրը պահել որպես PNG (թափանցիկ) ֆայլ (24 բիթ): Photoshop- ում Դուք կարող եք օգտվել Ֆայլի ցանկում առկա Պահպանման վեբ գործառույթից: Այնուհետեւ պետք է միացնել բոլոր PNG ֆայլերը մեկ ICO ֆայլի մեջ: Դուք կարող եք միաժամանակ օգտագործել PNG ֆայլերը եւ ICO ֆայլերը, բայց հաճախ նույնիսկ Safari եւ Chrome նախընտրում են միայն ICO ֆորմատը: Իմ կարծիքով, ավելի հեշտ է ստեղծել մեկ ICO ֆայլ: ICO ֆորմատը շատ տարածված չէ, բայց բարեբախտաբար կան մի շարք գործիքներ, որոնք կարող են օգնել ձեր ֆայլերը այս ձեւաչափով փոխարկել: Այդ նպատակով ես նախընտրում եմ օգտագործել X-Icon խմբագիր . Սա անվճար առցանց ծառայություն է, որը ակնթարթորեն վերբեռնված պատկերները վերափոխում է մեկ ICO ֆայլ, որից հետո կարող եք ներբեռնել այն: Սա ոչ մի բարդ բան չէ, պարզապես հետեւեք կայքի հրահանգներին: Եթե ​​դուք համարում եք հուսահատ անձ, կարող եք փորձարկել այս ծառայության պիքսելային խմբագրիչը եւ նկարագրել ֆավիկոն: (Թեեւ նախընտրում եմ խմբագրել favicons ավելի պրոֆեսիոնալ խմբագիր, օրինակ, Photoshop):

Ներկայացնելով ձեր PNG պատկերները X-Icon խմբագրին, դուք կստանաք մեկ ICO ֆայլ, արտադրանքի վրա:

Ինչպես տեղադրեք favicon կայքը

Այսպիսով, արդեն ունեք ICO ֆայլ: Այժմ դուք պետք է ավելացնեք այն կայքը: Վերանվանել ֆայլը favicon.ico- ին եւ տեղադրել այն ձեր կայքի արմատական ​​թղթապանակում (որտեղ index.html ֆայլը եւ այլ ստանդարտ ֆայլերը պահվում են): Հաջող հավելվածից հետո դուք կարող եք դիտել այն ձեր կայքում: com / favicon.ico: Գրեթե բոլոր բրաուզերները փնտրում են favicon.ico ֆայլի արմատային թղթապանակում: Հետեւաբար, կարեւոր է, որ դուք ներբեռնեք favicon այս թղթապանակում: Տարբեր բրաուզերների հետ համատեղելիության համար ավելի լավ է ավելացնել որեւէ HTML էլեմենտ կամ հղումներ, որոնք ցույց են տալիս դրա գտնվելու վայրը: Այս հնարքն աշխատում է բոլոր բրաուզերների համար, մինչեւ IE6: Բացի այդ, եթե դուք ունեք WordPress կայք, ապա շատ թեմաներով դուք կարող եք ավելացնել favicon թեման կարգավորումներով: Այս մեթոդը կարող է օգտագործվել նաեւ:

Ինչպես փոխարինել favicon- ին

Որոշ անհասկանալի պատճառներով բրաուզերները ավելացնում են այն քեշի: Հետեւաբար, երբ դուք վերբեռնեք նոր ICO ֆայլ, զննարկիչը կարող է շարունակել ցույց տալ ձեր հին ֆավիկոն: Ինչ անել այս դեպքում: Դուք կարող եք ավելացնել ժամանակավոր HTML ֆայլ, որը ցույց է տալիս ձեր նոր ֆավիկոնի տեղադրությունը: URL- ի վերջում դուք նաեւ պետք է ավելացնեք կարճ հարցման նիշ:

<link rel = "դյուրանցման պատկերակ" href = "yours website .com / favicon.ico? v = 2" />

Այսպիսով զննարկիչը կարծում է, որ սա եզակի URL է, եւ, հետեւաբար, ստիպված կլինի ցուցադրել նոր պատկերակ: Ֆավիկոնի թարմացումից հետո այս HTML կոդը կարող է ամբողջությամբ հեռացվել: Եթե ​​դուք պետք է փոփոխություններ կատարեք favicon- ում, ապա օգտագործեք նույն տեխնիկան, ամեն անգամ ավելացնելով համարը, «v» - ից հետո, հարցման տողում: Այսպիսով, զննարկիչը ամեն անգամ ընկալում է այս URL- ն որպես եզակի եւ իր նոր տարբերակը: Մի մոռացեք ջնջել HTML կոդը հաջող թարմացումից հետո:

Ինչպես ստեղծել ավելի բարդ favicons

Այս հոդվածում ուզում էի նկարագրել ֆավիկոնների ստեղծման համընդհանուր եւ հեշտ ձեւ, որը կգործի գրեթե ցանկացած հարթակի վրա: Բայց վեբ դիզայնի եւ զարգացման մեջ չկա կատարելագործման սահմանափակում: Եթե ​​ցանկանում եք իմանալ, թե ինչպես ստեղծել ավելի բարդ պատկերակները, կարող եք փորձել օգտագործելով ծառայությունը favico.js . Այն թույլ է տալիս ստեղծել տարբեր թվեր ունեցող դինամիկ պատկերներ: Այս պատկերակի շնորհիվ դուք կարող եք տեսնել չընթերցված հաղորդագրությունների քանակը, նույնիսկ եթե համապատասխան պիտակը ակտիվ չէ: Եթե ​​ցանկանում եք ստեղծել անիմացիոն favicons առցանց, կարող եք փորձել օգտագործելով favicon գեներատոր favicon.cc .

Լրացուցիչ առցանց գեներատորներ կարող եք գտնել այստեղ .

Եթե ​​ցանկանում եք կիսել ձեր խորհուրդները favicons ստեղծելու կամ խնդրելու հարց, ես սպասում եմ ձեզ մեկնաբանություններում: