Favicon ģenerātors

Augšupielādē jebkuru attēlu un ģenerē pilnu favicon pakotni — ICO, PNG visām platformām, iOS pieskāriena ikonu, Android Chrome ikonas, Windows flīzi, tīmekļa manifestu un pārlūka konfigurāciju.

Novelc attēlu šeit vai noklikšķini, lai pārlūkotu

PNG, SVG, JPG, WEBP · Ieteicams 512×512 px vai lielāks

Kas ir iekļauts pakotnē?

favicon.ico — Mantotā daudzmēroga ICO (16×16, 32×32, 48×48) vecām pārlūkprogrammām un Windows.
favicon-96x96.png — 96×96 PNG modernām pārlūkprogrammām. Atsauce tieši <head>.
favicon.svg — SVG favicon, iekļauts, ja avota attēls ir SVG. Mērogojams jebkurā izmērā un atbalsta tumšo režīmu.
apple-touch-icon.png — 180×180 ikona iOS sākuma ekrāna pievienošanai.
android-chrome-192x192.png un android-chrome-512x512.png — Ikonas Android Chrome un PWA.
favicon-16x16.png un favicon-32x32.png — Mantotie PNG izmēri atpakaļ saderībai.
mstile-150x150.png — Windows flīzes attēls; ikona centrēta 60% izmērā.
site.webmanifest — Tīmekļa lietotnes manifests JSON ar nosaukumu, tēmas krāsu un Android ikonām.
browserconfig.xml — Windows/IE pārlūka konfigurācija piespraustajai vietnes flīzei.

HTML <head> Code

1
Extract the downloaded ZIP to your website's root — the folder that contains your index.html.
2
Paste the generated HTML snippet into the of every page, or into your shared HTML template/partial.
3
Verify the setup: open your browser's DevTools → Network tab, reload the page, and confirm favicon.ico loads from the root.

1
Place all files in your public/ directory. Next.js serves everything in public/ at the root path.

App Router — add a metadata export in app/layout.tsx:

import type { Metadata } from 'next';

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon-96x96.png', sizes: '96x96', type: 'image/png' },
      { url: '/favicon.svg', type: 'image/svg+xml' },
      { url: '/favicon.ico' },
    ],
    apple: '/apple-touch-icon.png',
  },
  manifest: '/site.webmanifest',
};

3
Pages Router — paste the HTML snippet into pages/_document.tsx inside (from next/document), or into your shared layout component.

Next.js App Router also supports special filenames: dropping favicon.ico directly in app/ makes it auto-detected. The metadata API approach above gives more control and works for all icon types.

1
Extract the ZIP into your project's public/ directory. Nuxt serves everything in public/ at the root URL.

Add the icons to your app.vue or a global layout using useHead():

// app.vue or layouts/default.vue
useHead({
  link: [
    { rel: 'icon', type: 'image/png', href: '/favicon-96x96.png', sizes: '96x96' },
    { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
    { rel: 'shortcut icon', href: '/favicon.ico' },
    { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
    { rel: 'manifest', href: '/site.webmanifest' },
  ],
})

Alternatively, configure icons via nuxt.config.ts using app.head:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', type: 'image/png', href: '/favicon-96x96.png', sizes: '96x96' },
        { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
        { rel: 'shortcut icon', href: '/favicon.ico' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
        { rel: 'manifest', href: '/site.webmanifest' },
      ],
    },
  },
})

The nuxt.config.ts approach applies site-wide automatically. Use useHead() when you need per-page or per-layout overrides.

1
Place all favicon files in your static assets directory (commonly public/).

Make sure static file serving is enabled in Express:

app.use(express.static(path.join(__dirname, 'public')));

3
Paste the HTML snippet into your HTML template (e.g. views/layout.ejs, views/layout.pug, or whichever templating engine you use) inside .

Padomi labākajiem rezultātiem

Labākajam rezultātam izmanto kvadrāta SVG — SVG favicons mērogojas ideāli un atbalsta tumšo režīmu.
Ja izmanto rastra attēlu, izmanto vismaz 512×512 px, lai samazinātos izmēri būtu asi.
Caurspīdīgs fons darbojas vislabāk. iOS aizpilda caurspīdīgos apgabalus ar melnu — izmanto opciju "Pievienot fonu un apmales".
Izvēlies tēmas krāsu, kas atbilst zīmolam — tā nokrāso pārlūka apmali Android un iestata PWA sākotnējo ekrānu.