- Favikonni qanday yaratish kerak
- Fotoshopda favikonni qanday qilish kerak
- Favikonni qanday saqlash kerak
- Favikon saytini qanday qo'shish kerak
- Favikonni qanday almashtirish kerak
- Qanday qilib murakkab favikonlarni yaratish mumkin?
Bu so'zni birinchi eshitganingizda favikon nima ekanligini aniqlash qiyin. Bu siz foydalanadigan operatsion tizimiga va Internet brauzeriga qarab, brauzerlarning yorliqlarida, manzil satrlarida va boshqa sohalarda ko'rsatiladigan miniatyuradir . Ushbu veb-sayt dizayndagi eng murakkab va shilimshiq elementlardan biri deb atash mumkin.
Yaxshi favikonni yaratish juda qiyin, chunki ikonka kichkina, aniq bo'lishi va saytingiz bilan bog'liq bo'lgan narsalarni ko'rsatish kerak. Barcha mashhur brauzerlar bilan mos keladigan favikon yaratish ham qiyin vazifa bo'lishi mumkin. Ushbu maqolada biz yaratilishning barcha murakkab tomonlari bilan shug'ullanamiz. Agar sizda logotip kerak bo'lsa, unda biz bor maqola buni qanday qilish kerak.
Favikonni qanday yaratish kerak
Favikonning dizayni bilan boshlaylik. Yaxshi dizayni, uning ixchamligiga qaramay, saytingizning mohiyatini aks ettirishi va korporativ identifikatsiyasining organik qismi bo'lishi kerak. Odatda, ikon bir kompaniyaning grafik belgisi (belgisi) emas, balki butun bir tamg'a emas (belgisi, matn va shior).
Favikon sifatida bu veb-saytlar o'z belgilaridan (yoki ularga yaqin rasmlarni) foydalanadi.
Favikondagi matndan foydalanmaslik kerak, chunki bu matn kichik rasm hajmi tufayli o'qilmaydi. Ushbu qoida uchun yagona istisnolardan, ma'lum bir tovar belgisi bilan avtomatik ravishda bog'langan, jahonga mashhur bo'lgan matn belgilaridir. Misol uchun, onlayn-resurs Vikipediya favikonga "V" va "Facebook" harflari - "F" harfini qoldirdi.
Ushbu favikonlarda ma'lum bir brend bilan kuchli bog'langan harflar mavjud. Misol uchun, Facebook o'zining grafik belgisidan foydalanadi. Bundan tashqari, Disney tasvirida piksellar paydo bo'lishini ham unutmang. Buning sababi, ekran tasvirini 16 × 16 belgilarga mos keladigan Retina ekranda olingan bo'lsa, veb-saytlar 32 × 32 belgidan foydalanadi.
Favikonlar kichik rasm bo'lganligi bois, har bir piksel muhim rol o'ynaydi. Ba'zan logotipni qisqartirgandan so'ng, individual piksellar paydo bo'ladi, buning natijasida tasvir "loyqalangan" bo'ladi. Aniqlikni ta'minlash uchun siz piksel darajasida belgini o'zgartirishingiz kerak.
Buni oldini olish uchun fotosurat yoki GIMP kabi maxsus muharrirlar yordamida logotipni o'zgartiring. Avval tasvirni o'lchamini 64x64 pikselgacha kamaytirishingiz kerak (bu eng katta o'lchamli favikon). Keyin tasvir aniq bo'lmaguncha Pencil asbobini ishlatib, har pikselni tahrirlashingiz kerak. Bu juda zo'r ishdir, lekin bunga arziydi. Favikon 64x64 tayyor bo'lganda siz 16 × 16, 24 × 24 va 32 × 32 pikselli tasvir bilan bir xil ishni bajarishingiz kerak. Barcha brauzerlarda va gadjetlarda to'g'ri tasvirni kerakli darajada o'lchamlari kerak:
- 64x64 - Safari brauzerining xatcho'plari;
- 32x32 - yuqori piksellar sonini ko'rsatadi (Retina);
- 24x24 - xatcho'plar Internet Explorer va MicroSoft Edge;
- 16x16 - Google Chrome va boshqa brauzerlar.
Fotoshopda favikonni qanday qilish kerak
Avval siz yuqorida ko'rsatilgan o'lchamlarga ega bo'lgan bir nechta rasmni yaratishingiz kerak.
Keyin tuval ustiga belgi, xat yoki boshqa rasm qo'shishingiz kerak.
Favikonni qanday saqlash kerak
Turli o'lchamdagi belgilarni yaratib, har birini ochiq PNG fayli sifatida (24 bit) saqlang. Fotoshopda Fayl menyusida mavjud bo'lgan Veb uchun Saqlash xususiyatidan foydalanishingiz mumkin. Keyin barcha PNG fayllarini bir oqish faylga birlashtirishingiz kerak. PNG fayllari va oqish fayllarini bir vaqtning o'zida ishlatishingiz mumkin, lekin ko'pincha Safari va Chrome faqatgina ICO formatini afzal ko'radi. Menimcha, bitta ICO faylini yaratish osonroq. ICO formati juda keng tarqalgan emas, lekin baxt-sa, fayllaringizni ushbu formatga aylantirishga yordam beradigan bir qator vositalar mavjud. Buning uchun men foydalanishni afzal ko'raman X-Icon muharriri . Bu bepul yuklab olingan rasmlarni bir zumda faylga aylantiradigan bepul onlayn xizmat bo'lib, undan so'ng uni yuklab olishingiz mumkin. Bu murakkab narsa emas, faqat saytdagi ko'rsatmalarga amal qiling. Agar o'zingizni umidsiz shaxs deb hisoblasangiz, ushbu xizmatning pikselli muharriri bilan tajriba o'tkazib, o'zingiz favikonni chizishingiz mumkin. (Favikonlarni yanada professional tahririyatda, masalan, fotoshopda tahrir qilishni ma'qul ko'rsam-da).
PNG-rasmlarini X-Icon Editor-ga yuklash orqali Siz bitta ICO faylini chiqishda olishingiz mumkin.
Favikon saytini qanday qo'shish kerak
Shunday qilib, allaqachon bir ICO fayli bor. Endi siz uni veb-saytga kiritishingiz kerak. Faylni favicon.ico deb o'zgartiring va uni veb-saytingizning ildiz papkasida joylashtiring (index.html fayli va boshqa standart fayllar saqlangan). Muvaffaqiyatli qo'shimchadan so'ng, uni o'z veb-saytida ko'rishingiz mumkin .com / favicon.ico. Deyarli barcha brauzerlar ildiz papkasida joylashgan favicon.ico faylini izlaydi. Shuning uchun favikonni ushbu jilddan yuklab olish juda muhimdir. Turli xil brauzerlar bilan muvofiqlik uchun uning joylashganligini ko'rsatadigan biron-bir HTML element yoki havolani qo'shmaslik yaxshiroqdir. Ushbu hiyla barcha brauzerlar uchun, IE6gacha ishlaydi. Agar sizda WordPress sayti mavjud bo'lsa, unda ko'p mavzularda mavzu sozlamalarida favikon qo'shishingiz mumkin. Bu usul ham ishlatilishi mumkin.
Favikonni qanday almashtirish kerak
Ayrim sabablarga ko'ra brauzerlar uni keshga qo'shadilar. Shuning uchun yangi ICO faylini yuklaganingizda, brauzer eski favikoningizni ko'rsatishga davom etishi mumkin. Bu holatda nima qilish kerak? Yangi favikonning joylashuvini ko'rsatuvchi vaqtinchalik HTML faylini qo'shishingiz mumkin. Shuningdek URLning oxirida siz qisqa so'rovlar qatorini qo'shishingiz kerak:
<link rel = "qisqartma belgisi" href = "sizning veb-saytingiz .com / favicon.ico? v = 2" />
Shuning uchun brauzer bu noyob URL deb o'ylaydi va shuning uchun yangi ikonani ko'rsatishga majbur bo'ladi. Favikonni yangilashdan so'ng, ushbu HTML kodi butunlay olib tashlanishi mumkin. Favikonda o'zgarishlar qilish zarur bo'lsa, xuddi shu usuldan foydalaning, har safar so'rovlar qatoridagi "v" sonini oshirib boring. Shunday qilib, brauzer har doim ushbu URL-ni noyob deb hisoblaydi va yangi versiyasini ko'rsatadi. Va muvaffaqiyatli yangilashdan keyin HTML kodini o'chirishni unutmang.
Qanday qilib murakkab favikonlarni yaratish mumkin?
Ushbu maqolada deyarli har qanday platformada ishlaydigan favikonlarni yaratishning universal va oson usulini ta'riflashni istardim. Lekin veb-dizayn va rivojlanish uchun mukammallikka cheklov yo'q. Agar siz murakkab belgilarni yaratish haqida bilmoqchi bo'lsangiz, xizmatdan foydalanishni xohlaysiz favico.js . Turli raqamlar bilan dinamik tasvirlarni yaratishga imkon beradi. Ushbu belgi tufayli, mos keladigan yorliq faol bo'lmagan taqdirda ham o'qilmagan xabarlar sonini ko'rishingiz mumkin. Agar jonli favikonlarni onlayn yaratmoqchi bo'lsangiz, favikon generatoridan foydalanishingiz mumkin favicon.cc .
Ko'proq onlayn jeneratörlarni topasiz Bu erda .
Favikonlarni yaratish yoki savol berish bo'yicha maslahatlaringizni baham ko'rishni istasangiz, izohlaringizni kutaman!
Bu holatda nima qilish kerak?Ico?
Qanday qilib murakkab favikonlarni yaratish mumkin?