HTML / Favicon ба manifest

Favicon ба manifest

Favicon нь хөтчийн tab, bookmark, хайлтын үр дүнд хуудасны баруун талд харагдах жижиг дүрс юм. Энэ жижиг дүрс нь хэрэглэгчийн ойлголт болон брэндийн танигдахуйд чухал үүрэг гүйцэтгэдэг.

Энгийн favicon

Хамгийн хялбар арга: favicon.ico файлыг вэбсайтын root-д байрлуулах. Хөтөч автоматаар /favicon.ico хаягаас хайдаг:

html

<head>
  <!-- Favicon.ico — хуучин хөтчүүд автоматаар олдог -->
  <link rel="icon" href="/favicon.ico" sizes="32x32" />
</head>

.ico файл нь 16×16, 32×32 хэмжээний зургийг нэгд нь агуулж болдог.

PNG favicon — орчин үеийн арга

Өнөөдөр .ico-оос илүүтэй PNG ашигладаг. Хэд хэдэн хэмжээ зэрэг зааж болно:

html

<head>
  <!-- Стандарт хөтчийн tab дүрс -->
  <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />

  <!-- SVG favicon — дэлгэцийн нягтралаас үл хамааран тод -->
  <link rel="icon" type="image/svg+xml" href="/icons/favicon.svg" />
</head>

SVG favicon нь хамгийн орчин үеийн сонголт — аль ч хэмжээнд тодорхой харагдана. Chrome, Firefox, Edge дэмждэг (Safari 2022-аас дэмжиж эхэлсэн).

Apple Touch Icon

iPhone болон iPad-д хуудсыг нүүр дэлгэцэнд хадгалахад ашиглах том дүрс:

html

<head>
  <!-- iOS нүүр дэлгэцийн дүрс — 180×180 px -->
  <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
</head>

Apple Touch Icon-г .png форматаар, 180×180 px хэмжээтэй бэлдэнэ. iOS дүрсний булангийн дугуйлалтыг өөрөө нэмдэг тул зурагт нэмэх шаардлагагүй.

Web App Manifest

manifest.json нь вэбсайтыг гар утасны нүүр дэлгэцэнд аппликейшн мэт суулгах боломж олгоно. Үүнийг Progressive Web App (PWA) технологийн нэг хэсэг гэж ойлгож болно.

json

{
  "name": "Ulaanbaatar.app",
  "short_name": "UB.app",
  "description": "Монгол хэлний кодчиллын сургалтын платформ",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0b1120",
  "theme_color": "#f87171",
  "lang": "mn",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Гол талбарууд:

name — аппын бүтэн нэр (суулгах дэлгэцэнд харагдана)
short_name — нүүр дэлгэцийн дүрсний доор харагдах богино нэр (12 тэмдэгтээс бага байвал дээр)
display — standalone (хөтчийн хаягийн мөрийг нуух), fullscreen, browser
theme_color — хөтчийн toolbar-ийн өнгө (Android Chrome-д харагдана)
background_color — аппыг ачаалах үеийн дэвсгэр өнгө

HTML-д manifest-г дараах байдлаар холбоно:

html

<head>
  <link rel="manifest" href="/manifest.json" />

  <!-- iOS manifest-г дэмждэггүй тул тусдаа тохируулна -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
  <meta name="apple-mobile-web-app-title" content="UB.app" />
</head>

Бүтэн head жишээ

html

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Ulaanbaatar.app</title>

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="/icons/favicon.svg" />
  <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />

  <!-- Manifest -->
  <link rel="manifest" href="/manifest.json" />
  <meta name="theme-color" content="#0b1120" />
</head>

Favicon үүсгэх хэрэгсэл

favicon.io — текст, зураг, emoji-оос favicon үүсгэдэг үнэгүй хэрэгсэл
realfavicongenerator.net — бүх платформд зориулсан favicon багцыг нэг дороос үүсгэнэ
Figma / Illustrator — SVG favicon зурах

Дараагийн хичээлд:

HTML entity-уудыг судлана — <, >, &, зай болон тусгай тэмдэгтүүдийг HTML-д хэрхэн зөв бичих талаар үзнэ.

← Өмнөх хичээлOpen Graph meta tag Дараах хичээл →HTML entity-ууд