Favikon yaratish uchun dastur. Favikonlarni yaratishning universal usuli. Logasterda ikonka yaratish jarayoni qanday ishlaydi?

Bugun biz yana blog uchun rasmlar haqida, ya'ni favikon deb nomlangan loyiha belgisi haqida gaplashamiz. Keling, favikon nima ekanligini, uni qanday qilish va uni saytimizga ulashni muhokama qilaylik. Va shuningdek, bu rasm qanday o'lchamda bo'lishi kerak va nima uchun har biringiz uni o'rnatishingiz kerak. Axir, hatto bu belgi sizning blogingizga tashrif buyurishga ta'sir qilishi mumkin.

Favikon nima?

Favikon tushunchasi juda oddiy va lotin tilidagi ikkita so'zdan iborat (aslida Internetdagi hamma narsa kabi) - sevimlilar belgisi. Bu o'z navbatida belgi yoki nishon sifatida tarjima qilinishi mumkin. Ma'nosi shunday bo'lishi mumkin; sevimli belgisi yoki sevimli. Nega bu nom? Bu oddiy, sevimlilar - bu brauzerdagi xatcho'plarning nomi, shuning uchun nom xatcho'p yoki brauzer yorlig'i uchun rasm sifatida talqin qilinishi mumkin. Axir, siz saytni ochganingizda yoki uni xatcho'plaringizga qo'shganingizda, biz nafaqat uning nomini, balki favikon deb ataladigan rasmini ham ko'ramiz. Umid qilamanki, bu qanday hayvon ekanligini tushuntira oldim?

Nima uchun sizga favikon kerak bo'lishi mumkin?

Xo'sh, bu erda hamma narsa bug'langan sholg'om kabi oddiy; Internet loyihasini individuallashtirish uchun favikon kerak. Ya'ni, blogingizning yana bir o'ziga xos xususiyati ushbu rasm bo'ladi, bu nafaqat saytingizdan brauzerda foydalanishni qulayroq qiladi, balki to'g'ri yondashuv bilan loyihangizga tashrif buyuruvchilar sonini oshiradi.

Birinchidan, u brauzerda qulay bo'lishi mumkin, nega? Misol uchun, menda bir nechta yorliqlar ochilganda, men hozirda kerakli sayt belgisi orqali harakat qila olaman. Ya'ni, men kabi odamlar uchun qulay.

Ikkinchidan, ushbu rasm Yandex qidiruv tizimidan sizning manbangizga ko'proq tashrif buyuruvchilarni jalb qilishi mumkin, agar u diqqatga sazovor bo'lsa va boshqalar orasida ajralib tursa, lekin fanatizmsiz. Yandex qidiruv natijalarining dastlabki to'qqiz sahifasiga favikon qo'ygani uchun sizning blogingiz boshqalardan farq qiladi. Aynan shu sabab tufayli Favikonni loyihangizga ulash haqida o'ylashga arziydi. Birinchi qidiruv sahifalari shunday ko'rinadi.

Favikon yarating qiyin bo'lmaydi, chunki tarmoqda oddiy tasvirlardan favikon yasaydigan va uni noldan o'zingiz chizishingiz mumkin bo'lgan juda ko'p sonli generatorlar mavjud. Bundan tashqari, siz Photoshop yordamida rasm yaratishingiz va keyin uni kerakli formatga aylantirish uchun generatorlardan foydalanishingiz mumkin.

Oddiy tasvirlar va piktogrammalar o'rtasidagi farqlar kichik, ammo ular mavjud. Rasm oddiy bo'lishi kerak (murakkab grafik elementlarni ko'rish qiyin bo'ladi), o'lchami 16x16 piksel va ico formatida bo'lishi kerak. Siz, albatta, png yoki gif formatlaridan foydalanishingiz mumkin, ammo bunday tasvirlar barcha brauzerlarda ko'rsatilmaydi, shuning uchun eng yaxshi variant ico formatidan foydalanishdir.

Men sizga bu belgini qanday qilish kerakligini har bir qadamda aytib berishdan ma'no ko'rmayapman, chunki hamma buni qila oladi. Asosiysi, tasvirlarga qo'yiladigan talablarni hisobga olish va hamma narsa yaxshi bo'ladi. Qisqasi, onlayn generatorlar yordamida rasmni yuklab oling yoki chizing va favikon yarating. Onlayn generatorlarni Google yoki Yandex qidiruvi - favicon-ga kiritish orqali topish mumkin. Yoki bu erda siz noldan chizishingiz yoki tayyor rasmdan favikon yaratishingiz mumkin bo'lgan xizmatga havola: http://favicon.ru/

Veb-sayt uchun favikonni qanday ulash mumkin?

Yaxshi, belgi tayyor, endi brauzerlarni qanday ishga tushirishim mumkin sayt uchun favikonni ko'rsatish?

Xizmatdan foydalangandan so'ng, blogingiz uchun tayyor belgini kompyuteringizga yuklab oling. Va rasmni FTP mijozi yordamida blogning asosiy papkasiga (public_html/site/your_file_in_ico_format) yoki boshqa istalgan boshqa joyga yuklang. Lekin ildiz papkasiga o'tish yaxshidir, faylga yo'lni kompilyatsiya qilishda bu osonroq.

Shunday qilib, fayl yuklandi, keyin nima bo'ladi? Endi siz faylning ildiz papkasiga yuklanganligiga shubhangiz borligini tekshirishingiz mumkin: your_site/favicon.ico. Agar fayl ildiz papkasiga yuklab olingan bo'lsa, keyin u ushbu manzilda ko'rsatiladi. Keyin teglar orasidagi manbaning har bir sahifasi uchun yozishingiz kerak Va quyidagi kod:

Va agar belgi boshqa papkada bo'lsa, u shunday bo'lishi kerak:

Ushbu kod ko'plab Internet-resurslar uchun umumiy qabul qilingan deb hisoblanadi va har qanday dvigatelda ishlaydi. Lekin siz uni turli dvigatellar uchun boshqacha yozishingiz mumkin. Masalan, WordPress uchun ushbu kod quyidagicha ko'rinadi:

/favicon.ico" />

Faqatgina ushbu parametrda belgi shablonli papkada bo'lishi kerak. Masalan (public_html/site/wp-content/themes/your-theme/favicon.ico).

Ushbu qadamlardan keyin sayt uchun favikon ishlay boshlaydi va uni brauzer yorliqlarida ko'rishingiz mumkin. Ammo Yandex qidiruv natijalarida fayl darhol ko'rsatilmaydi, siz avval Yandex roboti belgini indekslaguncha kutishingiz kerak va shundan keyingina u qidiruv natijalarida paydo bo'la boshlaydi va keyin faqat sizning blogingiz yoqilgan bo'lsa. qidiruv natijalarining dastlabki to'qqiz sahifasidan biri.

Ana xolos. Agar biror narsa aniq bo'lmasa, so'rang va biz buni aniqlaymiz. Yana ko'rishguncha!

Salom, aziz blog o'quvchilari. Bugungi maqolamizdagi suhbat Favicon.ico piktogrammalari haqida bo'ladi. Biz favikon nima ekanligini, nima uchun uni veb-saytingizga o'rnatishingiz kerakligini va kerakli o'lchamdagi belgini o'zingiz qanday yaratishni aniqlaymiz.

Aslida, favikon yaratish uchun hech qanday maxsus onlayn generatorlardan foydalanish shart emas, garchi bu juda qulay va sodda. Siz buni Photoshop-da qilishga urinib ko'rishingiz mumkin, lekin sukut bo'yicha, afsuski, u rasmlarni ICO formatida saqlay olmaydi. Shuning uchun, Photoshop-ni ICO bilan ishlashga o'rgatish uchun siz maxsus plaginni o'rnatishingiz kerak bo'ladi.

Ammo agar sizga Photoshop (shuningdek, u bilan) mos kelmasa, quyida sanab o'tilgan ko'plab onlayn xizmatlardan birini ishlatish sizga ancha qulayroq bo'ladi. Bundan tashqari, ularning ba'zilarida siz noldan butunlay yangi piktogramma chizishingiz mumkin bo'ladi, boshqalarida esa mavjud rasmni (sizga mos keladigan) favikon formatida qayta ishlashingiz mumkin.

Xo'sh, eng oson variant - Favicon to'plamini ba'zi onlayn galereya yoki katalogdan yuklab olish. Ularni qaerdan olishingiz mumkinligi haqida quyida o'qing.

Favikonni onlayn qanday yaratish va ularning to'plamini qaerdan yuklab olishingiz mumkin

Avval xizmatlarga misollar keltiraman (deb atalmish favikon generatori), bu erda siz hech qanday maxsus mahoratga ega bo'lmasdan veb-saytingiz uchun mutlaqo munosib mini logotipni loyihalashingiz yoki hech bo'lmaganda avtomatik ravishda mos rasmni saytga favikon yuklash uchun zarur bo'lgan formatga aylantirishingiz mumkin.

1. Favison.cc— juda qulay onlayn favikon generatori. Undan foydalanib, siz, masalan, noldan (to'liq eksklyuziv) o'zingizning piktogrammangizni yaratishingiz mumkin, uni piksel bo'ylab chizishingiz mumkin. Buning uchun xizmat oynasining chap tomonidagi "Yangi Favkon yaratish" tugmasini bosishingiz kerak bo'ladi.

   

   Jeneratör sahifasining markazida har bir kvadrat kelajakdagi favikoningizning pikseli bo'lgan maydon mavjud. Sizning vazifangiz bu kvadratlarni turli xil ranglar bilan bo'yashdir. Bitta kvadratni rang bilan bo'yash uchun siz "Rang tanlash" maydonidagi xizmat oynasining o'ng tomonidagi katakchani belgilashingiz kerak, u erda joylashgan palitradan kerakli rangni tanlang va kerakli kvadratni bosing. Noto'g'ri soyani olib tashlash uchun "shaffof" katagiga belgi qo'ying va kvadratni bosing, natijada u rangsiz (shaffof) bo'ladi.

   Jeneratör tuvali bo'ylab pikselni siljitish uchun siz "ko'chirish" katagiga belgi qo'yishingiz kerak. Ishingiz natijasini tuval ostidagi "Ko'rib chiqish" maydonida haqiqiy miqyosda ko'rishingiz mumkin. Agar siz yaratgan Favikon sizga mos bo'lsa, uni kompyuteringizga saqlash uchun "Yuklab olish" tugmasini bosing. Natijada siz grafik faylni olasiz, keyin uni yuklab olishingiz va hosting serveriga yuklashingiz mumkin.

   Endi siz noldan veb-saytingiz uchun qanday qilib mini logotip yasashni bilasiz. Ammo agar sizda grafik qobiliyatingiz bo'lmasa, siz onlayn generator xizmatidan foydalanishingiz mumkin kelajakdagi favikon uchun istalgan rasmni yuklang, bu bo'sh joy sifatida xizmat qiladi. Rasm mutlaqo har qanday o'lcham va formatda bo'lishi mumkin. Belgilangan faylni onlayn xizmatga yuklash uchun xizmat oynasining chap tomonidagi “Rasmni import qilish” tugmasini bosishingiz kerak.

   

   Ochilgan oynada "Browse" tugmasini bosing va kompyuteringizda mos rasmni toping. Keyin rasmingizni 16 dan 16 gacha (kvadrat) o'zgartirganda uning nisbati bilan nima qilish kerakligini tanlang. Agar siz yuklagan rasm kvadrat bo'lmasa, bu to'g'ri. Bunday holda, ikkita variant mumkin: tomonlar nisbatini o'zgarishsiz qoldiring (O'lchamlarni saqlash) yoki tasvirni kvadrat ko'rinishga o'zgartiring (Kvadratga qisqartirish belgisi). Ikkinchi holda, kelajakdagi favikonning tasviri o'qlardan biri bo'ylab buziladi.

   Onlayn generatorga yuklash va rasmingizni aylantirish uchun siz "Yuklash" tugmasini bosishingiz kerak. Undan yaratilgan Favicon.ico xuddi siz chizganingiz kabi tahrirlanadi. Asaringiz ustida ishlashni tugatgandan so'ng, uni kompyuteringizga yuklab olish uchun "Yuklab olish" tugmasini bosing.

   Ushbu onlayn xizmat boshqa foydalanuvchilar tomonidan yaratilgan va ommaga taqdim etilgan favikonlar to'plamidan foydalanish imkoniyatiga ega. Galereyada mavjud boʻlgan eksponatlarni koʻrish uchun siz yaratilish sanasi boʻyicha saralangan kolleksiyalarni koʻrish uchun oynaning chap tomonidagi “Eng soʻnggi Favikonlar” tugmasini yoki koʻrish uchun “Eng yuqori baholangan favikonlar” tugmasini bosishingiz kerak boʻladi. reyting bo'yicha saralangan galereyalar.

2. Favicon.ru- bir vaqtlar bu xizmat yuqorida tavsiflangan onlayn generatorga qaraganda ancha sodda edi, ammo yaqinda u deyarli uning analogiga aylandi, lekin faqat rus tilida. Favicon.ru nafaqat sizda mavjud bo'lgan har qanday tasvirni (kompyuteringizda yoki Internetda) 16 dan 16 pikselgacha bo'lgan ICO formatiga aylantirish imkonini beradi, balki uni noldan, piksel pikselgacha chizish imkonini beradi.

   

   Onlayn favikon generatorining ushbu versiyasi diqqatga sazovordir, ehtimol u mahalliy bo'lgani uchun. Shuning uchun u ushbu maqolada tugadi. Shunday qilib, u bilan ishlash uchun siz asosiy sahifaning yuqori qismidagi "Faylni tanlash" tugmasini bosishingiz va kompyuteringizda kerakli tasvirga yo'lni belgilashingiz kerak. Yuklab olingan va Favicon.ico formatiga o'zgartirilgan rasmni to'g'irlash va keyin kompyuteringizga saqlash mumkin. Hammasi oddiy va qulay.

3. Logaster.ru onlayn logotip generatoridir, lekin logotiplardan tashqari u favikonni ham yaratadi. Boshqa barcha xizmatlardan farqli o'laroq, siz favikon dizaynini chizishingiz yoki uni logotipdan o'zgartirishingiz shart emas.

   

   Favikon yaratish uchun avval sayt yoki kompaniya nomini kiritishingiz va faoliyat turini tanlashingiz kerak. Xizmat foydalanishga tayyor bir necha o'nlab favikon shablonlarini taklif qiladi. Favikonni qanday yaratish haqida ko'proq o'qishingiz mumkin. Favicon.ico-ni yaratganingizdan so'ng, faylni kompyuteringizga ICO yoki PNG formatida yuklab olishingiz mumkin.

Shundan so'ng, "Yaratish" tugmasini bosish kifoya. Ochilgan sahifada siz olingan favikonni yuklab olish uchun havolani ko'rasiz.

Onlayn generatorlar, kolleksiyalar va favikonlar galereyalari tanlovi

Agar biron sababga ko'ra yuqorida tavsiflangan favikon generatori sizga yoqmagan bo'lsa, men o'z omadingizni quyidagi usullardan birida sinab ko'rishni taklif qilaman. bepul onlayn xizmatlar:

1. FaviconGenerator - kompyuteringizdan yuklab olingan har qanday tasvirni kerakli favikon formatiga aylantirish imkonini beradi (rasmlarni yuklashingiz mumkin).
2. AntiFavicon juda qiziq Favicon generatoridir. Unda siz mumkin yozuvli favikon yarating. Yozuv matnini "Yuqori matn" va "Pastki matn" maydonlariga kiritishingiz va "Ranglar" maydonida ranglar sxemasini sozlashingiz kerak.
3. Pics-dan FavIcon - bu yana bir oddiy onlayn xizmat - siz kompyuteringizdagi rasmga yo'lni belgilaysiz, natijada olingan faylni ICO va GIF formatida o'zgartirasiz va yuklab olasiz.
4. Iconj - diqqatga sazovor tomoni shundaki, siz yaratilgan belgini yuklab olishingiz yoki uni xizmatda qoldirishingiz va ushbu faylga havolani olishingiz mumkin.
5. DeGraeve juda kuchli Favicon generatori bo'lib, funksionalligi bo'yicha avval ko'rib chiqilgan Favicon.cc ga o'xshaydi. Bu erda ham siz hamma narsani noldan qilishingiz yoki keyinchalik mos o'lchamdagi ICO formatida sozlanishi va yuklab olinishi mumkin bo'lgan rasmni yuklashingiz mumkin.
6. Generator - yuklangan rasmdan favikon yaratishga va uni maxsus tahrirlovchida noldan yaratishga imkon beradi.
7. Onlayn ikonka muharriri favicon.ico - bu hammasini qiladi - noldan favikonlar yaratish va mavjud tasvirni o'zgartirish.
8. Onlayn Favicon - bu mini logotiplarni yaratish va tahrirlash uchun juda funktsional vosita
9. Bepul Favicon Generator - agar yuqoridagi ro'yxatdagi hech narsa sizga mos kelmasa.
10. Favikon generatori - oddiy va mazali...

Agar siz sayt uchun mini-logotipingizning eksklyuzivligi haqida qayg'urmasangiz va muharrirlar va generatorlar bilan shug'ullana olmasangiz, ular o'nlab tiyin bo'lgan saytlarda o'zingiz uchun mos belgini tanlashingiz mumkin. Axir, aslida siz Internetdan yuklab olishingiz yoki kompyuteringizning chuqurligidan topishingiz mumkin bo'lgan 16 dan 16 pikselgacha bo'lgan har qanday belgi bizga mos keladi.

Ammo favikon birinchi navbatda foydalanuvchilarning e'tiborini jalb qilishi kerakligini yodda tutishingiz kerak. Ideal holda, foydalanuvchi sizning saytingizni Favicon-ga qarab taniy oladi, shuning uchun u noyob bo'lsa yaxshi bo'ladi, lekin siz Internetda noaniq narsalarni qidirishingiz mumkin.

Agar sizda xohish yoki imkoniyat bo'lmasa (siz rassom emassiz va hech qachon bo'lmagan bo'lsangiz), unda eng oson yo'li - bu erda qidirishga harakat qilishdir. bepul favikonlar to'plamiga ega galereyalar:

1. Iconj - bu boshqa odamlar tomonidan ishlab chiqilgan va ommaga taqdim etilgan juda katta piktogramma to'plami
2. Favicon.cc - barcha holatlar uchun 55 ming xil variantlar. Bundan tashqari, jonlantirilgan favikonlar ham mavjud, ular faqat FireFox brauzerida ko'rinadi.
3. Favicon galereyasi - o'lchamga mos keladigan yana bir nechta piktogramma

Agar siz boshqa shunga o'xshash manbalarni bilsangiz, men sizning havolalaringizni ushbu ro'yxatga qo'shaman.

Favikonni veb-saytga qanday o'rnatish va unga yo'lni belgilash

Sizning brauzeringiz va Yandex qidiruv robotingiz bo'ladi favikonni birinchi navbatda saytingizning ildiz papkasidan qidiring. Shuning uchun siz shunchaki FTP orqali saytga ulanishingiz va Favicon.ico faylingizni uning asosiy katalogiga (odatda public_htm yoki htdocs papkalari) yuklashingiz mumkin (uning nomini kichik harflar bilan yozgan ma'qul). Endi biron bir brauzerda manbangizni oching va yorliqdagi belgi o'zgarganligini tekshiring. O'zgarganmi? Yo'qmi? Mayli, hammasi joyida.

Agar siz favikonni shu tarzda joylashtira olmagan bo'lsangiz, kerak bo'lishi mumkin, chunki... Ko'pincha eski versiya keshdan yuklangan bo'ladi. Siz sinab ko'rishingiz mumkin, men uchun u keshni tozalamasdan qilingan o'zgarishlarga eng yaxshi javob beradi. Muammo brauzer keshida bo'lmasa, bu shuni anglatadi saytingiz favikon uchun boshqa joylashuvga ega, ildiz papkasidan farq qiladi. Buni qanday tekshirishim mumkin?

Saytingizdagi istalgan sahifaning manba kodini oching. Uning manba kodini ko'rish uchun sahifani sichqonchaning o'ng tugmasi bilan bosing va tegishli kontekst menyusi bandini tanlang (masalan, eski Opera-da "Manba kodi" yoki Mazila Firefox-da "Sahifaning manba kodi" yoki "Sahifa kodini ko'rish") Google Chrome , yoki IE-da "HTML kodini ko'rish") yoki Ctrl+U tugmalar birikmasini bosing. Endi favicon.ico ga yo'lni ko'rsatadigan qator uchun sahifa kodining yuqori qismiga qarang.

Bu shunday ko'rinishi mumkin:

Endi, ushbu yo'lni bilib, siz FTP orqali qayta ulanishingiz va saytda mavjud bo'lgan yo'lni almashtirib, belgilangan yo'ldan foydalanib favikoningizni yuklashingiz mumkin. Brauzerning manzil satrida yana hech qanday o'zgarishlar yuz bermagan bo'lsa, brauzer keshini yana tozalashga urinib ko'ring.

IN Joomla Favicon odatda siz foydalanayotgan shablonli papkada yashaydi (Joomla 1.5 da unga yo'l xuddi shu andoza katalogidagi index.php faylida yozilgan, lekin Joomla 3 da hamma narsa biroz murakkablashdi). Bular. Joomla'da favikonni o'zgartirish uchun faqat shu yo'lni bosib o'ting va u erga favicon.ico faylingizni yuklang va almashtirish haqidagi savolga ijobiy javob bering:

/templates/folder_with_the_design_template/favicon.ico

Favicon fayli WordPress sukut bo'yicha, u siz foydalanayotgan mavzudagi papkada ham bo'lishi mumkin (uning yo'li ham u erda o'rnatiladi):

/wp-content/themes/Folder_with_theme_you_are_using/favicon.ico

Umuman olganda, agar xohlasangiz favikoningizga yo'lni o'rnating yoki o'zgartiring, bu ikkala brauzer va Yandex qidiruv roboti tomonidan tushunarli bo'lsa, siz uni Joomla, WordPress yoki boshqa dvigatel uchun mos shablon fayliga ochish va yopish teglari orasiga yozishingiz kerak bo'ladi. BOSH, quyidagi kod qatorlari:

Ushbu qatorlarni qaysi shablon faylida yozishingiz kerakligi saytingiz dvigateliga bog'liq. Masalan, in WordPress-da tahrirlash uchun header.php faylini ochishingiz kerak: wp-content/themes/Folder_with_your_theme_design. Muharrirda header.php ni oching va boshida Html HEAD yorlig'ini toping. Undan keyingi istalgan joyda, lekin HEAD yopilishidan oldin, mini logotip grafik faylingizga yo'lni ko'rsatuvchi yuqoridagi kod qatorlaridan birini yozing.

Qanday o'rnatish kerak animatsion favikon? Asosan, oddiy bilan bir xil. Yagona farq sizning veb-saytingiz shabloniga kiritilgan kod bo'ladi, uning yordamida siz brauzerlar va Yandex qidiruv robotiga kerakli grafik faylga yo'lni ko'rsatasiz. Gap shundaki, jonlantirilgan Favicon GIF kengaytmasiga ega bo'ladi va shuning uchun kod satrlarida siz shunday yozishingiz kerak bo'ladi:

Bu jonlantirilgan favikonlar va oddiy favikonlar o'rtasidagi farq. Shuni yodda tutingki, jonlantirilgan belgi faqat FireFox-da ishlaydi, boshqa brauzerlarda esa statik bo'ladi. Yandex animatsion favikonni yuklaganda uni statik PNG formatiga o'zgartiradi. Ammo, mening fikrimcha, bu muammoga arzimaydi - sayt uchun oddiy mini logotip o'rniga animatsiyani o'rnatish unchalik mantiqiy emas. Lekin bu faqat mening IMHO.

Omad sizga! Tez orada blog sayti sahifalarida ko'rishguncha

Sizni qiziqtirishi mumkin

Onlayn FTP mijozi Net2ftp va Google Alerts - veb-ustalar uchun foydali xizmatlar
Pr-cy, Cy-pr, Be1, Xseo va boshqalarning bepul onlayn xizmatlarida veb-saytlarni tahlil qilish
Sayt uchun piktogrammalar, nishonlar, fon, rasmlar va logotiplar (onlayn xizmatlar IconFinder, Freepik, PSDGraphics va boshqalar)
Foydalanish qulayligi - veb-saytingizni tashrif buyuruvchilar uchun qanday qulay qilish va ularni iloji boricha uzoq vaqt davomida maqolalaringizni o'qishga harakat qilish
MegaIndex Tools - veb-ustalar va optimallashtiruvchilar uchun vositalar to'plami
Brauzer rasmlarida veb-sayt tartibining brauzerlararo mosligini qanday tekshirish va yangi materiallar paydo bo'lganda ping yuborishni sozlash
Http - bu nima, sarlavhalarni qanday ko'rish va serverning javob kodini tekshirish, 200, 301, 302, 404 va 500 kodlari nimani anglatadi?
Crossposting - bu nima va uni qanday to'g'ri bajarish kerak

Endi shaxsiy sayt belgisi - Favicon - har qanday veb-resursning o'ziga xos tashrif qog'ozi. Ushbu belgi kerakli portalni nafaqat brauzer yorliqlari ro'yxatida, balki, masalan, Yandex qidiruv natijalarida ham ta'kidlaydi. Favicon, qoida tariqasida, sayt xabardorligini oshirishdan boshqa funktsiyalarni bajarmaydi.

O'z resursingiz uchun piktogramma yaratish juda oddiy: siz mos rasmni topasiz yoki uni grafik muharrir yordamida o'zingiz chizasiz, so'ngra tasvirni kerakli hajmga - odatda 16x16 pikselga siqib chiqarasiz. Olingan natijani favicon.ico fayliga saqlang va uni saytning ildiz papkasiga joylashtiring. Ammo bu protsedura Internetda mavjud bo'lgan Favicon generatorlaridan biri yordamida sezilarli darajada soddalashtirilishi mumkin.

Ko'pgina veb-ikonka muharrirlari Favikonlarni yaratish uchun barcha kerakli vositalarni taklif qiladi. Bunday holda, noldan rasm chizish kerak emas - siz tayyor tasvirdan foydalanishingiz mumkin.

1-usul: Favicon.by

Rus tilidagi onlayn favikon generatori: oddiy va ingl. O'rnatilgan 16x16 kanvas va qalam, silgi, ko'z tomchisi va plomba kabi asboblarning minimal ro'yxatidan foydalangan holda o'zingiz belgi chizish imkonini beradi. Barcha RGB ranglari va shaffoflikni qo'llab-quvvatlaydigan palitrasi mavjud.

Agar xohlasangiz, tayyor tasvirni generatorga yuklashingiz mumkin - kompyuteringizdan yoki uchinchi tomon veb-resursidan. Import qilingan rasm ham tuvalga joylashtiriladi va tahrirlash uchun mavjud bo'ladi.

Natijada siz favicon deb nomlangan grafik ICO faylini va 16x16 piksel o'lchamlarini olasiz. Bu belgi allaqachon veb-saytingiz belgisi sifatida foydalanishga tayyor.

2-usul: X-Icon Editor

64x64 piksel o'lchamdagi batafsil piktogramma yaratish imkonini beruvchi HTML5 brauzer ilovasi. Oldingi xizmatdan farqli o'laroq, X-Icon Editor ko'proq chizish vositalariga ega va ularning har biri moslashuvchan tarzda sozlanishi mumkin.

Favicon.by-da bo'lgani kabi, bu erda siz tayyor rasmni saytga yuklashingiz va uni favikonga aylantirishingiz, kerak bo'lganda uni to'g'ri tahrirlashingiz mumkin.

Agar siz favikonga aylantirmoqchi bo'lgan rasm tafsilotlarini saqlamoqchi bo'lsangiz, X-Icon Editor buning uchun juda yaxshi. 64x64 piksel o'lchamdagi piktogrammalarni yaratish imkoniyati ushbu xizmatning asosiy afzalligi hisoblanadi.

Favikon (inglizcha: Sevimli piktogramma) - veb-sayt, brauzer yorlig'i yoki uning xatcho'plarida ("Sevimlilar") ko'rilayotganda brauzerning manzil satrida ko'rsatiladigan maxsus formatdagi kichik belgi (rasm, rasm).

favicon veb-saytingiz, mini logotipingiz uchun qo'shimcha bezakdir. Shuningdek, u Yandex va Google qidiruvlarida saytlar ro'yxatini ko'rishda ko'rsatiladi va saytingizni boshqalardan ajratib turadi.

Nima uchun veb-sayt uchun favikon kerak?

favicon saytingizning savdo belgisidir. Bugungi kunda ko'pgina kompaniyalar o'zlarining raqobatchilaridan ajralib turadigan o'ziga xos favikonga ega. Belgini foydalanuvchilar tomonidan yaxshiroq eslab qolish uchun kompaniyalar unda o'z logotiplarini ko'rsatishi kerak, bu ham sayt sarlavhasi elementlaridan biri bo'lishi kerak. Favikondan foydalanishning yana bir ijobiy jihati shundaki, brauzerda koʻp sonli saytlarni koʻrayotganda siz butun sahifa sarlavhasini emas, faqat belgini koʻrasiz va siz oʻzingiz xohlagan yorliqni darhol va oson aniqlashingiz mumkin.

Favikonda nimani ko'rsatish yaxshiroq?

• Belgisi sayt mavzusiga mos kelishi kerak.
• brend, agar veb-saytingiz ushbu brend bilan bog'langan bo'lsa. Shu bilan birga, turli xil sahifalar uchun turli brendlar ko'rsatilishi mumkin;
• Siz bosmoqchi bo'lgan favikondan foydalaning, bu Yandex va Google qidiruvlarida ko'rishda bosish tezligini oshiradi;
• Saytingizning turli bo'limlari uchun bir nechta favikon dizaynini yarating.
• Turli tadbirlar uchun bir nechta favikon dizaynini yarating (masalan, Yangi yil, Sevishganlar kuni yoki Kosmonavtika kuni, :).

Olingan faylni asosiy indeks fayli (index.php) joylashgan saytingizning ildiziga joylashtiring. Brauzerga sahifaning bosh qismida sayt favikonining joylashishini ko'rsatish uchun quyidagi qatorni kiriting:

Animatsion favikonni qanday qilish mumkin?

ICO formati animatsiyani qo'llab-quvvatlamaydi. Ammo zamonaviy brauzerlar eskiz uchun GIF formatidan foydalanishga imkon beradi. Zamonaviy brauzerlar uchun bitta animatsion faylni (favicon.gif), Intertet Explorer kabi qadimgi brauzerlar uchun boshqasini (favicon.ico) belgilash mumkin. Buning uchun bosh qismiga quyidagi ikkita qatorni qo'shing:

Tabiiyki, avval ikkala faylni saytning ildiz papkasiga joylashtirishingiz kerak.

Brauzerda tasvirlarni ko'rsatish taqiqlangan bo'lsa nima qilish kerak?

Agar siz sahifa kodiga o'rnatilgan tasvir bilan favikon yaratsangiz:

Keyin tasvirlar o'chirilgan bo'lsa ham, belgi brauzerda ko'rsatiladi. .

Veb-saytdan favikonni qanday olish mumkin

Hamma veb-ustalar favicon.ico-ni saytning ildiziga joylashtirmaydi. Favikon manzilini olish uchun quyidagi skriptdan foydalaning:

]*)link([^>]*)(rel="icon"|rel="qisqa tugma belgisi")([^>]*)>/iU", $html, $out)) ( $link_tag = $out ; agar (preg_match("/href([s]*)=([s]*)"([^"]*)"/iU", $link_tag, $out)) ( $favicon = trim($out) ; if (strpos($favicon, "://")===false) $favicon = $url. "/" . ltrim($favicon, "/"); ) ) ?>

Google, Yandex va favicon qidiruv tizimlari

Qidiruv mexanizmi robotlari veb-sayt piktogrammalarini keshlaydi. Quyidagi so'rovlar uchun keshlangan piktogramma mavjud:

Bundan tashqari, Yandex sizni turli saytlarning piktogrammalaridan "sprite" qilishi mumkin:

IPhone va iPad uchun piktogramma

Rasmga havolani ko'rsatmasangiz ham, iPhone saytning ildiz papkasidan apple-touch-icon.png nomli faylni qidiradi va agar topsa, undan rasmni oladi, dumaloq uni burchaklarga qo'ying va unga avtomatik ravishda ta'kidlash qo'llaniladi. Bunga yo'l qo'ymaslik uchun apple-touch-icon.png o'rniga iPhone va iPad egalari uchun apple-touch-icon-precomposed.png yozishingiz kerak, chunki Ular uchun biz 57x57 o'lchamdagi chiroyli piktogramma qilamiz (Aytgancha, u kattaroq bo'lishi mumkin, ammo bu tushlik ekranidagi piktogrammaning standart o'lchami), uni quyidagicha bog'laymiz:

Favikonni qanday dinamik ravishda o'zgartirish mumkin?

Agar siz teg xususiyati qiymatini DOM orqali o'zgartirishga harakat qilsangiz, kerakli natijaga erisha olmaysiz. Sahifa belgisini dinamik ravishda o'zgartirish uchun avval sahifa sarlavhasidan eski belgi bilan havola yorlig'ini olib tashlashingiz va keyin uni yangi tarkib bilan qo'shishingiz kerak. Bu quyidagicha amalga oshiriladi: // Yangi belgi fayliga havola var icon="new_favicon.ico"; var head = document.getElementsByTagName("head"); // HEAD tegidan eski belgini toping va olib tashlang var links = head.getElementsByTagName("link"); uchun (var i = 0; i< links.length; i++) { var lnk = links[i]; if (lnk.rel=="shortcut icon") { head.removeChild(lnk); } } // Добавить новую иконку var link = document.createElement("link"); link.setAttribute("href",icon); link.setAttribute("type","image/x-icon"); link.setAttribute("rel","shortcut icon"); head.appendChild(link);

HTML5 va favicon

Sizes atributi HTML5 ga qo'shildi, bu sizga bir xil belgining bir nechta turli versiyalarini e'lon qilish imkonini beradi va bu PNG fayllari bo'lishi mumkin:

Windows 8 da planshetlar uchun plitkani qanday e'lon qilish kerak?

Windows 8.0 uchun reklama quyidagicha ko'rinadi:

Windows 8.1 va IE 11 brauzerconfig.xml da e'lon qilingan tasvirning bir nechta versiyalarini kutadi. Masalan:

Agar fayl nomi o'zgartirilmagan bo'lsa, buni e'lon qilishingiz shart emas:

#2b5797

Bugun biz juda qiziqarli mavzuga to'xtalamiz. Veb-saytingizda ishlayotganingizda, ertami-kechmi favikon yaratishingiz kerak bo'ladi. Oddiy qilib aytganda, favikon - bu brauzerdagi yorliqda paydo bo'ladigan veb-saytingiz belgisi. Agar saytingiz Sevimlilarga qo'shilgan bo'lsa, uni brauzeringizning tezkor kirish qismida ham ko'rishingiz mumkin.

Eng mashhur saytlarning favikonlari

Menimcha, favikon sifatli bo'lishi kerak deyishdan ma'no yo'q, chunki u qaysidir ma'noda saytingizning yuzi. Ushbu maqolada biz ehtiyojlarimizga javob beradigan favikonlarni qanday yaratishni o'rganamiz, shuningdek ularni konvertatsiya qilish xizmati bilan tanishamiz. Quyida ko'proq o'qing.

Video versiyasi:

Favikon qanday bo'lishi kerak?

Favikonning o'zini yaratishni boshlashdan oldin, ular ideal bo'lishi kerakligi haqida to'xtalib o'tish yaxshi bo'lardi. Shunday qilib, ideal favikon:

• Aniq va tushunarli
• Yaxshi sifatda ishlab chiqarilgan
• Saytingizning ma'nosini bildiradi
• Saytingiz bilan umumiy uslubga ega
• Boshqa saytlarning piktogrammalaridan ajralib turadi

Yuqoridagi parametrlarni ideal favikon sifatida tasniflash mumkin. Va saytimiz uchun aynan shunday belgi yaratishimiz kerak. Biroq, favikonda aniq nimani tasvirlash kerakligi haqida munozaralar mavjud. Menimcha, bu masalada siz o'z saytingizning umumiy uslubi va mavzusidan harakat qilishingiz kerak. Unda rasm yoki matn bo'lishi mumkin. Agar matn favikonga joylashtirilsa, u 2 ta harfdan iborat bo'lmasligi kerak. Aks holda, hech kim bunday matnni o'qiy olmaydi, chunki favikon o'lchamlari odatda 16 * 16 pikseldir.

Veb-sayt piktogrammalarining o'lchamlari qanday?

Ma'lumki, hozirda juda ko'p turli xil brauzerlar, monitorlar va qurilmalar mavjud. Va favikon o'lchamlari uchun ularning talablari boshqacha. Quyidagi o'lcham variantlarini hisobga olish kerak:

• 16*16px - standart favikon o'lchamlari, aksariyat brauzerlar va qurilmalar uchun mos keladi
• 32*32px - ayrim hollarda ishlatiladi Internet Explorer Va Safari
• 57*57px - ko'rsatishda ishlatiladi iPhone
• 72*72px - ko'rsatishda ishlatiladi iPad
• 114*114px - koʻz toʻr pardasi displeylarida koʻrsatishda foydalaniladi (57*2=114)
• 144*144px - ko'zning to'r pardasi displeylarida aks ettirishda foydalaniladi iPad (72*2=144)

Favikonlar qanday formatda bo'lishi kerak?

Ilgari brauzerlar faqat favikonlarni formatda qabul qilar edi "iko". Endi ular boshqa formatlarni, jumladan, tushunishni o'rgandilar "png". Bizning holatda, biz bir tosh bilan 2 qushni o'ldiramiz. Avval biz formatda favikon yaratamiz "png", va keyin uni aylantiring "iko".

Favikonlarni yaratishning bir necha usullari

Bugungi kunda favikonlarni yaratishning ikkita asosiy usuli mavjud:

1. Maxsus onlayn xizmatlar orqali
2. Photoshop va Adobe Illustrator kabi maxsus dasturlar yordamida uni o'zingiz yarating

Har bir usul o'ziga xos xususiyatlarga ega. Onlayn xizmatlar orqali favikon yaratishning afzalligi shundaki, buning uchun hech qanday maxsus ko'nikmalarga ega bo'lishingiz shart emas. Siz shunchaki kerakli rasmni yuklaysiz, uni o'zgartirasiz va tayyor favikonni yuklab olasiz. Yoki siz shunchaki matn bilan ishlaysiz va onlayn xizmat vositalaridan foydalanib piktogramma chizasiz. Umuman olganda, bu usulning asosiy afzalligi uning soddaligidir. Biroq, tanganing boshqa tomoni shundaki, bunday veb-sayt piktogrammalarining sifati ko'p narsani orzu qiladi. Onlayn xizmatlar uchun piktogramma galereyasi cheksiz emasligi sababli siz noyob favikonni olmaysiz. Va o'zingizning rasmlaringizdan foydalanganda, xizmat vositalaridan foydalanganda, yuqori sifatli mahsulotni yaratish unchalik oson emas. Onlayn xizmat vositalaridan foydalangan holda piktogramma qo'lda chizilgan taqdirda, natija "tasavvur qilib bo'lmaydigan narsa" bo'ladi.

Shuning uchun biz ikkinchi, murakkabroq, ammo muvaffaqiyatli yechimni tanlaymiz. Favikon yaratish uchun biz dasturdan foydalanamiz Fotoshop. Agar siz ushbu dastur bilan tajribangiz bo'lmasa, unda yaxshi bo'ladi. Mening ko'rsatmalarimni bajarib, siz vazifani osongina bajarasiz.

Favikon yaratish

Yuqorida aytib o'tganimdek, favikon rasm yoki shunchaki harflar yordamida yaratilishi mumkin. Bizning holatda, men qandaydir rasmdan foydalanaman. Misol uchun, bizda avtomobil veb-sayti bor deb tasavvur qilaylik. Shuning uchun, biz avtomatik maydondan tasvirni topishimiz kerak. Men bizning sayt belgisini g'ildirak shaklida qilishni taklif qilaman.

Rasm tanlash

Siz istalgan joydan suratga olishingiz mumkin. Masalan, xuddi shu orqali Yandex rasmlar. Asosiy shart - tasvir oddiy, soyalar va hajmlarsiz bo'lishi. Buning sababi shundaki, u 16 pikselgacha qisqartirilganda, unchalik ko'p tafsilotlar bo'lmaydi. Haddan tashqari hajm va soyalar tufayli rasm xiralashishi mumkin.

Qidiruv yordamida mos rasmni topaman google so'rov bo'yicha "g'ildirak". Men qilishim kerak bo'lgan yagona narsa sichqonchaning o'ng tugmachasini bosish va "Rasmni boshqa saqlash" ni tanlash orqali uni saqlashdir.

Google rasmlaridagi tegishli rasm

Keyinchalik, biz ushbu rasmni ishlatamiz Fotoshop. Favikon shaffof fonga ega bo'lishi juda muhimdir. Bizning holatlarimizda bunday emas. Fonni olib tashlash uchun biz Sehrli tayoqchadan foydalanamiz. Uning ishining mohiyati juda oddiy. Ushbu vosita yordamida biz tasvirdagi bir xil rangdagi joylarni tanlashimiz mumkin. Tasvirimizning foni g'ildirakning o'zi bilan aniq farq qilganligi sababli, buni qilish juda oson bo'ladi. Bir marta bosish orqali biz bitta rangli maydonni tanlaymiz. Klaviatura yorlig'ini bosish orqali CTRL+Oʻchirish biz bu joyni olib tashlaymiz.

Bizning g'ildirakning fonini olib tashlash

Biz buni tasvir fonining barcha qismlari bilan qilamiz. Shunday qilib, bizning rasmimizda g'ildirak shaffof fonda, biz buni qilishimiz kerak edi. Shunday qilib, bizning veb-sayt belgisi uchun shablon tayyor.

2 xil o'lchamdagi favikon yarating

Men 64px va 16px oʻlchamli 2 ta favikon yaratishni taklif qilaman. Avval biz kattaroq belgi (64px) yaratishimiz kerak. Buning uchun biz klaviatura yorlig'ini bosamiz CTRL+N. Ko'rsatilgan oynada biz tasvirning balandligi va kengligini 64px qilib tanlaymiz.

Kelajakdagi favikonning o'lchamlarini o'rnatish

Keyinchalik, g'ildirakni yangi yaratilgan tasvir maydoniga o'tkazishimiz kerak. Buning uchun biz g'ildirak bilan rasmga qaytamiz va "Ko'chirish" vositasini tanlaymiz. Keyingi qadam g'ildirak tasvirini bosish va sichqonchaning chap tugmachasini bosib ushlab turganda uni yangi rasm maydoniga o'tkazishdir. Harakatlanayotganda g'ildirakli qatlam tanlanganligiga ishonch hosil qiling. Aks holda, transfer muvaffaqiyatsiz bo'ladi.

G'ildirakni yangi rasmga o'tkazish

G'ildiraklarni yangi tasvirga o'tkazgandan so'ng, biz ular mos kelmasligini ko'ramiz. Biz g'ildirakni 64 pikselgacha kamaytirishimiz kerak. Buning uchun biz tugmachani bosib ushlab turamiz SHIFT va tasvirning diagonal nuqtasini bosish orqali biz uni qisqartiramiz. Shunday qilib, biz veb-saytimiz uchun birinchi favikonni yaratdik. Eslatib o‘taman, bizning o‘lchamimiz 64*64px. Endi biz uni faqat "Fayl" yorlig'ida "Veb uchun saqlash" funksiyasini tanlash orqali saqlashimiz kerak. Biz formatni tanlaymiz PNG-24 va papka tasvirlar. Biz favikonning o'zini ham chaqiramiz, faqat lotin harflarida - "favikon".

Favikonni saqlang

Ajoyib. Endi biz qilishimiz kerak bo'lgan yagona narsa - kichikroq favikon yaratish. Buning uchun biz "Rasm" yorlig'ini bosamiz va "Rasm o'lchami" funksiyasini tanlaymiz. Bu erda biz kenglik va balandlikni 16px ga o'rnatdik. Endi biz qilishimiz kerak bo'lgan yagona narsa ushbu rasmni veb uchun saqlashdir. Biz buni "favicon-2" deb atashimiz mumkin.

Shunday qilib, biz veb-saytimiz uchun formatda 2 ta favikon yaratamiz "png". Biz avval 64 piksel o'lchamli variantni yaratdik, keyin uni osongina 16 pikselga qisqartirishimiz mumkin. Agar siz avval 16px bilan parametr yaratsangiz, sifatni yo'qotmasdan uni 64px ga oshirolmaysiz. Shuning uchun, ikki tomonlama ish qilmaslik uchun buni yodda tuting.

Saytda favikon o'rnatish

Teg ichidagi saytga favikon o'rnatish uchun yozamiz:

Agar bizda formatda favikon bo'lsa " ico" keyin biz o'rniga " png" yozish " ico". Masalan:

Ko'rib turganingizdek, sayt belgisi biz xohlagandek ko'rsatiladi.

Sayt uchun belgini "ico" formatiga aylantirish

Zamonaviy brauzerlar favikonlarni formatda osongina tanib olishlari va ko'rsatishlari mumkin "png". Biroq, siz uni aylantirishingiz kerak bo'lishi mumkin "iko". Ushbu formatning afzalliklaridan biri barcha o'lchamdagi favikonlarni bitta faylda saqlashdir. Bu juda qulay ekanligiga rozi bo'ling. Shunday qilib, piktogrammalarimizni aylantirish uchun biz ajoyib xizmatdan foydalanamiz - xiconeditor.com. U bilan ishlash juda oson. Hammasi 4 bosqichda sodir bo'ladi:
1. Birinchidan, biz favikonlarimizni yuklashimiz kerak. Buning uchun biz tugmani bosamiz "Import".

Xiconeditor.com xizmatida favikonlarni yuklash

3. Agar xohlasangiz, tugmani bosishingiz mumkin "Ko'rib chiqish" va ular qanday ko'rsatilishini ko'ring. Favikonlarimizni formatda yuklab olish uchun "iko" tugmachasini bosamiz "Eksport".

Shunday qilib, biz favikonlarni qanday yaratishni o'rganamiz "png" va ularni formatga aylantiring "iko". Men Photoshop-da tasvirni batafsil qayta ishlashni ko'rib chiqmadim, chunki ko'pchilik uchun bu keraksiz bo'lar edi. Agar kerak bo'lsa, siz Photoshop-da piksellar bilan ishlash orqali favikon sifatini yanada oshirishingiz mumkin. Men barcha asosiy narsalarni soddalashtirilgan shaklda taqdim etishga harakat qildim. Va bu men uchun hammasi. Umid qilamanki, bu dars siz uchun foydali bo'ldi. Agar rost bo'lsa:

1. Ko'proq odamlar undan foyda olishlari uchun ushbu maqolani ijtimoiy tarmoqlarda takrorlang;
2. Foydali va qiziqarli blog xabarlarini o'tkazib yubormaslik uchun mening axborot byulletenimga obuna bo'ling.

Bu erda men siz bilan xayrlashmayman. E'tiboringiz uchun rahmat va keyingi nashrlarda ko'rishguncha!