Պատրաստի ֆավիկոններ. Favicons ստեղծելու ունիվերսալ միջոց

Favicon -(կարճ բառերի համար «Սիրելի պատկերակ») նկարի փոքր չափս է 16x16 պիքսել,որը կտեսնի ձեր կայքի այցելուն: Այն հայտնվում է կայքի URL-ի կողքին բրաուզերի հասցեագոտում: Բացի այդ, այս պատկերակը հայտնվում է ձեր կայքի անվան կողքին բաց ներդիրների, էջանիշների և որոնման արդյունքների ցանկում՝ հեշտացնելով օգտվողների համար արագ գտնել ձեր կայքը այլ կայքերի շարքում:

Կանխադրված որպես սրբապատկերներկայքը ցուցադրվում է դիտարկիչի պատկերակը: Կայքը մնացածից տարբերվելու և օգտատիրոջ բացած անթիվ մոխրագույն ներդիրներում չկորցնելու համար անհրաժեշտ է պատրաստել ձեր սեփական օրիգինալ ֆավիկոնը։

Թեև շատ ժամանակակից վեբ բրաուզերներ աջակցում են ֆավիկոններին GIF, PNG կամ այլ հայտնի ֆայլերի ձևաչափերով, Internet Explorer-ի բոլոր տարբերակները դեռևս պահանջում են ֆավիկոններ որպես ֆայլեր: ICO(Microsoft-ի ձևաչափ): Այս ձևաչափով ցանկացած զննարկիչ կհասկանա ձեր պատկերակը:

Ինչու՞ է ձեզ անհրաժեշտ ֆավիկոն:

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

Բնականաբար, ֆավիկոնը կարող է գրավել օգտատիրոջ ուշադրությունը, և նա կկարդա ձեր հոդվածի վերնագրի հղումը: Վերնագիրը, լավ հատվածի և գեղեցիկ պատկերակի հետ համատեղ, կբարձրացնի սեղմումների մակարդակը և, համապատասխանաբար, դեպի ռեսուրս տրաֆիկը:

Անմիջապես կցանկանայի նշել, որ «GS» պիտակ ունեցող կայքերի համար պատկերակն ինքնին ի վիճակի չէ բարելավել ռեսուրսի տպավորությունը: Բայց դա նման է հագուստի հանդիպման: Մի հիանալի Favicon- ը հաստատ կստեղծի կայքի առաջին տպավորությունը, որը հրավիրում է այցելելու:

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

Դուք, իհարկե, կարող եք փորձել գտնել պատրաստի Favicon.ico ֆայլ, www.iconfinder.com կայքում, բայց կարծում եմ, որ շատերը կցանկանային կատարել իրենց սեփականը: Ի վերջո, դա ֆավիկոնն է, որը կներկայացնի ձեր կայքը որոնման արդյունքներում: Այժմ դուք գիտեք, թե ինչպես դա անել: Այսպիսով, եկեք սկսենք:

Logaster- ը առցանց ծառայություն է `Logos եւ կորպորատիվ ինքնության տարրեր ստեղծելու համար: Դրա մեջ դուք ինքնաբերաբար կստանաք, ընդամենը մի քանի կտտոցով, ICO եւ PNG ձեւաչափով կայքի պատկերակը:

Բայց հիշեք, որ ոչ մի ավտոմատ լոգո գեներատոր չի կարող փոխարինել մարդկային ստեղծագործությանը:

Իհարկե, խոշոր ընկերությունները չեն օգտագործի նման գործիքներ: Նրանք կգտնեն թանկարժեք դիզայներ, նրանց համար պրոֆեսիոնալ պատկերանշան ստեղծելու համար: Բայց փոքր ֆիրմաների եւ անհատ ձեռներեցների համար նման գործիքը կարող է օգտակար լինել:

Ինչպես է պատկերասրահ ստեղծելու գործընթացը Logaster- ում:

  1. Ձեր Favicon- ի համընկնելու համար ձեր պատկերանշանը ձեզանից կառաջարկվի նախ ստեղծել պատկերանշան (այն անվճար է):
  2. Գրեք անուն եւ, եթե ցանկանում եք, կարգախոսը նշում է գործունեության տեսակը, եւ Logaster- ը ինքնուրույն կպատրաստի ձեզ համար շատ պատկերների տարբերակներ:
  3. Ընտրեք համապատասխան պատկերանշան, կարող եք այն փոխել ավելի ուշ:

Ահա թե ինչ եմ ստացել

Այժմ կարող եք սեղմել «Ներբեռնման պատկերանշանը» կոճակը: Անվճար տարբերակում դրա վրա կլինի Logaster.com ջրանիշ

Պատկերանշանը կարելի է ձեռք բերել: Դրանից հետո դուք կկարողանաք ներբեռնել ընտրված ձեւաչափով (PNG, JPEG, PDF, SVG) եւ չափ (1024 PX, 5000 PX):

Հիմա եկեք անցնենք ֆավիկոն ստեղծելու:

  1. Կրկին ընտրեք ձեր նախընտրած տարբերակը:
  2. Դուք կարող եք փոխել ձեւը քառակուսի, կլորացված, կլոր կամ ընդհանրապես որեւէ ձեւ:
  3. Desired անկության դեպքում ավելացնել գունավոր հարված `կտտացնելով հարվածային գործիքին:
  4. Սեղմեք «Պահպանել» կոճակը:

Ահա թե ինչպես պարզվեց Favicon- ը: Սկզբունքորեն, դա լավ է թվում:

Ինչպես ավելացնել ֆավիկոն ձեր կայքում

  1. Գնեք եւ ակտիվացրեք Favicon- ը:
  2. Ներբեռնեք այն:
  3. Unzip ներբեռնված ֆայլը ձեր կայքի արմատային պանակում:
  4. Տեղադրեք հետեւյալ ծածկագիրը կայքի բոլոր էջերում, պիտակի մեջ :

Դիզայնի փաթեթ զեղչով

Բացի այդ, դուք կարող եք ձեռք բերել ամբողջ կորպորատիվ ինքնության հավաքածուն: Ահա մեկ տարբերակ.

Առնչվող հոդված. Ինչպես միացնել yandex.speller- ը WordPress- ին


Փլագին ֆավիկոններ ստեղծելու համար

Favicons ստեղծելու համար կան հսկայական թվով տարբեր ծրագրեր: Ըստ էության, դրանք պարզունակ են, թույլ տալով ստեղծել սրբապատկերներ, օգտագործելով 16 գույ:

Դուք կարող եք ֆավիկոն ստեղծել անմիջապես Photoshop-ում: Դա անելու համար ձեզ հարկավոր է plugin, որը կարելի է ներբեռնել www.telegraphics.com.au կայքից: Այն տեղադրելու համար պատճենեք ֆայլը ICOFormat.8biդեպի c:Program FilesAdobeAdobe Photoshop CS2Plug-InsFile Formats գրացուցակը:

Օգտագործելով plugin ICOFormat.8bi, կարող եք նկարները պահել որպես «.ico ֆայլեր»:

Ինչպես տեղադրել ICO (Windows Icon) ձևաչափի հավելվածը

  1. 64-բիթանոց Windows (Vista/Windows 7):
    • Վերագործարկեք նախքան տեղադրումը;
    • Տեղադրեք plugin-ը C:Program FilesAdobePhotoshopPlug-InsFile Formats պանակում, բայց ես այլ կառուցվածք ունեմ, ես այս ֆայլը պահում եմ այստեղ՝ C:Program FilesAdobeAdobe Photoshop CS6 (64 Bit)Plug-ins:
    • Եթե ​​դուք աշխատում եք 64-բիթանոց Windows համակարգով և գործարկում եք Photoshop CS4 կամ CS5 64-բիթանոց տարբերակը, ներբեռնեք հավելվածի 64-բիթանոց տարբերակըև դրեք այն Plug-Ins թղթապանակում, որը համապատասխանում է 64-բիթանոց Photoshop-ին (այսինքն՝ «Program Files» ոչ թե «Program Files (x86)»):
  2. Փլագինը տեղափոխեք «Ֆայլի ձևաչափեր» պանակը ձեր Photoshop Plugins պանակում.
    • Windows-ի համար (32 բիթ), ICOFormat.8bi
    • Windows-ի համար (64 բիթ), ICOFormat64.8bi
    • Mac OS X-ի համար, ICOFormat.plugin(Նշեք, որ CS2, CS3/4 և CS5 համար նախատեսված են առանձին տարբերակներ)
    • Mac OS X/Classic-ի համար, icoformat
    • 68K MacOS-ի համար, icoformat (68K)
  3. Եթե ​​օգտագործում եք Corel PSP Photo X2, տեղադրեք հավելվածը C:Program FilesCorelCorel Paint Shop Pro Photo X2LanguagesENPlugIns-ում:
  4. Դուրս եկեք և վերագործարկեք Photoshop-ը, եթե այն արդեն աշխատում է:

Գործում է նաև առցանց ծառայություն www.convertico.com: ConvertICO-ն անվճար առցանց ICO/PNG ֆայլերի փոխարկիչ է: Այն աշխատում է արագ և հեշտ է օգտագործել: Այն օգտագործվում է աշխատասեղանի պատկերակները, հավելվածների պատկերակները և կայքերի ֆավիկոնները փոխարկելու համար:

Ինչպես պատրաստել favicon.ico ինքներդ

  1. Բացեք Photoshop-ը:
  2. Ստեղծեք 32x32 պիքսել փաստաթուղթ:
  3. Տեղադրեք պատրաստի պատկերի խելացի օբյեկտը Illustrator-ից:
  4. Օգտագործելով «Save As» հրամանը, պահպանեք ֆավիկոնը .ICO * ձևաչափով:
  5. Ստացված ֆավիկոնը վերբեռնեք կայքի արմատին և միացրեք այն WordPress թեմայի միջոցով կամ ձեռքով գրանցեք այն կայքի ձևանմուշում։ Ինչպես միացնել favicon-ը, ես արդեն գրել եմ ավելի վաղ։

*Եթե դուք չունեք տեղադրված հատուկ պլագին ICO (Windows Icon) ձևաչափ, այն կարող եք ներբեռնել www.telegraphics.com.au/sw/ կայքից: Կան Mac-ների, Windows 32-ի, 64-բիթանոցների համար՝ Photoshop-ի բոլոր տարբերակների, ներառյալ CS6-ի աջակցությամբ:

ֆավիկոնի ցուցադրում

Ձեր կայքին ցուցադրեց ֆավիկոն,այն կարող է պարզապես տեղադրվել կայքի սկզբում: Բրաուզերն ու որոնման համակարգերն իրենք կորոշեն, որ դուք ունեք favicon.ico ֆայլ և այն ավտոմատ կերպով կցուցադրեն: Այս մեթոդը ամենապարզն է և արդյունավետ է 95% դեպքերում։ Բայց դուք կարող եք նաև բացահայտորեն միացնել favicon-ը:

Ի՞նչ է ֆավիկոնը:

Նրանց համար, ովքեր չգիտեն, թե ինչ է ֆավիկոնը, մենք ձեզ կտրամադրենք մի փոքր տեղեկատվություն, որը կօգնի ձեզ արագության հասնել: Favicon-ը 16x16 կամ 32x32 պիքսել չափերով փոքր պատկերակ է, որը սովորաբար պարունակում է լոգոն, ապրանքանիշի առաջին տառը կամ բնորոշ պատկեր, որն արտացոլում է բիզնեսի տեսակը կամ կայքի թեման:

Ինչու՞ է կարևոր ֆավիկոնը:

Favicon-ը կատարում է հետևյալ գործառույթները.

Բրենդինգ.

Օգտագործողի կողմից կայքի նույնականացում (օգտագործման հեշտություն):

Կայքին տալիս է պրոֆեսիոնալ տեսք:

Եկեք մանրամասն քննարկենք ֆավիկոնների օգտագործման հիմնական առավելությունները:

Ապրանքանիշի ճանաչում

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

Վստահություն

Օգտատերերը հակված են գնահատել ապրանքների և ծառայությունների առցանց վաճառողներին՝ հիմնվելով նրանց վեբկայքի պրոֆեսիոնալ լինելու վրա: Favicon-ի բացակայության տեսքով անզգուշությունը (որոնիչները ցուցադրում են կայք առանց ֆավիկոնի՝ որպես դատարկ փաստաթղթի պատկերակ) հեշտությամբ կարող է հանգեցնել վստահության կորստի, հատկապես, երբ օգտվողները ձեզ համեմատում են ձեր մրցակիցների հետ:

Կրկնվող այցելությունները

Հայտնի է, որ մարդիկ ավելի լավ են արձագանքում պատկերներին, քան տեքստին։ Հիմա ենթադրենք, որ ձեր կայքի այցելուն շտապում էր, երբ առաջին անգամ այցելեց այն և որոշեց էջանշել այն, որպեսզի կարողանար ավելի ուշ վերադառնալ: Ասենք, որ այս մարդը հետագայում որոշում է կայացնել կրկին այցելել ձեր կայքը եւ դիմում իր էջանիշներին: Դուք հաջողակ եք, եթե ունեք ճանաչելի ֆավիկոն, ինչպիսին է Google-ի նշանավոր և եզակի G-ն, և օգտվողները կգտնեն ձեզ: Եթե ​​Favicon չունեք, կարող եք նույնիսկ հանվել ձեր էջանիշների ցուցակից:

Խնայում է օգտագործողի ժամանակը

Favicons- ը պահպանում է օգտագործողի ժամանակը, որն անցկացրել է կայքի հայտնաբերումը էջանիշներում, պատմությունում կամ այլ վայրերում, որտեղ զննարկիչը Favicon- ը տեղադրում է արագ նույնականացման համար: Դա պարզապես կյանքը հեշտացնում է ձեր կայքի միջին այցելուի համար:

SEO-ի առավելությունները

Եթե ​​ձեր կայքը Favicon ունի, ապա ավելի տեսանելի կլինեք որոնման արդյունքներում, քան այն կայքերը, որոնք չունեն մեկը, ուստի կարող են ավելի շատ այցելուներ ներգրավել:

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

Կան բազմաթիվ գործիքներ, որոնք թույլ են տալիս րոպեների ընթացքում ստեղծել ֆավիկոն: Եթե ​​դուք չունեք դիզայնի հմտություններ կամ չգիտեք, թե ինչպես դա անել, կարող եք փորձել ստեղծել Favicon, օգտագործելով Logaster:

Դա անելու համար հետևեք քայլ առ քայլ հրահանգներին.

Քայլ 5. Ստեղծեք ֆավիկոն

Այժմ, երբ պատկերանշան ունեք, կտտացրեք «Ստեղծեք Favicon այս պատկերանշանի միջոցով» պատկերանշանի էջում:

Քայլ 6. Ընտրեք ցանկալի ֆավիկոնի դիզայնը

Ինչպես պատկերանշանի դեպքում, Logaster-ը կստեղծի մի քանի տասնյակ գեղեցիկ և օգտագործման համար պատրաստ ֆավիկոններ: Ընտրեք ձեր նախընտրած դիզայնը: Նախադիտումը թույլ կտա ձեզ տեսնել, թե ինչպես է ձեր ֆավիկոնը նայվում կայքում:

Եթե ​​Ձեզ անհրաժեշտ է փոխել ֆավիկոնը, կարող եք դա անել՝ խմբագրելով լոգոն, ինչպես որ ֆավիկոնները ստեղծվում են լոգոյի դիզայնի հիման վրա։ Այսպիսով, եթե ցանկանում եք, օրինակ, Favicon- ի այլ գույն, դուք պետք է վերադառնաք պատկերանշանի էջ, փոխեք դրա գույնը, ապա կրկին ստեղծեք Favicon- ը:

Դուք կարող եք ոգեշնչում գտնել ֆավիկոնների համար հետևյալ կայքերում.

Քայլ 7. Ներբեռնեք Favicon- ը

Դուք կարող եք ձեռք բերել Favicon- ը առանձին 9,99 դոլարով կամ ձեռք բերել դիզայնի փաթեթ, որը ներառում է ոչ միայն Favicon- ը, այլեւ պատկերանշանը, այցեքարտը, ծրարը եւ նամակը: Կարող եք պարզել, թե ինչպես գնել դիզայնի փաթեթ:

Վճարումից հետո կարող եք ներբեռնել ֆավիկոնը ico և png ձևաչափերով:

Որտեղ կարող եմ օգտագործել Favicon- ը:

Դուք կարող եք օգտագործել favicon:

Կայքում;

Շարժական սարքեր. Օգտագործողը կարող է ֆավիկոն ավելացնել իր սարքի հիմնական էկրանին (էջանիշի նման մի բան)՝ Android, IOS, Windows Phone և այլն;

Ծրագրեր եւ ծրագրեր համակարգչի / Mac- ի համար:

Ինչպես տեղադրել Favicon կայքում:

Favicon-ը ստանալուց հետո այն սերվերի վրա տեղադրելը կտևի ոչ ավելի, քան մի քանի րոպե և կավարտվի երկու փուլով: Դա անելու համար ձեզ հարկավոր է մուտք գործել ձեր կայքի արմատական ​​գրացուցակ և տեքստային խմբագրիչ՝ կայքի HTML կոդը փոխելու համար:

Քայլ 1.Դուք պետք է բեռնեք favicon.ico ֆայլը սերվերում: Դա անելու համար անհրաժեշտ է ներբեռնել և տեղադրել ftp հաճախորդ, ինչպիսին է FileZilla-ն: Այնուհետև մուտքագրեք ձեր օգտվողի անունը և գաղտնաբառը և ներբեռնեք ֆայլը: Դուք կարող եք կարդալ ավելի մանրամասն հրահանգներ, թե ինչպես վերբեռնել favicon ֆայլը:

Քայլ 2.Այժմ դուք պետք է խմբագրեք ձեր կայքի HTML էջը, որպեսզի օգնեք բրաուզերներին գտնել ձեր ֆավիկոնի պատկերը: Բաց FTP պատուհանով գտեք և ներբեռնեք index.html կամ header.php ֆայլը սերվերից:

Բացեք index.html ֆայլը տեքստային խմբագրիչում՝ Notepad, Notepad++, Sublime Text:

Եթե ​​ձեր կայքը պարունակում է մաքուր HTML, ապա տեղադրեք հատուկ կոդը index.html ֆայլի HEAD տարածքում:

Կոդը կարելի է պատճենել Logaster կայքի ֆավիկոնի էջում:

Եթե ​​օգտագործում եք WordPress-ը, տեղադրեք ստորև նշված կոդը ձեր header.php ֆայլի HEAD տարածքում:

Դա անելուց հետո ներբեռնեք ֆայլը այնտեղ, որտեղ այն ստացել եք: Պատրաստ. Վերբեռնեք ձեր կայքի էջը, Favicon- ը տեսնելու համար:

Ժամանակակից բրաուզերներից շատերը բավականաչափ խելացի են՝ գտնելու favicon ֆայլը նույնիսկ առանց այդպիսի կոդերի, բայց միայն այն դեպքում, եթե favicon-ն ունի 16x16 պիքսել պատկեր, անունը favicon.ico, և պահպանված է ձեր կայքի արմատային գրացուցակում:

Հուսով ենք, որ այս հոդվածը ձեզ տվել է որոշ օգտակար տեղեկություններ, որոնք կօգնեն ձեզ ստեղծել ֆավիկոն, որը կդարձնի ձեր կայքը ավելի հաջողակ և գրավիչ:

Բարև, ընկերներ: Ես վերջերս տեղադրեցի ֆավիկոն իմ բլոգներից մեկում և մտածեցի, որ դեռևս չունեմ հոդված այս թեմայով: Ուրեմն ինչու չգրել: Հասկանում եմ, որ թեման խաբված է, և շատերը վաղուց գիտեն այս ամենը։ Շատերը, բայց ոչ բոլորը, ըստ wordstat.yandex.ru-ի վիճակագրության (տես ստորև ներկայացված սքրինշոթը): Մենք բոլորս առաջին անգամ ենք պատրաստել ֆավիկոն և փնտրում էինք նմանատիպ տեղեկատվություն: Այսպիսով, թող սկսնակ վեբ վարպետները գտնեն այն իմ բլոգում: Ավելին, ես այն ստեղծել եմ հենց այս նպատակով։ Եվ այս խնդրանքի համար որոնողական համակարգերից լրացուցիչ տրաֆիկ ինձ չի տուժի: Այսպիսով, եկեք գնանք:

Ինչ է favicon.ico-ն

Նախ, եկեք սահմանենք, թե ինչ է ֆավիկոնը և ինչու է այն մեզ անհրաժեշտ: Ահա թե ինչ է պատասխանում Վիքիպեդիան () այս հարցերին։

Ինձ համար ավելի հեշտ է ցույց տալ, քան բառերով բացատրել: Ստորև ներկայացված սքրինշոթում ես ցույց տվեցի, թե ինչպես են ֆավիկոնները ցուցադրվում Google Chrome-ում: Նման իրավիճակ է նաև այլ բրաուզերներում:

Վերջիվերջո, favicon կայքի համար 16x16 պիքսել չափի ICO ձևաչափով հատուկ պատկերակ կամ նկար է: Սովորաբար այս ֆայլը կոչվում է favicon.icoև գտնվում է կայքի արմատային թղթապանակում: Հնարավոր են նաև այլ չափսեր (24×24, 32×32, 48×48 և այլն) և ձևաչափեր (JPEG, BMP, PNG և GIF): Համապատասխանաբար, PNG ձևաչափը թույլ է տալիս պատկերակ պատրաստել թափանցիկ ֆոնի վրա, GIF՝ անիմացիոն:

Ինչու՞ է ձեզ անհրաժեշտ ֆավիկոն:

Favicon ico ֆայլը շատ կարևոր է կայքի համար: Եվ ոչ միայն այն պատճառով, որ նման նկարը հեշտացնում է ցանկալի վեբ ռեսուրսը գտնելը բրաուզերի մեծ թվով էջանիշների մեջ: Հիմնական առանձնահատկությունն ու օգուտը տարբեր է.

Փաստն այն է, որ Yandex-ը ցուցադրում է ֆավիկոններ որոնման արդյունքներում յուրաքանչյուր կայքի համար, որտեղ այն տեղադրված է: Եզակի և գեղեցիկ ֆավիկոնը ուշադրություն է գրավում և թույլ է տալիս ձեր ռեսուրսին աչքի ընկնել մրցակիցների մեջ՝ դրանով իսկ ստիպելով մարդկանց սեղմել դրա վրա և հավաքել որոնման տրաֆիկը: Բացի այդ, հիշարժան ֆավիկոնը նպաստում է կայքի ճանաչմանը ինտերնետում որպես ապրանքանիշ: Համաձայնեք, որ նախ ուզում եք սեղմել նկարով հղման վրա։

Արժե ասել, որ Yandex-ը խորհուրդ չի տալիս պատկերը պարունակել կիսաթափանցիկություն, իսկ անիմացիան աջակցվում է միայն FireFox բրաուզերում: Դուք նաև պետք է հասկանաք, որ պատկերի չափի մեծացմանը զուգահեռ մեծանում է ֆայլի քաշը և հոսթինգի բեռը: Ուստի ցանկացած կայքի համար (WordPress, Joomla, DLE և այլն) ավելի լավ է օգտագործել ֆավիկոն՝ .ico ձևաչափով՝ 16 x 16 պիքսել չափերով։

Կայքում նման պատկերակ տեղադրելու համար նախ պետք է այն ունենալ: Այստեղ կան մի քանի տարբերակներ.

  1. ներբեռնեք պատրաստի ֆավիկոններ;
  2. ինքներդ պատրաստեք favicon.ico՝ օգտագործելով Photoshop կամ հատուկ առցանց գեներատորներ:

Առաջին մեթոդը շատ ավելի պարզ է, բայց նվազեցնում է եզակիության հավանականությունը։ Այնուամենայնիվ, դիտարկենք.

Որտեղ ներբեռնել favicon.ico-ն: Ֆավիկոնների պատրաստի հավաքածուներ կայքի համար

Կայքի համար ֆավիկոն ներբեռնելու համար պարզապես մուտքագրեք նույն կամ նմանատիպ հարցումը որոնման համակարգում: Հավատացեք, արդյունքի պակաս չեք ունենա։ Ստորև ես կտամ մի քանի ռեսուրսների հասցեներ, որտեղ դուք կարող եք ներբեռնել պատրաստի պատկերներ favicon-ի համար։ Նրանցից ոմանք թույլ են տալիս ստեղծել ձեր սեփական պատկերակները՝ օգտագործելով գեներատորներ:

Սրբապատկերների պատկերասրահներ (favicon.ico) կայքի համար.

  • www.iconj.com/gallery.php – նկարների մեծ հավաքածու և առցանց գեներատոր;
  • www.audit4web.ru/info/favicon/– այստեղ կա ավելի քան 15000 կտոր;
  • www.favicon.cc/?action=icon_list&order_by_rating=1- անիմացիոն և ստատիկ պատկերակների գեներատոր և պատկերասրահ;
  • www.favicon.co.uk/gallery.php – ֆավիկոնների գեներատոր և կայքի համար ֆավիկոնների կատալոգ;
  • thefavicongallery.com – մեկ այլ պատկերասրահ:

Բայց, հավանաբար, ձեր կայքի համար տարբեր պատկերակներ և լոգոներ ներբեռնելու լավագույն վայրը findicons.com-ն է:

Այս ծառայության կարճ ակնարկ.

Պատկերները ներկայացված են տարբեր ձևաչափերով և չափերով: findicons.com կայքում favicon.ico-ն գտնելու և ներբեռնելու համար անհրաժեշտ է ընտրել նկար և սեղմել «Մանրամասներ» կոճակը: Բացվող պատուհանում սեղմեք չափերի քանակով տողի վրա։

Հուսով եմ՝ կհասկանաք:

Մեկ այլ հիանալի ծառայություն՝ պատկերակներով որոնմամբ www.iconsearch.ru:

Այստեղ ամեն ինչ պարզ է. Մենք որոնման տողում մուտքագրում ենք այն թեման, որով մենք կփնտրենք նկարը կամ կօգտագործենք պիտակների ամպը: Հնարավոր է ընտրել ֆոնի չափը և գույնը (սպիտակ, թափանցիկ, սև):

Ընտրված ֆավիկոնը ներբեռնելու համար սեղմեք PNG կամ ICO ձևաչափի պատկերակը: Սեղմելով «Լրացուցիչ մանրամասներ»՝ դուք կարող եք տեսնել այս պատկերակը այլ չափերի և այս հավաքածուի ավելի շատ պատկերակներ:

Ես կավարտեմ այստեղ, հակառակ դեպքում պարզվեց, որ այն բազմագիրք է այն փաստի մասին ինչպես ներբեռնել favicon ico-ն կայքի համար. Բայց ես պատրաստվում էի նաև ձեզ այդ մասին պատմել WordPress բլոգում: Հիմա հաջորդ անգամ, մի կարոտեք այն: Ցտեսություն

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

Ինչ ձևաչափով պետք է պահպանեմ ֆավիկոնը:

Ամեն ինչ կախված է բրաուզերից: Համար Microsoft Explorerհարմար պատկերակի ձևաչափ ICO. Մենք արդեն հանդիպել ենք այս ձևաչափին, երբ մենք պատրաստեցինք կուրսորը: Այլ բրաուզերների համար սկսած Google Chromeնախքան Apple Safariկանոնավոր կանի GIFկամ PNG. Faviconկարող է կիսաթափանցիկ լինել: Դա անելու համար հարկավոր է պահպանել այն կիսաթափանցիկ PNG, և այնուհետև փոխարկեք ձևաչափի ICO. Սա կարելի է անել լավ ծրագրով IcoFX.Այնուամենայնիվ, կան բազմաթիվ երրորդ կողմի կայքեր ֆավիկոններ ստեղծելու համար, և դրանցից ամենաակնհայտը www.favicon.ru-ն է:

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

Ինչպես վստահ լինել դրանում faviconկաշխատի Պետք է կատարվի 4 պայման.

  • Ֆայլը պետք է կոչվի - favicon.
  • Favicon չափը 16 վրա 16px
  • Favicon-ի օպտիմալ տեղը կայքի արմատային թղթապանակն է:
  • Գրեք պատկերակի հասցեն Meta Tags հեդերկայքի ինդեքսում։

HTML արտահայտությամբ այն կարծես այսպիսին է.

Դուք կարող եք ստեղծել մի քանի պատկերակ տարբեր բրաուզերների համար, օրինակ՝ մեկը ձևաչափով ICO, իսկ մյուսը ներս PNGեւ նշեք այս ամենը պիտակի միջոցով հղում . Ժամանակակից բրաուզերները ամենից հաճախ որոնում են ֆայլ կայքի արմատում, որը կոչվում է favicon, սակայն, վստահ լինելու համար, չի խանգարում նշել ճշգրիտ հղումները:

Ֆոտոշոփում ստեղծել ֆավիկոն

Ստեղծել faviconՇատ պարզ. Do անկանում եք այսպիսի մեկը դարձնել: faviconԻնչպես vkontakte կամ odnoklassniki: Լավ faviconհնարավոր չէ անել մեծ պատկերները նվազեցնելով բոլոր տեսակի favicon «գեներատորներում», որոնք լի են ինտերնետում: Favicon- ը շատ փոքր է: Իրականում մենք մի տեսակ ենք պիքսելային արվեստ, որն ունի իր բնութագրերը: Դուք չեք կարող նամակ գրել եւ պարզապես նվազեցնել այն 16px .

Հավանել faviconկլինի մշուշոտ և անորոշ, քանի որ չափափոխելիս տառի եզրերը կհամընկնեն մի քանի պիքսելով: Մի տեսակ կստացվի հակածածկույթ, որը սովորաբար լավ է, բայց պիքսելային արվեստի դեպքում նման անցումներ պարզապես անհրաժեշտ չեն։ Մյուս կողմից, դուք պետք է խուսափեք կլորության վրա ավելորդ «փշրվելուց», հակառակ դեպքում դուք կստանաք «Hello 1999» գիֆեր:

Ստեղծեք չափի ֆայլ 16 X 16px . Մենք կստեղծենք շատ պարզ կիսաթափանցիկ favicon s տառի տեսքով, մի քիչ խորությամբ: Խորությունը կստեղծվի ստվերի և գրադիենտի միջոցով:

Ֆոնի նկարում

Ինչու այս դասի ներածությունում տեսնում եք հսկայական հարթ և լիզված favicon? Որովհետև ես այն մեծացրել եմ դասի ներածության համար: Ինչպե՞ս կարողացա որակապես մեծացնել պատկերը։ 16px? Շատ պարզ, ես միշտ աշխատում եմ վեկտորով, եթե դա հնարավոր է օգտագործել և եթե իմաստ ունի։ Իսկ վեկտորը հեշտությամբ դիմանում է ցանկացած փոխակերպման ու որակը չի կորցնում։

Ընտրեք գործիք Կլորացված ուղղանկյուն գործիք. Կարգավորումների վահանակում ընտրեք ռեժիմ, որը թույլ կտա նկարել վեկտորի մեջ: Վահանակի բացվող ընտրացանկում կա ստուգման նշան. Snap To Pixels. Սա անհրաժեշտ է, որպեսզի վեկտորային ուղիները կտրվեն պիքսելների վրա և չգծվեն դրանց միջև:

Մենք ունենք մակերես favicon, իսկ կիսաթափանցիկ եզրերը հարթ կլորություն կստեղծեն։ Հիմա ժամանակն է ազատվել սպիտակ ֆոնից, դա պետք չէ։ Անջատեք դրա տեսանելիությունը: Կամ կրկնակի սեղմեք շերտի վրա՝ այն վերածելով սովորական շերտի, ապա ջնջեք այն։

Հոդված, որտեղ մենք կանդրադառնանք, թե ինչպես կարելի է ճիշտ ֆավիկոն պատրաստել կայքի համար:

Favicon-ը պատկերակ է, որը կապված է որոշակի կայքի կամ վեբ էջի հետ: Կայքում ֆավիկոն ունենալը սովորաբար այն ավելի ճանաչելի է դարձնում: Դա պայմանավորված է նրանով, որ այս կայքը (նրա էջերից յուրաքանչյուրը) կունենա պատկերակ, որը նայելով օգտատերը կիմանա, թե ինչ ռեսուրսի մասին է խոսքը։ Կայքի ֆավիկոնի պատկերակը կարելի է տեսնել զննարկչի տարբեր տարրերում, ինչպիսիք են ներդիրը, հասցեի տողը, զննարկման պատմությունը (մատյան), էջանիշների բարը և այլն: Բացի այդ, ֆավիկոնի պատկերակը կարելի է գտնել նաև Yandex որոնման արդյունքներում՝ կայքի անվան կողքին: . Favicon պատկերակը օգտագործվում է նաև iOS (Safari), Android (Chrome), Windows 8 և 10 օպերացիոն համակարգերի հիմնական էկրանին հղումը (կայքի էջին) տեղադրելու ժամանակ։

Ինչպես ավելացնել ֆավիկոնը կայքում

Կայքում favicon-ի տեղադրման գործընթացը, որպես կանոն, սկսվում է դրա ստեղծմամբ։ Հաշվի առնելով այն հանգամանքը, որ տարբեր սարքերում ֆավիկոնի պատկերակի լուծման և ձևաչափի պահանջները տարբեր են, ավելի լավ է նախ այն պատրաստել վեկտորային svg (սանդղելի վեկտորային գրաֆիկա) ձևաչափով: Այս գործողությունը թույլ կտա, օգտագործելով մեկ պատկեր (svg), ստանալ ֆավիկոնի պատկերակ գերազանց որակով և՛ 16x16 պիքսել, և՛ 512x512 լուծաչափով:

Որպես svg գրաֆիկայի հետ աշխատելու գործիք, կարող եք օգտագործել պրոֆեսիոնալ անվճար վեկտորային խմբագրիչ, ինչպիսին Inkscape-ն է:

Պատրաստում է Favicon- ի համար

Եկեք նայենք ֆավիկոնի համար svg ձևաչափով պատկեր պատրաստելու հիմնական քայլերին:

Պատկերը, որը կօգտագործվի որպես կայքի ֆավիկոն, կարելի է նկարել կամ ստանալ Google-ում կամ Yandex-ում պատկերների որոնման միջոցով: Ցանկալի է որոնել պատկեր (պատկերակ) svg ձևաչափով: Բայց եթե չեք կարող գտնել համապատասխան պատկերակ svg ձևաչափով, ապա կարող եք ընտրել մեկ այլ ձևաչափ (օրինակ՝ png կամ jpg): Եվ հետո Inkscape ծրագրում, օգտագործելով հատուկ գործիք, այն վերածեք վեկտորային գրաֆիկայի (վեկտորացնել ռաստերը):

Օրինակ, եկեք տեսնենք, թե ինչպես կարող եք Inkscape-ի միջոցով պատրաստել պատկեր (դռան պատկերակ) svg ձևաչափով favicon-ի համար:


Պատրաստված պատկերների օրինակներ (կարմիր սլաք, լույսի լամպ, թիթեռ, ժամացույց, սիրտ և գիրք) ֆավիկոնի համար (ներբեռնելու համար - ընտրեք «Պահպանել պատկերը որպես...» պատկերի համատեքստում):

Բոլոր հարթակների համար ֆավիկոնի ստեղծում

Մենք կարող ենք ստեղծել ֆավիկոնի պատկերակներ բոլոր հարթակների համար (iOS, Android, PC, MAC և այլն) առցանց http://realfavicongenerator.net/ հասցեով:


Դա անելու համար սեղմեք «Ընտրեք ձեր Favicon նկարը» կոճակը և երկխոսության վանդակում ընտրեք պատրաստված պատկերը (door.svg):

Դրանից հետո դուք պետք է կարգավորեք ֆոնի գույները և մուտքագրեք հավելվածի անունը Android օպերացիոն համակարգի համար (Chrome):






Դրանից հետո ընտրեք «Ես կտեղադրեմ…» տարբերակը, որը ցույց է տալիս, որ ստացված ֆավիկոնի ֆայլերը պետք է տեղադրվեն կայքի արմատում: Այս գործողությունը կապահովի, որ այն կաջակցվի բրաուզերների մեծ մասում:

Այս գործողությունից հետո realfavicongenerator.net ծառայությունը կստեղծի ֆավիկոնի պատկերակ և HTML կոդ: Այս գործողության արդյունքը կցուցադրվի էկրանին:


Favicon-ի տեղադրում կայքում

Նախապատրաստական ​​գործողություններն ավարտելուց հետո մենք կսկսենք ֆավիկոնը միացնել կայքին: Կայքում պատկերակ ավելացնելու բոլոր հիմնական քայլերը տրված են «Տեղադրեք ձեր ֆավիկոնը» էջում։

Հիմնական քայլերը.


Օրինակ, CMF MODX-ում ֆավիկոնը (HTML կոդը) էջերին միացնելը սովորաբար կատարվում է մի կտորով, որն օգտագործվում է փաստաթղթի գլխի հատվածը ձևավորելու համար:

Կայքի ֆավիկոնի ստուգում

Կայքի ֆավիկոնը ստուգվում է 4-րդ պարբերությունում նշված հղումով (ստուգեք ձեր ֆավիկոնը): Այս գործողությունը կարող է իրականացվել նաև Favicon -> Favicon checker հիմնական ընտրացանկի միջոցով:

Կայքի ֆավիկոնի վավերացումը սկսելու համար տրամադրված ձևից ընտրեք կայքի արձանագրությունը (http:// կամ https://), մուտքագրեք տիրույթի անունը և սեղմեք «Ստուգեք ֆավիկոնը» կոճակը:


Դրանից հետո մենք համոզվում ենք, որ կայքի favicon-ը փորձարկվել է realfavicongenerator.net ծառայության կողմից և ճիշտ ցուցադրված է բոլոր հարթակներում:

Կայքի Favicon ինդեքսավորում ըստ որոնիչների

Պատկերակի ինդեքսավորման գործընթացը տարբեր որոնման համակարգերի համար տարբեր ժամանակներ է պահանջում: Օրինակ, Yandex-ում այս գործընթացը կարող է տեւել մի քանի ամիս:

Օգտագործելով հետևյալ URL-ները՝ կարող եք ստուգել, ​​թե ինչպես են որոնման ռոբոտները տեսնում ֆավիկոնի պատկերակը կայքում.

  • Yandex - https://favicon.yandex.net/favicon/domain_name
  • Google - https://www.google.com/s2/favicons?domain=domain_name

Domain_name-ի փոխարեն պետք է նշեք դոմենի անունը (օրինակ՝ կայք):

Նշում. անիմացիոն պատկերների (գիֆերի) օգտագործումը որպես ֆավիկոններ աջակցվում է միայն որոշ բրաուզերների կողմից (Firefox): Այլ բրաուզերներ որպես ֆավիկոն կօգտագործեն ստատիկ պատկեր: