Favicon — brauzer tabida, xatcho'pda va qidiruv natijalarida ko'rinadigan kichik ikonka. Atigi 16x16 yoki 32x32 piksel, lekin brendingiz har tabda ko'rinadi. Favicon'siz sayt — bo'sh, professional emas ko'rinadi.
Nima uchun muhim?
1) Brending — har tabda logongiz. 2) Foydalanuvchi ko'p tab orasidan sizni topadi. 3) Ishonch — professional sayt belgisi. 4) Mobil — "Bosh ekranга qo'shish"da ilova ikonkasi. 5) Google qidiruv natijasida (mobil) ko'rinadi.
Kerakli o'lchamlar
Zamonaviy sayt bir nechta o'lcham talab qiladi: 1) 16x16, 32x32 — brauzer tab. 2) 180x180 — Apple touch icon (iOS). 3) 192x192, 512x512 — Android/PWA. 4) favicon.ico — eski brauzerlar uchun.
Dizayn qoidalari
1) Sodda — kichik o'lchamda detal ko'rinmaydi. 2) Logongizning eng tanish qismi (harf, belgi). 3) To'liq matn YO'Q — o'qilmaydi. 4) Kontrastli — fon bilan ajralib tursin. 5) Transparent fon (PNG).
Yaratish vositalari
1) favicon.io — matn, emoji yoki rasmdan favicon. Bepul. 2) realfavicongenerator.net — eng to'liq, barcha o'lcham va HTML kodini beradi. 3) Figma/Canva — qo'lda dizayn. 4) Logongizdan SVG → barcha format.
HTML'ga ulash
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
SVG favicon — zamonaviy
Modern brauzerlar SVG favicon qo'llab-quvvatlaydi — har o'lchamda aniq, kichik fayl. Dark mode uchun ham moslashtirsa bo'ladi (media query SVG ichida).
Dark mode favicon
Foydalanuvchi qorong'u rejimda bo'lsa, favicon ham moslashishi mumkin. SVG ichida @media (prefers-color-scheme: dark) bilan rangni o'zgartirish.
Tekshirish
1) Brauzer tab — ko'rinyaptimi? 2) realfavicongenerator checker. 3) Telefon "Bosh ekranга qo'shish". 4) Eski cache — favicon o'zgarsa, brauzer keshini tozalang.
Tarqalgan xatolar
1) Faqat favicon.ico — mobil/PWA uchun yetmaydi. 2) Juda murakkab dizayn — kichikda ko'rinmaydi. 3) Noto'g'ri o'lcham — bulanib ko'rinadi. 4) Faylni root'ga qo'ymaslik.
Sayt.uz amaliyot
Sayt.uz to'liq favicon to'plamiga ega: tab, Apple touch, Android, SVG. Builder bilan yaratilgan saytlarga ham foydalanuvchi o'z logosini favicon sifatida yuklashi mumkin.