Ինչպես ստեղծել HTML և SVG favicon

Ինչի համար է պետք գործիքը

Favicon-ը փոքր պատկեր է, որը սովորաբար երևում է կայքի ներդիրում կամ էջանիշերում։ Այս գործիքը նախատեսված է favicon-ի հետ կապված երկու տեսակի նյութ ստանալու համար՝ HTML favicon-ի նշագրում և SVG favicon-ի նշագրում։ Այն կարող է աշխատել կամընտիր պատկերակի հղումով, emoji-ով, ֆոնի գույնով և տեքստի գույնով։ Այդ պատճառով այն հարմար է այն դեպքերում, երբ ցանկանում եք արագ պատրաստել պարզ նշագրում և առանձին SVG նյութ՝ ձեր կայքի կառուցվածքին համապատասխան օգտագործելու համար։

Գործիքի արդյունքը մեկ պատկերային ֆայլի նկարագրությամբ չի սահմանափակվում։ Ստեղծման հաջող ավարտից հետո ստացվում է favicon-ի նյութ, որը ներառում է HTML-ում նախատեսված հղումներ, ինչպես նաև SVG նշագրում։ HTML հատվածում ներառվում է նաև SVG data URI-ով favicon-ի հղում։ Եթե տրամադրում եք պատկերակի հղում, այն չի նկարագրվում որպես ներբեռնվող կամ փոխարկվող պատկեր. դրա աջակցվող կիրառությունն այն է, որ հղումը տեղադրվի HTML favicon-ի հղումների մեջ։

Կայքի անվան դաշտը կարող եք լրացնել, եթե ցանկանում եք այն պահել ձևաթղթի մեջ, սակայն այդ արժեքը ստեղծվող նյութում չի օգտագործվում։ Ուստի favicon-ի տեսքը կամ ստացված նշագրումը փոխելու համար պետք է ուշադրություն դարձնել emoji-ին, գույներին և, անհրաժեշտության դեպքում, պատկերակի հղմանը, ոչ թե կայքի անվանը։

Ինչպես լրացնել դաշտերը և ստանալ արդյունքը

1. Նախ որոշեք, թե ինչ նյութ եք ուզում ստանալ։ Եթե անհրաժեշտ է HTML-ում օգտագործվող favicon-ի նշագրում, կարող եք նաև լրացնել պատկերակի հղումը։ Եթե առանձին հղում չունեք, թողեք այդ դաշտը դատարկ և աշխատեք SVG-ի emoji-ի ու գույների միջոցով։

2. Կայքի անվան դաշտում կարող եք գրել ձեր նախագծի անունը, օրինակ՝ «Արարատ»։ Այս քայլը միայն ձևաթղթի տվյալը լրացնելու համար է. անունը չի փոխում ստեղծվող favicon-ը և չի ավելացվում ստացված HTML կամ SVG նշագրումում։

3. Պատկերակի հղման դաշտը լրացրեք միայն այն ժամանակ, երբ ցանկանում եք այդ հղումը տեսնել HTML favicon-ի հղումներում։ Ոչ դատարկ արժեքի դեպքում HTML արդյունքը ներառում է երկու icon-link տարր, և տրամադրված հղումը դրանց մեջ տեղադրվում է HTML-ի համար պաշտպանված ձևով։ Դաշտը դատարկ թողնելու դեպքում գործիքը պատկերակի հղում չի ավելացնում այդ եղանակով։

4. Ընտրեք SVG-ում ցուցադրվող emoji-ն։ Այն SVG-ի մեջ օգտագործվում է որպես տեքստ։ Եթե emoji չեք տրամադրում, կիրառվում է wrench emoji-ն։ Այս ընտրությունը վերաբերում է SVG նյութին, ուստի արդյունքը դիտելիս փնտրեք ընտրված նշանը հենց SVG-ի բովանդակության մեջ։

5. Նշեք ֆոնի և տեքստի գույները։ Գործիքը ձեր տրամադրած արժեքներն օգտագործում է ստեղծվող SVG-ում։ Եթե գույները չեք փոխում, օգտագործվում է #2563eb ֆոնի և #ffffff տեքստի համար։ Ընտրելիս պահպանեք ձեր նախագծի համար նախատեսված ձևաչափը, քանի որ գործիքի փաստացի վարքագիծը չի հաստատում գույների արժեքների վավերացում։

6. Ստեղծեք արդյունքը և դիտեք վերադարձված նյութը։ Առանձին պահեք HTML favicon-ի նշագրումը և SVG նշագրումը, ապա յուրաքանչյուրն օգտագործեք ձեր նախագծի կառուցվածքին համապատասխան տեղում։ Այս հոդվածում գործիքի փոխարեն արդյունք չի ստեղծվում, այնպես որ գործնական ստուգման համար անհրաժեշտ է տվյալները մուտքագրել հենց գործիքի ձևաթղթում։

Ինչպես հասկանալ ստացված նյութը

Ստացված նյութը նախ դիտարկեք ըստ երկու հիմնական մասի։ HTML հատվածում փնտրեք favicon-ի հղումները։ Եթե պատկերակի հղման դաշտում ոչ դատարկ արժեք եք նշել, պետք է տեսնեք երկու icon-link տարր, որոնց մեջ նույն հղումը ներկայացված է HTML-ի համար պաշտպանված ձևով։ Բացի դրանից, HTML արդյունքը ներառում է SVG data URI-ով favicon-ի հղում։ Եթե պատկերակի հղումը դատարկ է, մի սպասեք, որ գործիքը ինքնուրույն կստեղծի, կներբեռնի կամ կվերածի այդ հղումը պատկերի։

Հաջորդը դիտեք SVG նշագրումը։ Դրա մեջ emoji-ն ներկայացվում է որպես տեքստ, իսկ ֆոնի և տեքստի գույները վերցվում են ձեր մուտքագրած արժեքներից կամ համապատասխան լռելյայն գույներից։ Այսպիսով, արդյունքը հասկանալու համար համեմատեք SVG-ում երևացող emoji-ն ու գունային արժեքները ձեր մուտքագրած տվյալների հետ։ Եթե փոխում եք միայն կայքի անունը և մյուս դաշտերը պահում եք նույնը, այդ փոփոխությունը չպետք է դիտարկեք որպես favicon-ի փոփոխության ազդանշան, քանի որ կայքի անվան դաշտը նշագրումում չի օգտագործվում։

Պատկերակի հղումը նույնպես մեկնաբանեք միայն որպես HTML նշագրումում տեղադրվող տվյալ։ Արդյունքը չի նշանակում, որ հղման հասցեով պատկեր է ստուգվել կամ պատրաստվել։ Նույն կերպ, հաջողությամբ ստացված նյութը չի հաստատում, որ ձեր emoji-ն կամ գույների արժեքները վավերացված են։ Եթե արդյունքի մեջ տեսնում եք HTML favicon-ի նյութ և SVG նշագրում, դա համապատասխանում է գործիքի հաջող ստեղծման ուղուն։

Գործնական օրինակ

Դուք պատրաստում եք փոքր կայքի favicon և ցանկանում եք ստանալ պարզ SVG տարբերակ՝ առանց առանձին պատկերակի հղում տրամադրելու։

Կայքի համար մուտքագրեք «Արարատ» անունը, ընտրեք արևի emoji, ֆոնի համար նշեք #2563eb, տեքստի համար՝ #ffffff, իսկ պատկերակի հղման դաշտը թողեք դատարկ։ Ստեղծեք արդյունքը և դիտեք HTML ու SVG նյութերը։

Ստացվում է HTML հատված՝ favicon-ի հղումներով, և առանձին SVG նշագրում, որտեղ օգտագործվում են ընտրված emoji-ն, ֆոնի գույնը և տեքստի գույնը։

Սահմանափակումներ

• Աջակցվող վարքագիծը պատկերակի հղումը HTML նշագրումում տեղադրելն է, ոչ թե այն ներբեռնելը կամ փոխարկելը։ Փաստերը չեն հաստատում emoji-ի կամ գույների արժեքների վավերացում։

Հաճախակի սխալներ

• Եթե սպասում եք, որ պատկերակի հղումը կներբեռնվի որպես պատկեր կամ որ գույնի արժեքը պարտադիր կստուգվի, վերանայեք այդ սպասումը։ Հղումը լրացվում է HTML favicon-ի հղումներում, իսկ գույները փոխանցվում են SVG-ին, ուստի նախապես ստուգեք ձեր մուտքագրած տվյալները։

Հաճախ տրվող հարցեր

Կարո՞ղ եմ favicon ստեղծել առանց պատկերակի հղման։

Այդ դեպքում գործիքը չի ունենա HTML favicon-ի հղումներում տեղադրելու պատկերակի հղում, սակայն SVG նյութը կարող է կազմվել տրամադրված emoji-ի և գույների հիման վրա։

Կայքի անունը փոխո՞ւմ է ստացված favicon-ը։

Կայքի անվան դաշտը ընդունվում է, սակայն այն չի օգտագործվում ստեղծված HTML և SVG նշագրումներում, հետևաբար անունը փոխելը ինքնին չի փոխում favicon-ի նյութը։

Ի՞նչ է ներառվում SVG favicon-ում։

SVG-ում տրամադրված emoji-ն օգտագործվում է որպես տեքստ, իսկ ֆոնի և տեքստի գույները վերցվում են ձեր արժեքներից։ Չտրամադրելու դեպքում օգտագործվում են wrench emoji-ն, #2563eb ֆոնը և #ffffff տեքստի գույնը։