A favicon is the small icon shown in the browser tab, bookmarks and search results. Just 16x16 or 32x32 pixels, but your brand appears in every tab. A site without a favicon looks empty and unprofessional.
Why it matters
1) Branding — your logo in every tab. 2) Users find you among many tabs. 3) Trust. 4) Mobile — the app icon on "Add to Home Screen". 5) Shown in Google's mobile results.
Required sizes
1) 16x16, 32x32 — browser tab. 2) 180x180 — Apple touch icon (iOS). 3) 192x192, 512x512 — Android/PWA. 4) favicon.ico — old browsers.
Design rules
1) Simple — details aren't visible at small size. 2) The most recognizable part of your logo. 3) NO full text. 4) High contrast. 5) Transparent background (PNG).
Tools
1) favicon.io — from text, emoji or image. 2) realfavicongenerator.net — the most complete. 3) Figma/Canva.
Linking in HTML
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
SVG favicon — modern
Modern browsers support SVG favicons — sharp at any size, small file.
Dark mode favicon
In dark mode the favicon can adapt via @media (prefers-color-scheme: dark) inside the SVG.
Checking
1) Visible in the tab? 2) realfavicongenerator checker. 3) "Add to Home Screen". 4) Clear cache after changing.
Common mistakes
1) Only favicon.ico. 2) Too complex a design. 3) Wrong size. 4) File not in the root.
Sayt.uz practice
Sayt.uz has a full favicon set: tab, Apple touch, Android, SVG.