Favicon.kz

Favicon HTML snippet for <head>

If you just want the correct tags: copy the snippet below and adjust file paths to your project.

Recommended snippet

<!-- SVG icons (light / dark) -->
<link rel="icon" href="/icons/favicon-light.svg" type="image/svg+xml" media="(prefers-color-scheme: light)">
<link rel="icon" href="/icons/favicon-dark.svg"  type="image/svg+xml" media="(prefers-color-scheme: dark)">

<!-- ICO fallback -->
<link rel="icon" href="/favicon.ico" sizes="any">

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

<!-- Android / PWA -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">
Tip
Keep paths stable. If you move files into /icons/, keep the same structure inside your ZIP so updates stay easy.

What file goes where?

  • favicon-light.svg / favicon-dark.svg — modern browsers (tabs & UI).
  • favicon.ico — fallback.
  • apple-touch-icon.png — iOS Home Screen icon.
  • site.webmanifest — Android/PWA metadata.
Get a ready snippet from the generator
Generate ZIP and copy the snippet without guessing.

FAQ

Can I use just one SVG without dark mode?
Yes — use a single <link rel="icon" ...> without the media attributes.
Why do I need a manifest?
It improves PWA experience and Android icons. It’s optional but recommended.