Favikon 16x16 piksel oʻlchamdagi (yoki undan kattaroq) kichik belgi koʻrinishidagi veb-sayt yoki sahifaning belgisidir. Foydalanuvchi favikonni kichik rasm sifatida ko'rishi mumkin manzil satri brauzer ochiq saytga havolaning chap tomonida, xatcho'plar va yorliqlarda sayt nomining yonida, ba'zi qidiruv tizimlari, kataloglar, xatcho'p xizmatlari va boshqalar natijalarida.

Bir vaqtlar favikonlarni faqat .ico formatida yaratish mumkin edi, chunki u faqat eski brauzer tomonidan qo'llab-quvvatlangan. Internet Explorer. Bu erda favikon nomi (qisqa Inglizcha so'z FAV oritlar ICON– “sevimlilar belgisi”). "Sevimlilar" IE brauzeridagi xatcho'plarga berilgan nom edi.

Bugungi kunda veb-saytlar va sahifalar uchun piktogramma jpg, png, gif va, albatta, eski ico kabi ko'plab boshqa formatlarda yaratilishi mumkin.

Nima uchun sizga favikon kerak?

Bunday piktogrammalarni o'rnatish sizga kerakli yorliqni vizual qidirishni tezlashtirishga imkon beradi, ayniqsa ularning ko'plari ochiq bo'lsa. Taniqli rasmni ko'rish sahifa sarlavhalariga qarashdan ko'ra osonroq va tezroq.

Favikonlar brauzerda shunday ko'rinadi.

Agar qidiruv tizimlari qidiruv natijalarida loyihangizning favikonini ko'rsating, bu uning pozitsiyalarining o'sishiga ijobiy ta'sir qiladi. Chiroyli, zamonaviy va ayni paytda oddiy logotip maqsadli auditoriya e'tiborini tortadi va foydalanuvchini keyingisiga emas, balki sizning saytingizga borishga undaydi. Bularning barchasi sekin urish tezligini oshirishga yordam beradi va shunga mos ravishda xatti-harakatlar omillarini oshiradi.

Bundan tashqari, ikonka foydalanuvchilar tomonidan eslab qolinadi va bir muncha vaqt o'tgach, u keng auditoriya uchun taniqli bo'lib qoladi, bu ham tashrif buyuruvchilar uchun qo'shimcha diqqatga sazovor joy bo'ladi.

Eslatmada. Favikonni allaqachon optimallashtirilgan veb-resursga o'rnatish yaxshiroqdir.

Masalan, Yandex qidiruv tizimida favikonlarni indekslaydigan maxsus YandexFavicons robotlari mavjud. Ular har oyda bir marta nishonlarni yig'ish va yangilash uchun saytlarga tashrif buyurishadi.

Shu munosabat bilan, yangilanishlar, shundan so'ng sayt uchun o'zgartirilgan yoki yangi belgini tekshirishga arziydi, kamdan-kam hollarda bo'ladi. Shuning uchun, yangi rasmni o'rnatganingizdan so'ng, nisbiy resursingizning ekranidagi o'zgarishlar kamida ikki hafta kutishi kerak (bu minimal).

Qidiruv tizimi belgini topgach, uni PNG formatiga aylantirishi kerak bo'ladi (agar u ICO formatida qilingan bo'lsa). Shundan so'ng, siz o'z manbangizning favikonini manzilda topishingiz mumkin (misol sifatida Yandex-dan foydalaning): http://favicon.yandex.net/favicon/URL-address-of-your-site.

Veb-sayt uchun favikonni qanday yaratish mumkin?

Favikonni faqat namoyish qilish uchun qilishning o'zi etarli emas. Agar siz tashrif buyuruvchilarni jalb qilish uchun qo'shimcha manba bo'lishini istasangiz, sayt belgisini qanday qilib to'g'ri yaratishni bilish muhimdir.

Kataloglar va favikonlarni yaratish xizmatlari

Veb-sayt yoki uning sahifalaridan birining belgisini o'zingiz qilishingiz mumkin, ayniqsa siz Photoshop va boshqa shunga o'xshash dasturlardan foydalansangiz. Agar sizda na ko'nikma, na vaqt va na xohish bo'lsa, bugungi kunda favikonlar va galereyalarni yaratish uchun ko'plab maxsus qulay xizmatlar mavjud bo'lib, ular sizning loyihalaringiz uchun tayyor piktogrammalarni taklif qiladi:

Va bularning barchasi generatorlar va kataloglar emas, shuning uchun zamonaviy veb-master o'zi yoqtirgan favikonni osongina topishi mumkin.

Belgining ko'rinishi

Standart favikon o'lchami 16x16 piksel. 24x24, 32x32, 48x48 va 64x64 o'lchamlari ham mavjud. Siz tushunishingiz kerakki, sayt belgisi uning yuzi bo'lib, trafik ma'lum darajada bog'liq. Shuning uchun favikonni yaratishga oqilona yondashish kerak. Foydalanuvchilarning e'tiborini jalb qilish uchun piktogramma qanday ko'rinishi kerakligi haqida bir necha qoidalar:

• Sayt mavzusiga mos uslub. Rasmda Internet-resurs yoki uning logotipi dizaynida ishlatiladigan bir xil ranglar va elementlar ustun bo'lishi kerak. Aslida, bu favikonning asosiy vazifasi - saytga mos kelish.
• Tushunish oson. Siz ko'p elementlarni chizmasligingiz va ularni bir-birining ustiga haykaltarmasligingiz kerak. Foydalanuvchi belgiga qarab, unda nima tasvirlanganini tushunishi kerak va sizning "yashirin ma'nongizni" ochishga urinmasligi kerak. Oqilona minimalizm muvaffaqiyat kalitidir.
• Esda qolarli surat. Bu nuqta oldingi ikkitasi bilan chambarchas bog'liq. Favikonning mavzusi va soddaligi foydalanuvchilar uni tezroq va osonroq eslab qolishlarini ta'minlaydi. Biror kishi unga qaraganida, uni biron bir so'z bilan tasvirlay oladigan tasvirdan foydalanishga harakat qiling. Misol uchun, xuddi shu "Yandex" qidiruv tizimi bu masalaga juda yaxshi yondashdi va endi siz "I" harfi shaklida logotipni ko'rganingizda, darhol ushbu qidiruv tizimini eslaysiz.

Favikon o'rnatilmoqda

Favikon yaratgandan so'ng, u saytda o'rnatilishi kerak. Buni qilish juda oson:

1. favicon.ico tasvirini veb-saytingizning ildiz papkasiga yuklang;
2. Quyidagi kodni saytning HTML kodiga, bosh meta tegiga yozing:

Favikon kodi teglar orasida joylashgan bo'lishi kerak. Kodlashda kodni iloji boricha yuqoriroqda ishlatish odatda qabul qilinadi.

Mobil telefonda Favicon ko'rsatilmoqda

Mobil saytlar uchun favicon saytingizning asosiy belgisi sifatida ishlatiladi. Mobil telefonda, bosh ekranda sayt ochganingizda tez kirish brauzerda ushbu maxsus favikon ko'rsatiladi. Sizning saytingiz telefonning asosiy ekraniga qo'shilishi mumkin va mobil favikon ham shu erda joylashgan.


Yuqoridagi skrinshotda ko'rib turganingizdek, VKontakte va Avito-da favikon mobil qurilmalar uchun moslashtirilmagan, shuning uchun domenning birinchi harfi ishlatiladi.

Mobil telefonlar davrida har bir veb-sayt ko'rsatish uchun bunday Favikondan foydalanishi kerak mobil telefonlar. Bu sizning saytingizga tashrif buyuruvchilar uchun qulay tajriba yaratadi.

IOS uchun belgi

Favikon ko'rsatilishi uchun iOS qurilmalari va ichida Safari brauzer, siz quyidagi kodni yozishingiz kerak:

Android

Android-da ishlaydigan qurilmalar uchun biz yozamiz:

Ammo bu kod sizning favikoningizni faqat brauzerda ko'rsatadi. Va belgi smartfonning ish stolida ko'rsatilishi uchun siz manifest faylini ko'rsatishingiz kerak.

Uning tarkibi:

( "name": "%title%", "belgilar": [ ( "src": "\/android-chrome-36x36.png", "o'lchamlari": "36x36", "turi": "rasm\/png" ", "zichlik": "0,75" ), ( "src": "\/android-chrome-48x48.png", "o'lchamlari": "48x48", "turi": "rasm\/png", "zichlik" : "1.0" ), ( "src": "\/android-chrome-72x72.png", "o'lchamlari": "72x72", "turi": "rasm\/png", "zichlik": "1,5" ) , ( "src": "\/android-chrome-96x96.png", "o'lchamlari": "96x96", "turi": "rasm\/png", "zichlik": "2.0" ), ( "src" : "\/android-chrome-144x144.png", "o'lchamlari": "144x144", "turi": "rasm\/png", "zichlik": "3.0" ), ( "src": "\/android -chrome-192x192.png", "o'lchamlari": "192x192", "turi": "rasm\/png", "zichlik": "4,0" ) ] )

Lekin bu hammasi emas. Yangisida Android versiyalari(Lollipop'dan boshlab), brauzeringiz sayt interfeysi rangini o'zgartirishi mumkin.


Bunday xususiyatni yaratish uchun qatorni yozing va rangingizni o'rnating:

Windows Phone

Favikon haqida Windows Phone ham unutmang:

Windows Phone-da kengaytirilgan belgi sozlamalari uchun siz quyidagi qiymatlardan foydalanishingiz mumkin:

#8A2BE2

Konfiguratsiya faylining o'zi:

Favikon yaratish va tekshirish xizmatlari

digitalagencyrankings.com

Veb-sayt manzilingizni kiriting va tahlil qiling.


Favikonni sozlashni e'tiborsiz qoldirmang mobil qurilmalar. Bu sizning tashrif buyuruvchilaringiz uchun qulay ekanligini unutmang, ular uchun brauzerda saytingizni ko'rish va unga o'tish oson.

Xulosa

Bugungi kunda deyarli barcha brauzerlar favikonlarni qo'llab-quvvatlaydi. Har bir saytning belgisi noyobdir va uni to'g'ri yaratish saytning butun mohiyatini etkazadi va qidiruv natijalarida saytingizning chertish tezligini oshiradi.

Shunga asoslanib, favikon sizning loyihangizni boshqa ko'plab saytlardan ajratib olish, uning esda qolishi va tan olinishini oshirishning qo'shimcha usuli bo'lib xizmat qiladi degan xulosaga kelishimiz mumkin. Bu, albatta, qidiruv trafigini oshirishga yordam beradi.

Favikon - bu atama so'zma-so'z "sevimli belgi" deb tarjima qilinadi - zamonaviy veb-dizaynning eng murakkab elementlaridan biri hisoblanadi. Bu brauzer yorlig'ida joylashgan kichik rasm qidiruv paneli va boshqa joylar va saytni shaxsiylashtirishda muhim rol o'ynaydi.

Nostandart format tufayli va kichik o'lcham favikon yaratish ham texnik, ham dizayn nuqtai nazaridan qiyin bo'lishi mumkin.
Xuddi shunday qiyin vazifa - turli brauzerlar bilan favikon mosligini ta'minlash.

Ushbu maqolada siz favikonni qanday qilishni o'rganasiz - biz dizayn bo'yicha maslahatlar beramiz va sizga favikon yaratish xizmatlari va saytga favikonni qanday qo'shish haqida gapirib beramiz.

Favikon nima va u nima uchun kerak?

Favikon juda kichik grafik ob'ekt bo'lishiga qaramay, u veb-sayt dizaynida va umuman olganda juda muhimdir.

Rasmni kattalashtirish uchun bosing.

Birinchidan, favicon saytingizni boshqalar bilan moslashtiradi va moslashtiradi grafik elementlar logotip kabi.

Ikkinchidan , favikon saytingizni qidiruv natijalari ro'yxatidagi boshqa veb-resurslardan ajratib turadi. Ushbu mini-piktogrammasiz sayt zerikarli ko'rinadi va raqobatchilarga yutqazadi. Bir so'z bilan aytganda, favikon shunchaki veb-saytlar uchun "bo'lishi kerak".

Uchinchidan , favikon foydalanuvchiga ish stolidagi xatcho'plar yoki boshqa belgilar katalogidan saytingizni tezda topish imkonini beradi.

Favikon dizaynini yaratish

Favikon mohiyat va brendni tabassum o'lchamidagi kichik belgida aks ettirishi kerak. Yaxshi qaror kompaniya logotipining soddalashtirilgan versiyasi bo'ladi, lekin yodda tuting: matn va savdo belgilariga ega to'liq huquqli logotip bu maqsad uchun mos emas.

Ushbu veb-saytlar o'z brendining grafikasidan foydalanadi (yoki hech bo'lmaganda unga o'xshash).

Matnni ishlatmang

Siz matndan foydalanishdan qochishingiz kerak, chunki favikonning kichik o'lchami tufayli yozuvlarni o'qib bo'lmaydi. Belgiga 1, maksimal 2 ta harf qo'ying - masalan, kompaniyangiz yoki veb-resursingiz nomidagi birinchi harflar; bu holda ular hali ham ajralib turishi mumkin.

Favikon piksellashuvi

Favikonlar shunchalik kichikki, har bir piksel muhim. Ko'pincha, to'liq o'lchamdagi logotipni kichraytirsangiz, tasvir loyqa ko'rinadi.

Bu 32x32 o'lchamga kichraytirilgandan keyin to'liq o'lchamli Facebook logotipining bir qismidir. Tasvir qirralarning atrofida "suzayotganini" sezish oson. Bunday nuqsonni oldini olish uchun tahrirlash piksel darajasida amalga oshirilishi kerak.
Belgilar bilan ishlashda men tahrirlash dasturlarini ishlatishni afzal ko'raman rastrli tasvirlar(masalan, Photoshop yoki Pixelmator). Birinchidan, men to'liq o'lchamli logotipni 64x64 pikselgacha kichraytiraman, chunki bu menga kerak bo'lgan eng katta favikon. Ish juda mashaqqatli, bir soat yoki hatto ikki soat davom etishi mumkin, ammo natija shunchaki ajoyib.
Agar bunday operatsiyalarda vaqt va ko'nikmalar bo'lmasa, undan foydalanish yaxshiroqdir onlayn xizmatlar, kabi Logotizer.ru

Favikon hajmi

64x64 piktogramma olgandan so'ng, men xuddi shu tarzda 32x32, 24x24 va 16x16 pikselli piktogrammalarni yarataman. Ularning har biri o'z maqsadiga ega:

– 64×64 – Safari va Windows-da “O‘qish ro‘yxati”
– 24×24 – IE9 da mahkamlangan saytlar.
– 32×32 – ekranlar uchun yuqori aniqlik.
– 16x16 – Odatda IE, Safari, Chrome va boshqalar kabi brauzerlarda ishlatiladi.

Ammo kichikroq favikonlarni yaratish shu bilan tugamaydi: ko'pincha piksel darajasida qo'shimcha tahrirlash talab qilinadi. Agar mos deb hisoblasangiz, alfa-kanalni ham qo'shishingiz mumkin. Agar bu ilgari qiyinchiliklarga olib kelgan bo'lsa, endi deyarli barcha brauzerlar favikonlarda shaffoflikni qo'llab-quvvatlaydi.

Favikon formatlari

Ilgari, faqat Windows ICO fayllari qo'llab-quvvatlansa, biz 16x16 favikonni GIF sifatida saqlash va unga .ico kengaytmasini berish orqali vaqtni tejashimiz mumkin edi. Ushbu texnika mukammal ishladi! Ammo endi bu usul kerak emas, chunki ICO fayllarini yaratish vositalarini Internetda osongina topish mumkin. Bundan tashqari, ular hozirda favikonlar uchun ishlatiladi, lekin eng keng tarqalganlari hali ham faqat quyidagi ikkitasi.

ICO

Xurmo ICO formatiga tegishli. PNG fayllaridan farqli o'laroq, ICO fayllari turli o'lchamlarda va bit chuqurlikda bo'lishi mumkin (bu Windows uchun juda yaxshi). Internet Explorer favikonlardan foydalanadi har xil o'lchamlar(masalan, panel uchun 32 pikselli belgilar Windows vazifalari 7) va shuning uchun bu holda ICO formati yagona variantdir.

PNG fayllari juda qulay, chunki ularni yaratish uchun sizga maxsus vositalar kerak emas. Ushbu format alfa-kanalni qo'llab-quvvatlaydi va juda kichik fayllarni yaratishga imkon beradi. Ehtimol, PNG formatining yagona kamchiliklari shundaki, u qo'llab-quvvatlanmaydi Internet-brauzer Explorer.

Boshqa variantlar mavjud:

– GIF va animatsion GIF formatlari juda eski brauzerlar bilan moslikdan boshqa afzalliklarga ega emas.
– Rasm fotosurat shaklida bo'lsa ham, JPG formati tavsiya etilmaydi. Ushbu formatda PNG aniqligi yo'q va uning yagona afzalligi ranglar orasidagi yumshoqroq o'tishdir - bu juda kichik tasvirda umuman sezilmaydigan nuance.
- SVG bo'lishi mumkin ajoyib variant Agar ko'proq brauzerlar ushbu formatdagi favikonlarni qo'llab-quvvatlasa. Hozircha faqat Opera bilan moslik mavjud.
– Bundan tashqari, Firefox va Opera-da qo'llab-quvvatlanadigan PNG - APNG (animatsiyalangan PNG) ning "pastki formati" mavjud. Biroq, undan foydalanishning maqsadga muvofiqligi shubhali bo'lib qolmoqda. Animatsiyalangan favikon foydalanuvchini chalg'itishi va hatto bezovta qilishi mumkin.

Onlayn favikon yarating - asboblar va onlayn xizmatlar

Biz siz uchun eng ko'p tanladik foydali xizmatlar, bu sizga onlayn favikon yaratishga yordam beradi.

Logotiplovchi

Logotizer - bu veb-saytingiz uchun favikon va logotip yaratish uchun yangi, sodda va qulay xizmat.
Ushbu onlayn ishlab chiqaruvchi bilan siz noldan favikon yaratishingiz mumkin. Xizmat yangi boshlanuvchilarga qaratilgan, shuning uchun yaxshi dizaynni ishlab chiqish qiyin bo'lmaydi.

Favikonni qanday yaratish kerak onlayn generator Logotiplovchi

Asosiy ish joyi chap tomonda. O'ng tomonda siz favikon turli xil muhitda qanday ko'rinishini ko'rishingiz mumkin - brauzer yorlig'i, kompyuter vazifalar paneli yoki smartfon ekrani. Juda qulay va tushunarli.

Birinchidan, siz favikon uchun shaklni tanlashingiz kerak. Ularning ko'pi bor, 50 dan ortiq. Favikonni oson idrok etish va eslab qolish uchun sizga oddiy va murakkab bo'lmagan shakllarni tanlashingizni maslahat beramiz.

Ushbu bosqichda siz favikonning fonida bo'ladigan shakl rangini ham aniqlaysiz va ramkani tanlaysiz. Sizning logotipingizda qaysi rang ustunligini (agar sizda mavjud bo'lsa) va veb-saytingizda qaysi ranglar asosiy ekanligini ko'rib chiqing. Aynan shu oraliqda biz favikon dizaynini yaratishni tavsiya qilamiz.

"Shape" bloki ostida shakllar (ramzlar) to'plami mavjud. Ularning ko'pi yo'q, o'z variantlaringizni yuklay olmasligingiz achinarli; lekin tanlov hali ham juda qiziq.

Raqamlarning rangini, hajmini, joylashishini o'zgartiring! Bir so'z bilan aytganda, tajriba, xayriyatki, xizmat sizga buni amalga oshirishga imkon beradi.

Shakl tanlangandan so'ng siz matnni qo'shishingiz mumkin. Oldin yozganimdek, 1 yoki 2 ta harf ishlatgan ma'qul, ortiq emas.

Shriftlarning keng tanlovi mavjud. Bu, albatta, ortiqcha. Shakllarda bo'lgani kabi, siz matnning rangi, hajmi va joylashishini o'zgartirishingiz mumkin.

Agar biron bir favikon qatlami sizni vaqtincha bezovta qilmoqda yoki umuman kerak emas deb qaror qilsangiz, uni shunchaki yashirishingiz mumkin.

Favikon yaratgandan so'ng, xizmat uni saqlashni taklif qiladi. Hisob qaydnomasini ro'yxatdan o'tkazing (2017 yilda ro'yxatdan o'tmasdan hech qanday yo'l yo'q) va shundan so'ng siz kichik to'lov uchun fayllarni yuklab olishingiz mumkin - 199 rubl.

Saytda shuningdek, saytga favikon qo'shish bo'yicha kichik ko'rsatmalar mavjud, shuning uchun saytga favikon qo'shishda hech qanday muammo bo'lmasligi kerak. Xuddi shunday tavsiyalar ham ushbu maqolada quyida keltirilgan.

To'lovdan so'ng foydalanuvchi darhol bugungi kunda zarur bo'lgan barcha qurilmalar uchun turli o'lchamdagi 10 ta favikonni oladi (Apple sensorli belgisi, Microsoft Application Icons va boshqalar).

favicon.ico faylining o'zi ko'p o'lchamli va 1 faylda 4 o'lchamdagi piktogrammalarni o'z ichiga oladi (16px, 24px, 32px, 64px). Shunga ko'ra, agar siz saytni brauzer xatcho'plariga qo'shsangiz yoki tarixingizni ochsangiz, siz turli o'lchamdagi piktogrammalarni ko'rishingiz mumkin bo'ladi, lekin ular aniq va loyqa holda ko'rsatiladi.

Umuman olganda, xizmat yaxshi. Oddiy, qulay, ortiqcha narsa yo'q.

RealFaviconGenerator.net

har qanday platforma uchun favikon yaratish imkonini beruvchi oddiyroq favikon generatoridir. Bundan tashqari, siz resursda favikonni sinab ko'rishingiz mumkin. Saytingizning URL manzilini kiriting va favikoningiz har bir brauzerda qanday ko'rinishini ko'rasiz operatsion tizim. Haqiqiy Favicon Generator sizga kamchiliklarni qanday tuzatish va favikoningizni yanada yaxshiroq qilish haqida ham aytib beradi.

Favicon.by

Favicon.by PNG, JPG va GIF fayllarini .ico formatiga o'zgartiradigan yana bir bepul va ishlatish uchun qulay favikon generatoridir. Tasvirni kompyuteringizdan yuklang, o'lchamini (16x16px yoki 32x32px) tanlang va "Yaratish" tugmasini bosing. Olingan favikonni veb-saytingizda saqlash uchun ko'rsatmalarga amal qiling.

Xizmat shuningdek, logotip pikselini piksel bo'ylab chizish imkonini beradi, ammo, rostini aytsam, buni hamma ham qila olmaydi. Masalan, men qila olmadim. Men shunday qiyshiqman :)

Veb-saytga favikonni qanday qo'shish mumkin

Sayt sahifasining HTML kodiga bir nechta o'zgartirishlar kiritish orqali saytingizga favikon qo'shishingiz mumkin.

1-qadam: “favicon.ico” faylini hosting serveringizga yuklang.

Buning uchun quyidagi havola orqali FTP serveringizga o'ting:
ftp:// [elektron pochta himoyalangan]
Foydalanuvchi nomingiz va parolingizni kiriting. Bularni hosting kompaniyangizning boshqaruv panelidan olish mumkin.
Favikon fayllarini ildiz katalogiga yuklang. Ildiz katalog odatda “public_html” yoki “www” deb ataladi.

2-qadam: HTML-ga favikon qo'shing.

FTP server oynasini ochiq tutib, “index.html” yoki “header.php” faylini yuklab oling.
Keyin kodni yuklab olishingiz kerak. Yuklab olish kodingiz veb-saytingizga bog'liq.
Agar sizning saytingiz HTML bo'lsa, index.html faylida HEAD maydonini toping va quyidagi kodni joylashtiring:

Agar sizning saytingiz WordPress-da bo'lsa, header.php faylida HEAD maydonini toping va quyidagi kodni joylashtiring:

/favicon.ico” />

Ushbu kodlar yordamida brauzerlar favikonlaringizni topa oladi.
Shunday qilib, siz favikoningizni o'rnatdingiz!

WordPress va boshqa platformalarda Favikonni qanday qo'shish mumkin

Agar sizning resursingiz WordPress yoki boshqa CMS-ga asoslangan bo'lsa, saytga favikon qo'shish juda oddiy. Umuman olganda, turli platformalar uchun favikon qo'shish algoritmi bir xil bo'ladi.
1. Sayt konsoliga o'tishingiz kerak.
2. "Dizayn" yoki "Tashqi ko'rinish" bo'limini toping.

3. "Mavzu sozlamalari" bo'limiga o'ting va u erda "Favicon" ni toping.

4. Favikonni kompyuteringizdan yuklang.

5. Sahifani saqlang va yangilang.

Qanday qilib murakkabroq favikonlarni yaratish mumkin

Ushbu maqolada deyarli har qanday brauzer va operatsion tizimga mos keladigan favikonlarni yaratishning oddiy va tezkor usullari muhokama qilinadi. Ammo veb-dizayn va ishlab chiqish haqida gap ketganda, osmon chegara hisoblanadi. Agar siz yanada murakkab favikonlarni, iOS bosh ekranlari uchun teginish piktogrammalarini, Windows-dagi Metro interfeysi piktogrammalarini, Google TV piktogrammalarini va boshqa ko'p narsalarni qilishni o'rganmoqchi bo'lsangiz, men ushbu materiallarni ko'rib chiqishingizni tavsiya qilaman: favicon aldash varag'i. U mavzu bo'yicha to'liq ma'lumotni o'z ichiga oladi va yaxshi manbalarni taqdim etadi. Bu doimiy ravishda o'z bilimlarini kengaytirishga intilayotgan dizaynerlar va ishlab chiquvchilar (men ham bor) uchun ajoyib imkoniyatdir.

Favico.js yordamida siz raqamlar bilan dinamik favikonlarni yaratishingiz mumkin.

Sizga o'zgaruvchan raqamga ega bo'lgan dinamik favikon ham kerak bo'lishi mumkin. Bunday favikonlarni yaratish uchun men xizmatdan foydalanishni tavsiya qilaman favico.js, Github-da mavjud. Dinamik favikonlar hali barcha brauzerlar bilan mos kelmaydi. Ammo ularni qo'llab-quvvatlaydigan brauzerlar uchun bu piktogrammalar qiziqarli va foydali qo'shimcha bo'lishi mumkin.

Agar siz ushbu maqolaga yana bir maslahat qo'shmoqchi bo'lsangiz yoki savolingiz bo'lsa, quyida sharh qoldiring!

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, 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'zgarmagan holda qoldiring (o'lchamlarni saqlang) 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 toʻplamlarni 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

Favikon 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 jonlantirilgan 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

Bugungi darsda men sizga bu haqda aytib beraman Favikon piktogrammalari (favikon). Men sizga ko'rsataman veb-sayt uchun favicon.ico qanday yaratiladi(yoki blog uchun bu muhim emas) va men sizga bu qanday mumkinligini ko'rsataman favikonni kiriting.

Albatta, ko'pchilik men qanday "mo''jiza" haqida gapirayotganimni hali ham bilishmaydi. Oddiy qilib aytganda, Favikon - bu brauzerda sayt manzilidan oldin paydo bo'ladigan rasm (piktogramma). Men sizga blogimning Favikonini ko'rsataman:

Ushbu belgi blogingiz uchun logotipning bir turi. Shuning uchun favikonni yaratish to'liq mas'uliyat bilan qabul qilinishi kerak. Esda tutingki, bu sizning blogingizni boshqalardan ajratib turishi mumkin.

Dars rejasi:

1. Noldan Favikon yaratish.
2. Tayyor tasvirdan favikon yaratish.
3. Sayt uchun tayyor piktogrammalarga ega xizmatlar.
4. Olingan belgini saytga biriktirish.

Favikonni noldan qanday yaratish mumkin

Bitta juda qulay xizmat mavjud. Unda favicon.cc manzili bor. Ushbu favikon yaratish xizmati quyidagicha ko'rinadi:

– Ha, bu xizmatda ham tayyor favikonlar mavjud.

Veb-sayt uchun Favikonni qanday qilish kerak

Favikonni yaratganimizdan so'ng, uni saytga "biriktirish" kerak. Buning uchun siz quyidagilarni bajarishingiz kerak:

Ko'rib turganingizdek, hamma narsa to'g'ri "tushgan". Umid qilamanki, sizda ham hech qanday muammo yo'q. Agar sizda biron bir savol bo'lsa, ularni quyidagi manzildan so'rang

Tuzilishi: Favikon - bu xatcho'plarda saytingizni vizual ravishda aniqlash uchun ishlatiladigan kichik belgi, shuningdek, brauzer yorliqlarida saytingiz yoki sahifangiz nomi yonida ko'rgan narsadir. Odatda, favikon favicon.ico formatidagi 16x16 pikselli kvadratdir. Ushbu maqolada biz boshlash uchun qanday "baza" kerakligini tushuntiramiz, grafik muharrirlar yordamida favikon yaratishga yordam beramiz va saytingizga favikon qo'shish usullari haqida gapiramiz. Boshlash uchun nima kerak?

1. Sizning logotipingiz kamida 512x512 piksel bo'lishi kerak (kvadrat bo'lishi kerak);
2. .PNG tasvir formati;
3. Grafik muharriri Adobe Photoshop yoki GIMP.

Adobe Photoshop yordamida favikon yarating

Shaffof fonda favikon:

Korporativ rangdagi fondagi favikon:

GIMP - GNU Image Manipulation Program yordamida favikon yaratish

.ICO dan .PNG yoki .GIF orqali foydalanishning afzalliklari

1. Moslik: Barcha brauzerlar, shu jumladan IE 5.0, .ico formatini qo'llab-quvvatlaydi.
2. 404 server xatolarining oldini olish: Barcha zamonaviy brauzerlar (Chrome 4, Firefox 3.5, IE8, Opera 10 va Safari 4 bilan sinovdan o'tgan) har doim favicon.ico faylini so'raydi, shuning uchun har doim favicon.ico fayliga ega bo'lgan ma'qul.
3. .ico faylida bir nechta piktogramma bo'lishi mumkin, shuning uchun 16x16 va 48x48 pikselli piktogrammalar uchun bir nechta fayl yaratishingiz shart emas.

Onlayn konvertorlar yordamida .PNG ni .ICO ga aylantiring

WordPress-da favikonni qanday o'rnatish mumkin?