Sayt uchun favikon yaratish: foydali maslahatlar va xizmatlar

  1. Favikonni qanday yaratish kerak
  2. Fotoshopda favikonni qanday qilish kerak
  3. Favikonni qanday saqlash kerak
  4. Favikon saytini qanday qo'shish kerak
  5. Favikonni qanday almashtirish kerak
  6. 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
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 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
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
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
Keyin tuval ustiga belgi, xat yoki boshqa rasm qo'shishingiz 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
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!

Новости

Социальные сети в России, зима 2015-2016 Цифры, тренды, прогнозы | Блог Brand Analуtics — все о бренд мониторинге и социальной аналитике
Представляем данные регулярного исследования активной аудитории социальных сетей в России, зима 2015-2016. В исследовании представлены данные по аудитории, возрасту, полу и региональному распределению

SMM маркетинг от А до Я
Развитие социальных сетей породило новую огромную бизнес отрасль — СММ маркетинг. Это когда мы приходим с нашим продуктом в какую-нибудь соцсеть, находим там нашу целевую аудиторию, и предлагаем ей наш

Полезно знать
20.02.2014 Что такое Pinterest. Визуальный PR и маркетинг Pinterest или ПИНТЕРЕСТ – социальная сеть, использующая вместо текстов картинки и изображения, которые можно добавлять в аккаунт,

Фейсбук Моя страница: ВХОД на свою страницу Facebook
Фейсбук (Facebook) Моя страница — это личная страница каждого зарегистрированного пользователя самой большой в мире социальной сети.  Фейсбук даёт возможность людям с разных уголков Земли общаться между

Анализ социальных сетей
АНАЛИЗ СОЦИАЛЬНЫХ СЕТЕЙ (social network analysis) - новое направление структурного подхода, основными целями которого являются исследование взаимодействий между социальными объектами и выявление условий

Социальные сети для продвижения бизнеса: какие выбрать?
  Привет, друзья! Социальные сети занимают львиную часть времени в нашей жизни. Ежедневный просмотр новостей, любимых групп и переписка с друзьями – это любимое дело большинства молодых людей. Вот и

ВРЕДНОЕ ВЛИЯНИЕ СОЦИАЛЬНЫХ СЕТЕЙ НА ЗДОРОВЬЕ ЧЕЛОВЕКА - VI Студенческий научный форум (15 февраля - 31 марта 2014 года)
ВРЕДНОЕ ВЛИЯНИЕ СОЦИАЛЬНЫХ СЕТЕЙ НА ЗДОРОВЬЕ ЧЕЛОВЕКА Гущина Н. В., Люлина Н.В. С распространением всемирной паутины рост социальных сетей по всему миру стал глобальным явлением. С каждым

Влияние социальных сетей на подростков. Пропаганда суицида в сетях
Почему мы любим интернет? Почему молодым людям, подросткам сказать «Привет» стало проще, познакомившись в интернете, чем просто подойти в реальности? Почему все «сидят» в социальных сетях? Социальные сети

Маркетинг в социальных сетях (SMM) для продвижения компании
Деятельность в социальных сетях, на блогах и форумах по повышению лояльности клиентов получила название SMM — от аббревиатуры английского звучания этого термина – Social Media Marketing. Аудитория

Фейсбук (Facebook) - что это за сеть: как пользоваться ФБ
Фейсбук — это самая популярная и большая социальная сеть в мире. Если Вам интересно узнать больше о Facebook, про то как пользоваться сетью и о некоторых «фишках» ФБ — этот материал именно для вас!