Favicon va web manifest: sayt ikonkalari, apple-touch-icon va theme-color

Qisqacha: Bugungi sayt uchun to'rtta ikonka qatori yetarli: favicon.ico (eski brauzerlar uchun), SVG favicon (qorong'i rejimni ham biladi), apple-touch-icon (iPhone bosh ekrani uchun 180×180 PNG) va manifest.webmanifest (Android va o'rnatiladigan ilova uchun). Manifest — ilova nomi, ikonkalari va ranglari yozilgan JSON fayl. theme-color esa telefonda brauzer panelini sayt rangiga bo'yaydi.

Bu darsda

• Brauzer yorlig'i, bosh ekran va ilova ro'yxati uchun qaysi ikonka kerakligini bilasiz.
• favicon.ico va SVG favicon'ni birga to'g'ri ulaysiz, SVG'ga qorong'i rejim qo'shasiz.
• apple-touch-icon ni to'g'ri o'lcham va fon bilan tayyorlaysiz.
• manifest.webmanifest faylini yozasiz va maskable ikonka nima ekanini tushuntirasiz.
• theme-color va color-scheme meta teglarini qorong'i rejim bilan ishlatasiz.

Oldin bilishingiz kerak: head anatomiyasi va viewport, Rasm formatlari, JSON: dasturlar tili, Ijtimoiy tarmoq kartalari: Open Graph.

1. Nega bu kerak?

O'tgan darsda «Bahor» havolasi Telegram'da chiroyli karta bo'lib chiqadigan bo'ldi. Endi Rustam aka saytni o'z telefonida ochdi va ikkita narsani sezdi.

Birinchisi — brauzer yorlig'ida sayt nomi yonida kulrang globus turibdi. Boshqa saytlarning esa o'z belgisi bor. Yigirmata ochiq yorliq orasida «Bahor» ni topish qiyin.

Ikkinchisi — u "Bosh ekranga qo'shish" ni bosdi. Telefon ekranida ilova o'rniga bir harfli kulrang kvadrat paydo bo'ldi. Ilova tugmalari orasida u yetim ko'rinadi.

Ikkala muammo ham head dagi bir necha qator va bir nechta rasm fayli bilan hal qilinadi. Bugun shularni qo'shamiz.

2. Ikonka qayerlarda chiqadi

Favicon (favorite icon — "sevimli ikonka") — saytning kichik belgisi. Nomi eski: dastlab u faqat "Sevimlilar" (xatcho'plar) ro'yxatida chiqardi. Bugun esa u ko'p joyda ko'rinadi:

Har bir joyning o'z talabi bor. Lekin hammasini qamrash uchun o'nlab fayl kerak emas. 2026-yilda to'rtta qator yetarli. Ularni birma-bir ko'ramiz.

3. Favicon: ICO va SVG

3.1 favicon.ico — eski, lekin hali kerak

ICO — Windows'ning ikonka formati. Uning ichida bir nechta o'lcham birga saqlanishi mumkin: 16×16, 32×32, 48×48. Xuddi matryoshka kabi — bitta qutida bir nechta rasm.

Brauzerlarning qiziq odati bor. Agar head da ikonka ko'rsatilmagan bo'lsa, ular o'zlari saytning ildizidan /favicon.ico ni so'raydi. Fayl yo'q bo'lsa, server jurnalida 404 xatosi paydo bo'ladi. Shuning uchun favicon.ico ni loyiha ildiziga qo'yish yaxshi odat.

<link rel="icon" href="/favicon.ico" sizes="32x32">

• rel="icon" — "bu sahifaning ikonkasi".
• href="/favicon.ico" — / bilan boshlanadi, ya'ni sayt ildizidan. Ko'p sahifali sayt darsida ko'rgan edik: shunda menyu/ papkasidagi sahifa ham xuddi shu faylni topadi.
• sizes="32x32" — fayl ichidagi o'lcham. Harf x, ko'paytirish belgisi × emas.

Maslahat: Eski saytlarda rel="shortcut icon" ni ko'rasiz. shortcut so'zi Internet Explorer davridan qolgan. Bugun rel="icon" yetarli.

3.2 SVG favicon — bitta fayl, har qanday o'lcham

Rasm formatlari darsida ko'rdik: SVG — vektor rasm. U kattalashtirilsa ham xiralashmaydi. Demak bitta SVG fayl 16 piksellik yorliqda ham, 512 piksellik ekranda ham tiniq chiqadi. Hajmi ham odatda PNG'dan kichik.

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

type="image/svg+xml" — fayl turi (MIME turi). Uni qo'llamaydigan brauzer bu qatorni o'tkazib yuboradi va favicon.ico ni oladi.

SVG favicon'ni Chrome, Edge va Firefox ko'p yillardan beri qo'llaydi. Safari esa 26-versiyadan (2025-yil sentabr) qo'shildi. Shuning uchun ikkala qator birga yoziladi: yangi brauzer SVG'ni, eskisi ICO'ni oladi.

Diqqat: favicon.ico qatoriga sizes="any" emas, sizes="32x32" yozing. Chrome sizes="any" ni ko'rsa, ba'zan SVG o'rniga ICO'ni tanlab qo'yadi. Eski qo'llanmalarda any uchraydi.

3.3 Qorong'i rejimni biladigan favicon

Tasavvur qiling: «Bahor» belgisi — to'q yashil choynak. Oq yorliqda u ajoyib ko'rinadi. Qorong'i rejimda esa to'q yashil qora fonda yo'qolib qoladi.

SVG fayl ichida kichik uslub (stil) yozish mumkin. U tizim qorong'i rejimda bo'lsa, rangni almashtiradi. favicon.svg fayli:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .belgi { fill: #2f6b3a; }
    @media (prefers-color-scheme: dark) {
      .belgi { fill: #8fd19e; }
    }
  </style>
  <circle class="belgi" cx="16" cy="16" r="14"/>
</svg>

style ichidagi qatorlar — CSS. Hozir ularni to'liq tushunish shart emas, CSS nima darsidan boshlab o'rganamiz. Ma'nosi oddiy:

• .belgi { fill: #2f6b3a; } — "belgini to'q yashilga bo'ya".
• @media (prefers-color-scheme: dark) — "agar foydalanuvchi qorong'i rejimni tanlagan bo'lsa".
• ichidagi qator — "unda och yashilga bo'ya".

Rang kodlari #2f6b3a — o'n oltilik sanoq darsidagi hex ranglar. SVG ichidagi circle kabi teglarni SVG darsida ko'rgansiz.

Bu uslub Chrome, Edge va Firefox'da ishlaydi. Qo'llamaydigan brauzer asosiy rangni ko'rsatadi — hech narsa buzilmaydi.

Tekshirib ko'ring: Nega SVG favicon bo'lsa ham favicon.ico ni o'chirib tashlamaymiz?

4. apple-touch-icon: iPhone bosh ekrani

iPhone'da Safari orqali "Bosh ekranga qo'shish" (Add to Home Screen) bosilganda, iOS ikonkani shu qatordan oladi:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Talablar:

• O'lcham 180×180 piksel, PNG. Bu zamonaviy iPhone'lar uchun kerakli o'lcham. Kichikroq ekranlarga iOS o'zi kichraytiradi.
• Shaffof fon yo'q. iOS shaffof joylarni qora rang bilan to'ldiradi. Yashil choynak qora kvadrat ichida chiqadi. Fonni o'zingiz bo'yang — masalan, oq yoki krem.
• Chetdan biroz joy qoldiring. iOS burchaklarni o'zi yumaloqlaydi. Belgi chetga tegib tursa, burchaklari kesiladi.

Bu qator ham bo'lmasa, iOS saytning ildizidan /apple-touch-icon.png ni o'zi qidiradi. Shuning uchun faylni aynan shu nom bilan ildizga qo'yish qulay.

Bo'sh joyni to'ldiring: apple-touch-icon rasmi necha pikselli bo'lishi kerak?

5. Web manifest: sayt ilovaga aylanganda

5.1 Manifest nima

Web manifest (veb-ilova manifesti) — sayt haqidagi "ilova pasporti". Bu JSON fayl, ichida ilova nomi, ikonkalari, ranglari va qanday ochilishi yozilgan. Android'da "Bosh ekranga qo'shish" yoki kompyuterdagi Chrome'da "Ilovani o'rnatish" bosilganda brauzer shu faylni o'qiydi.

Hayotdan o'xshatish: yangi xodimning bejigi (badge). Unda ismi, surati va lavozimi bor. Qo'riqchi bejikka qarab, uni tanib, ichkariga kiritadi. Manifest ham telefonga "bu sayt kim, qanday ko'rinadi" deb aytadi.

head ga bitta qator qo'shiladi:

<link rel="manifest" href="/manifest.webmanifest">

Fayl kengaytmasi — .webmanifest. Standart shuni tavsiya qiladi. manifest.json nomi ham ishlaydi, eski loyihalarda ko'p uchraydi.

5.2 «Bahor» manifesti

Loyiha ildizida manifest.webmanifest faylini yarating:

{
  "name": "Choyxona «Bahor»",
  "short_name": "Bahor",
  "description": "Chilonzordagi choyxona: menyu va stol band qilish",
  "lang": "uz",
  "id": "/",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#fdf6ec",
  "theme_color": "#2f6b3a",
  "icons": [
    {
      "src": "/assets/images/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/assets/images/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/assets/images/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

JSON darsidagi qoidalarni eslang: kalitlar qo'shtirnoqda, oxirgi elementdan keyin vergul yo'q, izoh yozib bo'lmaydi.

5.3 Maydonlar

display ning to'rt qiymati bor:

• browser — oddiy brauzer yorlig'ida ochiladi. Manifest bo'lmagandagidek.
• minimal-ui — alohida oyna, lekin orqaga qaytish kabi eng kerakli tugmalar bor.
• standalone — alohida oyna, manzil qatori yo'q. Xuddi oddiy ilova. Eng ko'p ishlatiladi.
• fullscreen — butun ekran, hatto soat va batareya ham yashirinadi. O'yinlar uchun.

id nega kerak? Keyinchalik start_url ni o'zgartirsangiz (masalan /menyu/ ga), brauzer buni "yangi ilova" deb o'ylamasligi uchun. id o'zgarmasa, ilova o'sha-o'sha.

5.4 Nega aynan 192 va 512

Chrome ilovani o'rnatishni taklif qilishi uchun manifestda kamida 192×192 va 512×512 o'lchamdagi ikonka bo'lishi kerak. 192 — bosh ekran uchun, 512 — ilova ochilayotgandagi katta ekran (splash screen) uchun. Yana name yoki short_name, start_url, display va HTTPS kerak. Service worker (fonda ishlaydigan maxsus skript, PWA darsida o'rganamiz) Chrome'da endi o'rnatish uchun majburiy emas.

Tekshirib ko'ring: Mehmon «Bahor» ikonkasini bosh ekranga qo'shdi va bosdi. Qaysi sahifa ochiladi va manzil qatori ko'rinadimi?

6. Maskable ikonka

6.1 Muammo: har telefonning o'z shakli

Android'da ikonka shaklini telefon ishlab chiqaruvchisi yoki foydalanuvchi tanlaydi: doira, yumaloq kvadrat, tomchi. Oddiy kvadrat ikonkani telefon oq doira ichiga kichraytirib qo'yadi — ikonka kichkina va begonadek ko'rinadi.

Maskable ikonka (maskable — "niqoblanadigan") — chetigacha rang bilan to'ldirilgan ikonka. Telefon uni istalgan shaklda qirqib oladi, xuddi pechene qolipi xamirdan shakl kesib olgandek.

6.2 Xavfsiz zona

Qolip chetlarni kesadi. Shuning uchun muhim qism — choynak belgisi — markazdagi xavfsiz zona ichida bo'lishi kerak. Bu ikonka markazidagi doira, uning diametri ikonka enining 80% i. 512×512 ikonkada — markazdagi taxminan 410 piksellik doira.

┌──────────────────────┐  ← fon chetigacha bo'yalgan
│    ╭────────────╮    │
│   │   choynak    │   │  ← belgi shu doira ichida
│    ╰────────────╯    │
└──────────────────────┘
       doira = 80%

Ikonkani maskable.app saytida tekshirasiz: u ikonkangizni turli shakllarda qirqib ko'rsatadi.

6.3 Nega alohida fayl

Bitta ikonkaga "purpose": "any maskable" deb yozish mumkin. Lekin bu yomon fikr. Maskable ikonkada belgi kichikroq va atrofida ko'p fon bor. U oddiy joyda (masalan, kompyuterda) g'alati, kichkina ko'rinadi. Shuning uchun ikki xil fayl: oddiy (purpose yozilmasa — any) va alohida maskable.

7. theme-color va color-scheme

7.1 theme-color: brauzer panelining rangi

<meta name="theme-color" content="#2f6b3a">

Android'dagi Chrome manzil qatori va yuqori panelni shu rangga bo'yaydi. Sayt brauzer bilan bir butun bo'lib ko'rinadi. Kompyuterda esa bu rang faqat o'rnatilgan ilova oynasining sarlavhasida chiqadi.

Qorong'i rejim uchun ikkita qator va media atributi:

<meta name="theme-color" content="#2f6b3a"
      media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#16301b"
      media="(prefers-color-scheme: dark)">

media ichidagi yozuv — SVG faviconda ko'rgan o'sha shart. Brauzer foydalanuvchi rejimiga mos qatorni tanlaydi.

Diqqat: Safari 26 (2025) dan boshlab iPhone va Mac'dagi Safari theme-color ni ishlatmay qo'ydi. U panel rangini sahifa fonining rangidan oladi. Demak theme-color bugun asosan Android'dagi Chrome va shunga o'xshash brauzerlar uchun. Eski qo'llanmalarda "Safari ham qo'llaydi" deb yozilgan bo'lishi mumkin.

7.2 color-scheme: "men qorong'i rejimni ham bilaman"

Qorong'i rejimdagi telefonda saytni ochsangiz, oppoq ekran ko'zni qamashtiradi. Buning sababi: brauzer sayt faqat yorug' rejim uchun yozilgan deb hisoblaydi.

<meta name="color-scheme" content="light dark">

Bu qator brauzerga aytadi: "sahifa ikkala rejimni ham ko'tara oladi". Shunda brauzer o'zining standart ranglarini foydalanuvchi rejimiga moslaydi. Hozirgi «Bahor» sahifasida hali CSS yo'q. Qorong'i rejimda u qora fonda oq matn bilan chiqadi. Forma maydonlari, tugmalar va aylantirish chizig'i (scrollbar) ham qorong'i bo'ladi.

Nega bu meta tegda, CSS'da emas? CSS'da ham xuddi shunday color-scheme xususiyati bor. Lekin meta teg brauzerga ertaroq, sahifa chizilishidan oldin yetib boradi. Shunda qorong'i rejimda sahifa ochilayotganda oq "chaqnash" bo'lmaydi.

Maslahat: Keyinroq CSS'da o'z ranglaringizni yozsangiz, qorong'i rejim ranglarini ham o'zingiz berishingiz kerak bo'ladi. Buni Foydalanuvchi afzalliklari va Qorong'i rejim va temalash darslarida qilamiz.

Tekshirib ko'ring: color-scheme va theme-color ning farqi nima?

8. «Bahor» sayti: yangi head va fayllar

Loyiha papkasi endi shunday:

choyxona/
├─ index.html
├─ favicon.ico
├─ favicon.svg
├─ apple-touch-icon.png
├─ manifest.webmanifest
├─ assets/
│  └─ images/
│     ├─ icon-192.png
│     ├─ icon-512.png
│     ├─ icon-maskable-512.png
│     └─ og-bahor.jpg
├─ menyu/
└─ blog/

head ga qo'shiladigan blok — Open Graph'dan keyin:

<!-- Ikonkalar va ilova -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2f6b3a"
      media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#16301b"
      media="(prefers-color-scheme: dark)">
<meta name="color-scheme" content="light dark">

Bu blok saytning hamma sahifasida bir xil bo'ladi. Open Graph esa har sahifada o'zgarardi — farqiga e'tibor bering.

Ikonkalarni qo'lda chizish shart emas. realfavicongenerator.net kabi saytlar bitta katta rasmdan kerakli hamma fayllarni yasab beradi. Faqat natijani bu darsdagi ro'yxat bilan solishtiring: ba'zi generatorlar eskirgan qatorlarni ham qo'shadi — ular pastdagi xatolar bo'limida.

8.1 Tekshirish

1. Live Server bilan oching. / bilan boshlangan yo'llar file:// da ishlamaydi: u yerda / diskning ildizi, C:\ bo'lib qoladi.
2. Yorliqqa qarang — choynak ko'rinishi kerak.
3. DevTools → Application → Manifest (F12). Bu yerda Chrome manifestdagi nom, ranglar va ikonkalarni ko'rsatadi. Xato bo'lsa, qizil xabar chiqadi. DevTools II darsida Application paneli bilan tanishgansiz.

Diqqat: Brauzer favicon'ni juda qattiq keshlaydi. Faylni almashtirdingiz, lekin yorliqda eskisi turibdi — bu normal. Favicon manzilini to'g'ridan-to'g'ri yangi yorliqda oching va Ctrl + Shift + R bosing. Yoki faylga yangi nom bering.

9. Ko'p uchraydigan xatolar

9.1 Manifestda JSON xatosi

Oxirgi elementdan keyin vergul qolib ketdi:

{
  "name": "Choyxona «Bahor»",
  "short_name": "Bahor",
}

Chrome DevTools'ning Application → Manifest bo'limida shunday xabar chiqadi:

Manifest: Line: 4, column: 1, Syntax error.

Tarjimasi: "Manifest: 4-qator, 1-ustun, sintaksis xatosi". Xato 4-qatordagi } da ko'rsatiladi, lekin sababi undan oldingi qatordagi vergul. JSON darsidagi qoida: JSON'da ortiqcha vergulga ruxsat yo'q. Sintaksis xatosi bo'lsa, butun manifest e'tiborsiz qoldiriladi.

9.2 sizes da × belgisi

"sizes": "192×192" — ko'paytirish belgisi bilan. Brauzer buni o'lcham deb tanimaydi va ikonkani tashlab ketadi. Tuzatish: oddiy lotin x harfi: 192x192.

9.3 Shaffof apple-touch-icon

iPhone bosh ekranida belgi qora kvadrat ichida chiqdi. Tuzatish: PNG'ga to'liq fon bering.

9.4 href da nisbiy yo'l

<!-- ❌ faqat bosh sahifada ishlaydi -->
<link rel="icon" href="favicon.svg" type="image/svg+xml">

Bosh sahifada ikonka bor, menyu/ sahifasida esa yo'q. Chunki u yerda brauzer menyu/favicon.svg ni qidiradi. Tuzatish: /favicon.svg — sayt ildizidan.

9.5 Eskirgan qatorlarni ko'chirish

Internetdagi eski maslahatlardan quyidagilar uchraydi. Bugun ular kerak emas:

10. Mashqlar

1-mashq (oson): To'rt qator

Yangi loyiha — «Bahor» choyxonasining yetkazib berish sayti. Uning ildizida favicon.ico, logo.svg, apple-touch-icon.png va app.webmanifest fayllari bor. head uchun to'rtta ikonka qatorini yozing.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/logo.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/app.webmanifest">

2-mashq (o'rta): Manifestni tuzating

Bu manifestda 4 ta xato bor. Toping va tuzating.

{
  "name": "Bahor yetkazib berish",
  "short_name": "Bahor Yetkazib Berish Xizmati",
  "start_url": "/",
  "display": "ilova",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192×192" },
    { "src": "/icon-512.png", "sizes": "512x512" },
  ]
}

{
  "name": "Bahor yetkazib berish",
  "short_name": "Bahor",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

3-mashq (qiyin): Qorong'i rejim to'plami

Rustam aka qorong'i rejimdagi telefonida saytni ochdi va uch narsani so'radi:

1. Yorliqdagi belgi qora fonda ko'rinmayapti.
2. Android'da brauzer paneli oppoq, sayt esa qorong'i bo'lsin.
3. Sahifa ochilganda ko'zni qamashtiradigan oq ekran bo'lmasin.

Har biri uchun kerakli kodni yozing va u qaysi qurilmada ishlashini ayting.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .belgi { fill: #2f6b3a; }
    @media (prefers-color-scheme: dark) {
      .belgi { fill: #8fd19e; }
    }
  </style>
  <circle class="belgi" cx="16" cy="16" r="14"/>
</svg>

<meta name="theme-color" content="#2f6b3a"
      media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#16301b"
      media="(prefers-color-scheme: dark)">

<meta name="color-scheme" content="light dark">

11. Real ishda

• Brend. Kompaniyada ikonkalarni dizayner tayyorlaydi, dasturchi esa ularni to'g'ri o'lchamda eksport qilib, head va manifestga ulaydi. Bu ish odatda loyiha boshida bir marta qilinadi.
• PWA. Manifest — "o'rnatiladigan veb-ilova"ning (PWA) birinchi qismi. Uchrashuv band qilish, yetkazib berish, onlayn do'kon ilovalari ko'pincha PWA bo'ladi. To'liq PWA'ni PWA: o'rnatiladigan veb ilova darsida quramiz.
• Freymvorklar. Next.js va Vite loyihalarida favicon.ico, favicon.svg va manifest maxsus papkaga qo'yiladi va teglar avtomatik yaratiladi. Lekin qaysi fayl nima uchun kerakligini bilmasangiz, xatoni topa olmaysiz.
• Tekshiruv. Lighthouse va DevTools'ning Application paneli manifestdagi xatolarni ko'rsatadi. Buni deploydan oldin tekshirish — yaxshi odat.

Xulosa

• Minimal to'plam: favicon.ico (sizes="32x32"), SVG favicon, apple-touch-icon (180×180, fonli PNG) va manifest.webmanifest.
• SVG favicon ichidagi uslub bilan qorong'i rejimda rangini o'zgartiradi.
• Manifest — JSON: name, short_name, start_url, display, icons (192 va 512), ranglar.
• Maskable ikonka chetigacha to'ldiriladi, belgi markazdagi 80% li doira ichida bo'ladi.
• theme-color — brauzer paneli rangi (asosan Android Chrome); color-scheme — sahifaning standart ranglari qorong'i rejimga moslashishi.

Keyingi dars: Kam ma'lum, lekin foydali meta teglar — maxfiylik, iPhone'dagi telefon raqamlari va sayt egaligini tasdiqlash uchun kichik, lekin foydali teglar.

Manbalar

• MDN: "Web app manifests", "<meta name="theme-color">", "<meta name="color-scheme">" — developer.mozilla.org
• web.dev: "Adaptive icon support in PWAs with maskable icons" — web.dev
• Evil Martians: "How to Favicon: six files that fit most needs" — evilmartians.com
• WebKit: "WebKit Features in Safari 26.0" — webkit.org