Փոխարկեք PNG-ն ICO՝ հստակ favicon ստանալու համար
Favicon-ը փոքրիկ պատկերն է, որը կայքին տալիս է իր տեսողական ստորագրությունը։ Դուք տեսնում եք այն բրաուզերի ներդիրում՝ էջի վերնագրի կողքին, ձեր էջանիշների ցանկում, ձեր դիտարկումների պատմության հասցեագոտու բացվող ցանկում, և երբեմն նաև որոնման արդյունքների կողքին։ Այն փոքր է, բայց շատ բան է անում. ճանաչելի favicon-ն օգնում է օգտատերերին գտնել ձեր ներդիրը մի քանիսի մեջ և ազդանշանում է, որ կայքն ավարտված է և խնամված։ Այդ փոքրիկ պատկերակի դասական ֆորմատը ICO-ն է, և մեկը ստանալու ամենահեշտ ձևը մաքուր քառակուսի PNG-ից սկսելն է և այն փոխարկելը։
Այս գործիքը վերցնում է PNG պատկերը և վերածում է ICO favicon-ի հենց ձեր բրաուզերում։ Փոխարկումն աշխատում է տեղում՝ ձեր սեփական սարքի միջոցով, ուստի ընտրած նկարը երբեք չի վերբեռնվում սերվեր։ Դա կարևոր է, երբ ձեր պատկերակը լոգո է կամ բրենդային ակտիվ, որը գերադասեիք չհանձնել երրորդ կողմին։ Երբ ֆայլը պատրաստ է, պարզապես ներբեռնում եք այն։
Ինչ է ICO ֆորմատը, և ինչու է այն պահում մի քանի չափ
ICO-ն պատկերակների կոնտեյների ֆորմատ է, որի ծագումը Microsoft Windows-ից է, որտեղ այն պահում է ծրագրերի, դյուրանցումների և թղթապանակների պատկերակները։ Դրա հատկանշական հատկությունը, և պատճառը, թե ինչու այն դարձավ վեբ favicon-ների ստանդարտ, այն է, որ մեկ ICO ֆայլը կարող է միանգամից պահել նույն պատկերը մի քանի լուծաչափերով։ Փոխարեն մեկ ֆիքսված բիթմափի, ֆայլը փաթեթավորում է քառակուսի պատկերների փոքր հավաքածու և թողնում է, որ բրաուզերը կամ օպերացիոն համակարգն ընտրի, ինչ չափն է հարմար այն վայրին, որտեղ պետք է նկարել պատկերակը։
Դա իսկապես օգտակար է։ Բրաուզերի ներդիրին անհրաժեշտ է չնչին պատկերակ, էջանիշների գոտին կարող է օգտագործել մի փոքր ավելի մեծ, և desktop-ի ամրագրված դյուրանցումը կարող է պահանջել ավելի մեծ։ Բազմաչափ ICO-ով, ամեն համատեքստ վերցնում է իրեն հարմար տարբերակը, այնպես որ ձեր պատկերակը մնում է հստակ, փոխարենը մեկ փոքր բիթմափից մեծացվելու և մշուշոտ դառնալու։ ICO-ն նաև պահպանում է թափանցիկություն, ինչը կլորավուն կամ անկանոն ձևի լոգոյի անկյունները մաքուր է պահում ցանկացած ներդիրի գույնի ֆոնի վրա։
Առաջարկվող favicon չափեր
Կայքի favicon-ի համար երեք չափ, որ արժե ներառել, 16-ից 16, 32-ից 32 և 48-ից 48 պիքսելն են։ 16 պիքսելանոց տարբերակը ամենից հաճախ բրաուզերները ցույց են տալիս ներդիրում և հասցեագոտում։ 32 պիքսելանոց տարբերակն օգտագործվում է ավելի բարձր լուծաչափով էկրաններին, և որոշ էջանիշների ու պատմության դիտումների մեջ, ուստի ժամանակակից էկրաններին պահում է հստակ տեսք։ 48 պիքսելանոց տարբերակը ծածկում է ավելի մեծ համատեքստեր, ինչպիսին են Windows կայքի դյուրանցումները։ Քանի որ դրանք բոլորն ապրում են մեկ ICO ֆայլում, դուք առաքում եք մեկ ակտիվ և թողնում եք, որ ամեն մակերես ընտրի, ինչն է իրեն հարկավոր։
Սկսեք քառակուսի PNG-ից, որպեսզի ոչինչ չձգվի։ Եթե ձեր աղբյուր պատկերն ուղղանկյուն է կամ ավելորդ մեծ, նախ կտրեք կամ մասշտաբավորեք այն մաքուր քառակուսու մեր պատկերի փոփոխողի միջոցով, ապա գործարկեք փոխարկումը։ Պարզ, բարձր հակադրությամբ դիզայնը շատ ավելի լավ է կարդացվում 16 պիքսելով, քան մանրամասն նկարազարդումը, ուստի գերադասեք համարձակ ձևերը՝ նուրբ տեքստից բարձր։
Ինչպես ավելացնել favicon-ը ձեր կայքին
Երբ ունեք ձեր ICO ֆայլը, վերբեռնեք այն ձեր կայքում, ավանդաբար՝ կայքի արմատում որպես favicon.ico։ Բազմաթիվ բրաուզերներ ինքնաբերաբար կգտնեն այն այնտեղ, բայց լավագույն պրակտիկան է հստակորեն հայտարարել այն ձեր HTML-ի head հատվածում, որպեսզի կռահման կարիք չլինի։ Ավելացրեք նման link tag.
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Տեղադրեք այդ տողը ձեր էջերի <head> հատվածում։ rel="icon" հատկանիշն ասում է բրաուզերին, որ այս ռեսուրսը էջի պատկերակն է, և href-ը մատնանշում է, թե որտեղ եք պահել ֆայլը։ Եթե օգտագործում եք արմատից հարաբերական ուղի, ինչպես վերևում ցույց տրվածը, նույն հայտարարությունն աշխատում է ձեր կայքի ամեն էջում։ Տեղակայելուց հետո, կարող եք ստիպված լինել կատարել կոշտ թարմացում կամ մաքրել cache-ը, մինչև նոր պատկերակը հայտնվի, քանի որ բրաուզերները ագրեսիվորեն պահում են favicon-ները։
Գաղտնի փոխարկում ձեր բրաուզերում
Ամեն ինչ կատարվում է ձեր սարքում։ Ձեր ընտրած PNG-ն կարդացվում, վերծանվում և վերակոդավորվում է ICO-ի տեղում, և ոչինչ չի հեռանում ձեր մեքենայից գործընթացի ընթացքում։ Չկա հաշիվ, չկա հերթ և չկա սերվերային պահեստավորում, ինչը այն հարմար է դարձնում նույնիսկ չհրապարակված լոգոների կամ պայմանագրով պաշտպանված հաճախորդական աշխատանքի համար։ Գրաֆիկան պատրաստելու և կարգավորելու ավելի շատ ձևերի համար դիտեք մեր պատկերի բոլոր գործիքները։
Հաճախ տրվող հարցեր
Իմ նկարը վերբեռնվու՞մ է ինչ-որ տեղ։
Ոչ։ PNG-ն ICO է վերածվում ամբողջությամբ ձեր բրաուզերում՝ ձեր սեփական սարքի վրա։ Ոչինչ չի ուղարկվում սերվեր, և ոչինչ չի պահվում, ուստի ձեր նկարը մնում է գաղտնի։
Ի՞նչ չափեր պետք է ներառի իմ favicon-ը։
Ամենաօգտակար չափերն են 16-ից 16, 32-ից 32 և 48-ից 48 պիքսելը։ 16 պիքսելանոց պատկերը ցուցադրվում է բրաուզերի ներդիրներում, մինչդեռ ավելի մեծերը պատկերակը հստակ են պահում բարձրլուծաչափ էկրաններին և desktop դյուրանցումների վրա։
Ինչու՞ օգտագործել ICO, ոչ թե պարզապես PNG։
ICO-ն երկարատև favicon ֆորմատն է, և կարող է մեկ ֆայլում պահել մի քանի չափ։ Բրաուզերները և օպերացիոն համակարգն ընտրում են այն լուծաչափը, որը հարմար է ամեն համատեքստի, ուստի պատկերակը մնում է հստակ, փոխարենը մեկ բիթմափից մեծացվելու։
ICO-ն պահպանու՞մ է թափանցիկությունը իմ PNG-ից։
Այո։ ICO ֆորմատն աջակցում է թափանցիկություն, ուստի ձեր PNG-ի թափանցիկ հատվածները պահպանվում են, և պատկերակը մաքուր է միանում ցանկացած ներդիրի կամ ֆոնի գույնի հետ։
Ինչպե՞ս ավելացնել favicon-ը ձեր կայքին։
Վերբեռնեք ICO ֆայլը ձեր կայքում, սովորաբար որպես favicon.ico արմատում, և ավելացրեք link tag ձեր HTML-ի head հատվածում, օրինակ՝ link rel icon type image x-icon href slash favicon.ico։ Ապա մաքրեք ձեր բրաուզերի cache-ը, որպեսզի տեսնեք այն։
Իմ աղբյուր պատկերը քառակուսի չէ։ Ի՞նչ պետք է անեմ։
Նախ կտրեք կամ մասշտաբավորեք այն քառակուսու, որպեսզի չձգվի։ Կարող եք օգտագործել մեր պատկերի փոփոխողը մաքուր քառակուսի ստանալու համար, ապա այն ICO փոխարկել լավագույն տեսք ունեցող favicon-ի համար։