Generator for favicon-ressurser

Generer en komplett favicon-pakke — ICO, PNG-er, Apple touch icon, PWA-ikoner, web-manifest og HTML-snutten — lokalt i nettleseren.

Kildebilde
Slipp eller velg en PNG, JPEG, WebP eller SVG. Alle plattformer bruker dette bildet med mindre du overstyrer det under.
Nettstedsinformasjon
Brukes av manifestet, apple-touch-icon og HTML-snutten.

Vises når appnavnet er for langt for flaten.

Valgfritt. Utelates fra manifestet når det er tomt.

Der den installerte PWA-en åpnes.

Prefiks som legges til hver href i HTML-snutten og hver src i manifestets icons-array.

Styrer manifestets theme_color og HTML-taggen <meta name="theme-color">.

Manifestets background_color. Brukes av nettlesere til å tegne startskjermer for PWA-er.

Favicon for skrivebordsnettleser
Styrer favicon.ico, favicon-16x16.png, favicon-32x32.png og (når kilden er SVG) favicon.svg.

Visuelt pusterom rundt kilden inne i ikonet.

Skrivebordsnettleserfane
Skrivebordsnettleserfane (dark)
Søkemotorresultat
iOS-webklipp
Styrer 180×180 apple-touch-icon.png som brukes på iOS-startskjermer.

Apple-ikoner må være ugjennomsiktige, så dette fyllet brukes alltid.

Visuelt pusterom rundt kilden inne i ikonet.

iOS-startskjerm
PWA-ikoner
Styrer pwa-192x192.png, pwa-512x512.png og maskable-variantene.

Visuelt pusterom rundt kilden inne i ikonet.

Det W3C-anbefalte trygge området er 40 %. Kildeinnholdet forblir synlig innenfor enhver plattformmaske.

Windows-oppgavelinje
Android-launcher
Generert pakke
Klikk på Generer for å rendre hver ressurs, bygge zip-filen og kopiere HTML-snutten.
Ingen pakke ennå
Velg et bilde og klikk på Generer for å sette sammen favicon-pakken.

Hva verktøyet genererer

Denne generatoren gjør et enkelt bilde om til en komplett, moderne favorittikon-pakke – en .ico-fil med flere størrelser for eldre nettlesere, PNG-variantene 16 / 32 / 180 / 192 / 512, en valgfri original .svg, en site.webmanifest for PWA-er, og HTML-snutten du limer inn i <head>. Hver byte produseres i nettleseren din; ingen opplasting, ingen server, ingen analyse.

Hva pakken inneholder

  • favicon.ico – flere bilder (16 / 32 / 48) for nettleserfaner, bokmerker og gamle Windows-snarveier.
  • favicon-16x16.png og favicon-32x32.png – moderne PNG-varianter brukt av dagens nettlesere.
  • favicon.svg – inkluderes kun når kildebildet er SVG og «Bruk original SVG»-bryteren er på.
  • apple-touch-icon.png – 180×180, ugjennomsiktig, brukt av iOS-hjemskjermer.
  • pwa-192x192.png og pwa-512x512.png – standard PWA-ikonene.
  • pwa-maskable-192x192.png og pwa-maskable-512x512.png – maskbare varianter med W3C-anbefalt sikker sone.
  • site.webmanifest – PWA-manifestet koblet til ikonene ovenfor.

Hvordan utfylling, bakgrunn og maskbare sikre soner fungerer

Hver plattform har sin egen utfylling («Marg») slik at du kan gi luft inne i ikon-lerretet. Bryteren «Legg til bakgrunn» maler en ugjennomsiktig firkant bak kilden din – nyttig når kilden er gjennomsiktig og destinasjonen krever ugjennomsiktighet (Apples hjemskjerm) eller bare for visuell kontrast i en nettleserfane. Maskbare PWA-ikoner bruker en ekstra sikker sone oppå plattformens marg: alt utenfor de sentrale ~80 % kan bli beskåret av Android, Windows eller ChromeOS når de bruker en sirkulær, avrundet eller squircle-maske.

Koble pakken inn på nettstedet ditt

  1. Pakk ut det nedlastede arkivet i web-roten din (slik at filene ligger på /favicon.ico, /site.webmanifest, osv.).
  2. Lim inn HTML-snutten i nettstedets <head>.
  3. Hvis du serverer ressurser fra en understi (for eksempel /static/icons/), sett «Ressurssti» før du genererer, slik at snutten og manifestet bruker riktige URL-er.
  4. Hvis du har tilpasset manifestet ut over det dette verktøyet eksponerer (for eksempel for å legge til categories eller screenshots), åpne site.webmanifest i et tekstredigeringsprogram og rediger det direkte – det er ren JSON.