← Barcha vositalar

PNG dan ICO Favikonga O'tkazgich

PNG rasmini brauzeringizda 16, 32 va 48 piksel o'lchamlarida ICO favikonga o'tkazing. Hech narsa yuklanmaydi, konvertatsiya to'liq maxfiy qoladi.
📁 Favicon .ico yaratish uchun kvadrat PNG tashlang

Aniq favicon uchun PNG-ni ICO-ga konvertatsiya qiling

Favicon - saytga o'zining vizual imzosini beradigan kichkina rasm. Siz uni brauzer yorlig'ida sahifa nomi yonida, xatcho'plar ro'yxatida, brauzer tarixining manzil satri ochiluvchi menyusida va ba'zan qidiruv natijalari yonida ko'rasiz. U kichkina, ammo katta ish qiladi: taniqli favicon foydalanuvchilarga o'nlab yorliqlar orasida sizning yorlig'ingizni topishga yordam beradi va sayt tugallangan hamda g'amxo'rlik bilan qilinganini bildiradi. Bu kichik ikona uchun klassik format - ICO, va uni yaratishning eng oson yo'li - toza kvadrat PNG-dan boshlab uni konvertatsiya qilish.

Ushbu vosita PNG rasmni to'g'ridan-to'g'ri brauzeringiz ichida ICO faviconiga aylantiradi. Konvertatsiya o'z qurilmangizdan foydalanib mahalliy tarzda amalga oshiriladi, shuning uchun tanlagan rasmingiz hech qachon serverga yuklanmaydi. Bu ikonangiz uchinchi tomonga topshirishni istamaydigan logotip yoki brend aktivi bo'lganda muhim ahamiyatga ega. Fayl tayyor bo'lgach, uni shunchaki yuklab olasiz.

Qorong'i indigo fonda brauzer yorlig'i siluetida yorqin favicon ikonasi
Favicon - saytingizni brauzer yorliqlari, xatcho'plar va tarixida aniqlaydigan kichik ikona.

ICO formati nima va nima uchun u bir nechta o'lchamni saqlaydi

ICO - Microsoft Windows-dan boshlangan ikona konteyner formati bo'lib, u yerda dasturlar, yorliqlar va papkalar uchun ishlatiladigan ikonalarni saqlaydi. Uning belgilovchi xususiyati, va nima uchun u veb-favicon-lar uchun standartga aylangan sababi shundaki, bitta ICO fayli bir vaqtning o'zida bir xil rasmni bir necha ruxsatnomada saqlashi mumkin. Bitta belgilangan bitmap o'rniga, fayl kvadrat rasmlarning kichik to'plamini o'rab, brauzer yoki operatsion tizimga ikonani chizishi kerak bo'lgan joyga mos keladigan o'lchamni tanlashga imkon beradi.

Bu haqiqatan ham foydali. Brauzer yorlig'iga juda kichik ikona kerak, xatcho'plar paneli biroz kattaroqni ishlatishi mumkin, va ish stolidagi mahkamlangan yorliq undan ham kattaroqni talab qilishi mumkin. Bir nechta o'lchamli ICO bilan, har bir kontekst o'ziga mos versiyani oladi, shuning uchun ikonangiz bitta kichik bitmapdan kattalashtirilib xira bo'lish o'rniga aniq bo'lib qoladi. ICO shuningdek shaffoflikni ham saqlaydi, bu esa dumaloq yoki noto'g'ri shakldagi logotipning chetlarini har qanday yorliq rangiga qarshi toza saqlaydi.

Tavsiya etilgan favicon o'lchamlari

Veb-sayt faviconi uchun qo'shishga arzigulik uchta o'lcham bor: 16x16, 32x32 va 48x48 piksel. 16 piksellik versiya - ko'pchilik brauzerlar yorliq va manzil satrida ko'rsatadigan versiya. 32 piksellik versiya yuqori ruxsatnomali displeylarda va ba'zi xatcho'p hamda tarix ko'rinishlarida ishlatiladi, shuning uchun u zamonaviy ekranlarda aniqlikni saqlaydi. 48 piksellik versiya Windows sayt yorliqlari kabi kattaroq kontekstlarni qamrab oladi. Ularning barchasi bitta ICO faylida joylashgani sababli, siz bitta aktivni yetkazasiz va har bir sirt o'ziga kerak bo'lganini tanlashiga ruxsat berasiz.

Hech narsa cho'zilmasligi uchun kvadrat PNG-dan boshlang. Agar manba rasmingiz to'g'ri to'rtburchak yoki ortiqcha katta bo'lsa, uni bizning rasm o'lchamini o'zgartirish vositasi bilan avval toza kvadratga kesing yoki masshtablang, so'ng konvertatsiyani ishga tushiring. Oddiy, yuqori kontrastli dizayn 16 pikselda batafsil illyustratsiyaga qaraganda ancha yaxshi o'qiladi, shuning uchun nozik matn o'rniga qalin shakllarni afzal ko'ring.

Bitta kvadrat rasm ko'k va oltin rangda porlab turgan bir nechta kichik ikona o'lchamida render qilingan
Bitta ICO fayl 16, 32 va 48 piksellik versiyalarni saqlashi mumkin, shunda har bir kontekst aniq qoladi.

Faviconni saytingizga qanday qo'shish mumkin

ICO faylingiz tayyor bo'lgach, uni saytingizga yuklang, an'anaviy ravishda sayt ildiziga favicon.ico nomi bilan. Ko'plab brauzerlar uni avtomatik topadi, ammo eng yaxshi amaliyot - HTML-ingizning head qismida uni aniq e'lon qilish, shunda hech qanday taxmin qilishga hojat qolmaydi. Quyidagicha havola tegini qo'shing:

<link rel="icon" type="image/x-icon" href="/favicon.ico">

Ushbu qatorni sahifalaringizning <head> bo'limi ichiga joylashtiring. rel="icon" atributi brauzerga bu resurs sahifa ikonasi ekanini bildiradi, href esa faylni qayerda saqlaganingizga ishora qiladi. Yuqoridagi kabi ildizga nisbiy yo'ldan foydalansangiz, xuddi shu e'lon saytingizning har bir sahifasida ishlaydi. Joylashtirgandan so'ng, yangi ikona paydo bo'lishidan oldin sahifani qattiq yangilashingiz yoki keshni tozalashingiz kerak bo'lishi mumkin, chunki brauzerlar faviconlarni qattiq ushlab turadi.

Brauzeringizda maxfiy konvertatsiya

Hamma narsa qurilmangizda sodir bo'ladi. Tanlagan PNG-ingiz mahalliy ravishda o'qiladi, dekodlanadi va ICO sifatida qayta kodlanadi, va jarayon davomida hech narsa mashinangizdan chiqmaydi. Hisob yo'q, navbat yo'q va server tomonidagi saqlash yo'q, bu esa buni hatto chiqarilmagan logotiplar yoki shartnoma ostidagi mijoz ishi uchun ham qulay qiladi. Grafikalarni tayyorlash va tartibga solishning ko'proq usullari uchun bizning to'liq rasm vositalari to'plamimizni ko'rib chiqing.

Tez-tez so'raladigan savollar

Rasmim biror joyga yuklanadimi?

Yo'q. PNG to'liq brauzeringizda, o'z qurilmangizda ICO-ga konvertatsiya qilinadi. Hech narsa serverga yuborilmaydi va hech narsa saqlanmaydi, shuning uchun rasmingiz maxfiy qoladi.

Faviconim qaysi o'lchamlarni o'z ichiga olishi kerak?

Eng foydali o'lchamlar - 16x16, 32x32 va 48x48 piksel. 16 piksellik rasm brauzer yorliqlarida ko'rsatiladi, kattaroqlari esa ikonani yuqori ruxsatnomali displeylar va ish stoli yorliqlarida aniq saqlaydi.

Nima uchun oddiy PNG o'rniga ICO ishlatish kerak?

ICO - uzoq vaqtdan beri mavjud favicon formati bo'lib, u bitta fayl ichida bir nechta o'lchamni saqlashi mumkin. Brauzerlar va operatsion tizim har bir kontekstga mos keladigan ruxsatnomani tanlaydi, shuning uchun ikona bitta bitmapdan kattalashtirilish o'rniga aniq bo'lib qoladi.

ICO PNG-imdagi shaffoflikni saqlaydimi?

Ha. ICO formati shaffoflikni qo'llab-quvvatlaydi, shuning uchun PNG-ingizning ko'rinadigan joylari saqlanadi va ikona istalgan yorliq yoki fon rangi bilan toza uyg'unlashadi.

Faviconni saytimga qanday qo'shaman?

ICO faylini saytingizga, odatda ildizda favicon.ico sifatida yuklang, va HTML-ingizning head qismiga link rel icon type image x-icon href slash favicon.ico kabi havola tegini qo'shing. So'ng uni ko'rish uchun brauzer keshini tozalang.

Manba rasmim kvadrat emas. Nima qilishim kerak?

Uni cho'zilmasligi uchun avval kvadratga kesing yoki masshtablang. Toza kvadrat yaratish uchun bizning rasm o'lchamini o'zgartirish vositamizdan foydalanishingiz mumkin, so'ng eng yaxshi ko'rinishli favicon uchun uni ICO-ga konvertatsiya qiling.