Hvordan lage et favicon.

Åpne Favicon / ICO Generator og velg Image. Last opp en PNG, JPG, JPEG, WebP eller GIF, eller velg Try a sample. Arbeidseksempelet bruker favicon-orbit.png, et 512 × 512 pikslers fiolett bane-merke med gjennomsiktige hjørner. Inndataene er 202,491 bytes.

For en merkevare uten en ferdig logo, velg Text på verktøysiden. Skriv inn én eller to bokstaver og velg Continue. Redigeringsprogrammet tilbyr Modern sans, Classic serif og Monospace-fonter, pluss separate farger for tekst og bakgrunn. Opptil tre tegn aksepteres, men ekstra tegn kan bli vanskelige å gjenkjenne i små størrelser.

Behold det originale kunstverket. Generatoren lager nye ikonfiler og overskriver ikke kilden. GIF-inndata blir et stillbilde-ikon i stedet for et animert favicon.

For et monogram starter Font-menyen med tre inkluderte stiler. Velg Use system fonts på en støttet skrivebordsnettleser og tillat tilgang for å legge til fontene som er installert på enheten din. Bruk forrige- og neste-pilene for å sammenligne tilstøtende fonter, eller velg en familie og inspiser forhåndsvisningen, spesielt ved 16 piksler. Fonter forblir på enheten din; de inkluderte stilene fungerer uten tillatelse.

Redigeringsprogrammet viser lyse og mørke nettleserfaner pluss forhåndsvisninger i vanlige ikonstørrelser. Sjekk 16-pikslers eksempelet først; det er den strengeste testen på om merket forblir gjenkjennelig. Apple Touch-forhåndsvisningen representerer en 180-pikslers eksport og vises mindre i arbeidsområdet.

På en telefon, åpne Settings. La Create from stå på Uploaded image og Image fit stå på Show the whole image. For dette eksempelet, sett Space around content til 0 og aktiver Transparent background. Kilden inneholder allerede sin egen avrundede fiolette form og klare marger, så den trenger ikke en ekstra farget bakgrunn.

Med en annen kilde beholder Show the whole image kantene sine, mens Fill the icon kan beskjære dem. Rounded square, Square og Circle definerer den ytre formen. Transparent background bevarer klare områder, men kan ikke fjerne en ugjennomsiktig bakgrunn som allerede er tegnet inn i et bilde. Gå gjennom den minste forhåndsvisningen etter hver endring av innramming.

Under Last ned, velg Nettstedsikon-pakke (ZIP) for dette eksempelet. La Nettstedsnavn stå som My website for eksempelet, eller erstatt det med det virkelige merkenavnet for ditt eget prosjekt. Dette navnet brukes i site.webmanifest; det legges ikke til som tekst over bildet.

Velg Start. Nettleseren genererer en syv-rammers favicon.ico med kvadratiske bilder på 16, 24, 32, 48, 64, 128 og 256 piksler. Den oppretter også PNG ikoner på 16, 32, 48, 180, 192 og 512 piksler, et manifest og installasjonsinstruksjoner. Resultatet er én ZIP-fil i stedet for en separat nedlastingsknapp for hvert ikon.

Hvis du bare trenger et klassisk favicon.ico, velg Multi-størrelse ICO i stedet. Dette er nyttig når en nettsideplattform godtar en ICO-opplasting og ikke trenger en separat pakke.

Last ned lagrer website-icons.zip. Det faktiske eksempelet inneholder ni filer og er på 304,351 bytes. Sammenligningen ovenfor viser kilden på 512 piksler ved siden av den ekte rammen på 256 piksler trukket ut fra den eksporterte ICO, i stedet for et simulert nettleserskjermbilde.

Pakk ut ZIP-filen, last opp ikonfilene til nettstedets rotmappe og les INSTALL.txt. Den inkluderer HTML link-tagger for ICO, PNG-ikonet, Apple Touch-ikonet og web-manifestet. Hvis du plasserer filene i en undermappe, oppdater både HTML-stiene og ikonstiene inne i site.webmanifest.

Sjekk nettstedet ditt i en ny nettleserfane og på enhetene du bryr deg om. Nettlesere kan mellomlagre favikoner, så et gammelt ikon beviser ikke umiddelbart at installasjonen mislyktes. Behold kildebildet og den nedlastede pakken før du oppdaterer editoren, fordi en oppdatering fører deg tilbake til hovedverktøysiden.