Utilia
Kategorier ▾
Språk: nb ▾

Favicon-generator

Lag favicon.ico, PNG-ikoner, apple-touch-icon og site.webmanifest fra ett bilde eller en emoji, med HTML-tagger klare til å limes inn. ZIP uten opplasting.

Kilde

Tilpasning
site.webmanifest

Slik lager du en favicon

  1. Under Kilde velger du Bilde eller Tekst eller emoji. - Bilde: slipp en PNG, JPG, WebP eller SVG. En kvadratisk logo på minst 512 × 512 px fungerer best. Velg Hele bildet for å tilpasse det inne i ikonet, eller Fyll og beskjær for å dekke hele kvadratet. - Tekst eller emoji: skriv en bokstav, initialer eller en emoji, og velg deretter Skrift, Fet og Tekstfarge.
  2. Sett Bakgrunnsfarge, eller huk av for Gjennomsiktig bakgrunn. Velg en Form (Kvadrat, Avrundet eller Sirkel) og Innvendig luft (%) for å la det være rom rundt innholdet.
  3. Åpne eventuelt site.webmanifest for å fylle inn Appnavn (web manifest), Kortnavn, Temafarge og Mappe-URL for ikonene (behold / hvis filene skal ligge i roten av nettstedet ditt).
  4. Klikk Generer favicon. Ikonene vises i virkelig størrelse ved siden av en etterlignet nettleserfane. Etter det oppdateres de umiddelbart ved hver endring.
  5. Klikk Last ned ZIP, last filene opp til nettstedet ditt, klikk deretter Kopier tagger og lim dem inn i <head> på sidene dine.

Hva ZIP-filen inneholder

Fil Størrelse Brukes av
favicon.ico 16, 32 og 48 px Nettleserfaner, bokmerker, gamle nettlesere, Windows
favicon-16x16.png 16 × 16 Nettleserfaner
favicon-32x32.png 32 × 32 Faner på skjermer med høy tetthet, snarveier på oppgavelinjen
apple-touch-icon.png 180 × 180 Hjemskjermen på iPhone og iPad
android-chrome-192x192.png 192 × 192 Hjemskjermen på Android (web manifest)
android-chrome-512x512.png 512 × 512 Oppstartsskjermer ved installasjon (web manifest)
site.webmanifest — Navn, farger og ikoner for et installerbart nettsted
favicon-tags.html — HTML-taggene, til referanse

ICO-filen inneholder tre PNG-bilder, et format som Windows (siden Vista) og alle nåværende nettlesere leser. Apple-touch-icon lagres alltid på ensfarget bakgrunn, fordi iOS viser gjennomsiktige piksler som svarte. Med gjennomsiktig bakgrunn brukes hvitt.

HTML-taggene

De genererte taggene ser slik ut (med mappe-URL-en din):

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Nettlesere ber også automatisk om /favicon.ico i roten av domenet ditt, så å la den ligge der hjelper selv på sider uten taggene.

Designtips

  • Hold det enkelt. Ved 16 × 16 px forsvinner detaljene. En enkelt bokstav, et fet symbol eller den enkleste versjonen av logoen din leses best.
  • Sjekk forhåndsvisningen i virkelig størrelse. Ikonet på 16 px i den etterlignede fanen er det besøkende faktisk ser.
  • Tenk på mørk modus. En mørk logo på gjennomsiktig bakgrunn kan forsvinne i mørke nettlesertemaer. En farget bakgrunn eller litt innvendig luft hjelper.
  • Emojier ser forskjellige ut på hvert system, fordi hver plattform tegner emojier i sin egen stil. PNG-filene beholder utseendet fra enheten din.

Ofte stilte spørsmål

Hvilke størrelser trenger en favicon?

I praksis: en favicon.ico med 16, 32 og 48 px, en apple-touch-icon på 180 px og PNG-er på 192 og 512 px til web manifest. Dette verktøyet lager alle sammen fra én kilde.

Kan jeg bruke en SVG-logo?

Ja. SVG-filer tegnes i høy oppløsning før ikonene lages. SVG-en vises som et vanlig bilde, så skriptene i den kjøres aldri.

Hvordan lager jeg en emoji-favicon?

Velg Tekst eller emoji, skriv eller lim inn emojien, velg en bakgrunn eller behold den gjennomsiktig, og generer. Resultatet er en ekte PNG og ICO, så det fungerer i alle nettlesere.

Hvorfor vises ikke den nye faviconen min?

Nettlesere bufrer favicon svært aggressivt. Last siden på nytt med tømt hurtigbuffer, åpne nettstedet i et privat vindu, eller legg til en versjon i URL-en, for eksempel /favicon.ico?v=2.

Lastes bildet mitt opp?

Nei. Ikonene, ZIP-filen og manifestet lages i nettleseren din, og ingenting forlater enheten din.

Relaterte verktøy