tigtools

Favicon-generator

Lag et komplett favicon-sett fra logoen din eller fra én eller to bokstaver på en farget bakgrunn, og kopier deretter HTML-taggene. Ikonene genereres i nettleseren din.

Kjører i nettleseren din Ingen registrering

Opprett fra

Ett eller to tegn fungerer best; bare de to første blir brukt.

62%
Form

Slik bruker du det

  1. Velg Bokstaver og skriv ett eller to tegn med fargene dine, eller velg Bilde og velg en logo (helst kvadratisk, minst 512 px).
  2. Sjekk forhåndsvisningene av alle størrelsene, spesielt 16 og 32 px, som vises i nettleserfaner.
  3. Last ned ZIP-filen og last opp filene til roten av nettstedet ditt.
  4. Lim HTML-taggene inn i head-delen på sidene dine, og juster navnet i site.webmanifest ved behov.

Slik fungerer det

Nettlesere og enheter ser etter ikoner på ulike steder. Settet som lages her dekker de vanligste tilfellene: favicon.ico med 16, 32 og 48 px-bilder for nettleserfaner, bokmerker og eldre programvare som automatisk ber om /favicon.ico; 16 og 32 px PNG-filer som det refereres til fra link-tagger; et apple-touch-icon på 180 × 180 som brukes når noen legger til nettstedet ditt på startskjermen på en iPhone eller iPad; og 192 og 512 px-ikoner som refereres til fra site.webmanifest for Android-startskjermer og installerbare nettapper.

favicon.ico-filen lagrer ikonene som PNG-bilder i en ICO-beholder, som alle moderne nettlesere og Windows Vista eller nyere kan lese. ICO- og ZIP-filene settes sammen av kode på denne siden; ingenting sendes til en server.

Små størrelser krever en enkel utforming: ved 16 × 16 piksler forsvinner tynne linjer og liten tekst, så en fet bokstav eller et forenklet logomerke fungerer bedre enn en full logo med ord. Bildet skaleres ned i flere trinn med høy kvalitet. apple-touch-ikonet får alltid en solid bakgrunnsfarge fordi iOS fyller gjennomsiktige områder med svart, og iOS runder hjørnene selv.

Etter at du har lastet opp nye ikoner, kan nettlesere fortsette å vise det gamle favicon-ikonet en stund fordi de hurtigbufrer det aggressivt. En tvungen oppdatering, eller å åpne /favicon.ico direkte, hjelper vanligvis.

Eksempler

Bokstavikon for et nytt prosjekt

Å skrive «TG» med hvite bokstaver på en mørkegrønn avrundet firkant gir et rent ikon som forblir leselig ved 16 × 16 px i en nettleserfane, uten at du trenger en designet logo.

Ikon fra en eksisterende logo

En 1024 × 1024 PNG-logo med gjennomsiktig bakgrunn, satt til Tilpass hele bildet, gir gjennomsiktige faneikoner og et apple-touch-icon i merkevarens farge.

Bred logo

For et ordmerke på 1200 × 300 beholder senterbeskjæring bare de midterste bokstavene. Å tilpasse hele bildet beholder alt, men gjør det ørlite; et separat kvadratisk logomerke ser vanligvis bedre ut.

Ofte stilte spørsmål

Trenger jeg fortsatt favicon.ico?

Den er fortsatt nyttig. Noen nettlesere, feed-lesere og verktøy ber om /favicon.ico fra nettstedets rot selv uten en link-tag. Moderne nettlesere bruker også PNG-ikonene som er referert i HTML-en.

Hvor plasserer jeg filene?

Last dem opp til rotmappen på nettstedet ditt, ved siden av startsiden, slik at /favicon.ico og de andre banene i HTML-en fungerer. Hvis du bruker en undermappe, må du endre banene i link-taggene og i site.webmanifest.

Hvorfor vises fortsatt det gamle faviconet mitt?

Nettlesere mellomlagrer favicon-filer separat og lenge. Prøv en hard oppdatering, åpne /favicon.ico i en ny fane, eller sjekk i et privat vindu. Å gi filene nye navn, for eksempel favicon-v2.ico, tvinger også frem en ny innlasting.

Lager dette et SVG-favicon?

Nei. Den lager PNG- og ICO-filer, som fungerer overalt. Hvis du allerede har en SVG-logo, kan du legge den til selv med en link-tag av typen image/svg+xml i tillegg til disse filene.

Personvern

Ikonene, ICO-filen og ZIP-filen opprettes i nettleseren din. Bildet og teksten din lastes ikke opp, lagres ikke og tas ikke med i analyser.