Sådan opretter du et favicon.

Åbn Favicon / ICO Generator og vælg Billede. Upload en PNG, JPG, JPEG, WebP eller GIF, eller vælg Prøv et eksempel. Det gennemgåede eksempel bruger favicon-orbit.png, et 512 × 512 pixel violet orbit-mærke med gennemsigtige hjørner. Inputtet er 202,491 bytes.

For et brand uden et færdigt logo, vælg Tekst på værktøjssiden. Indtast et eller to bogstaver og vælg Fortsæt. Editoren tilbyder Modern sans, Classic serif og Monospace skrifttyper, plus separate tekst- og baggrundsfarver. Op til tre tegn accepteres, men ekstra tegn kan blive svære at genkende i små størrelser.

Behold det originale kunstværk. Generatoren opretter nye ikonfiler og overskriver ikke kilden. GIF-input bliver til et stillestående ikon frem for et animeret favicon.

For et monogram starter skrifttypemenuen med tre inkluderede stilarter. Vælg Brug systemskrifttyper på en understøttet desktop-browser og giv adgang til at tilføje de skrifttyper, der er installeret på din enhed. Brug de forrige og næste vinkler til at sammenligne tilstødende skrifttyper, eller vælg en familie og inspicer live-eksemplet, især ved 16 pixels. Skrifttyper forbliver på din enhed; de inkluderede stilarter fungerer uden tilladelse.

Editoren viser lyse og mørke browserfaner samt eksempler i almindelige ikonstørrelser. Tjek 16-pixel eksemplet først; det er den strengeste test af, om mærket forbliver genkendeligt. Apple Touch-eksemplet repræsenterer en 180-pixel eksport og vises mindre i arbejdsområdet.

På en telefon, åbn Indstillinger. Lad Opret fra være indstillet til Uploadet billede og Billedtilpasning være indstillet til Vis hele billedet. For dette eksempel, sæt Afstand omkring indhold til 0 og aktiver Gennemsigtig baggrund. Kilden indeholder allerede sin egen afrundede violette form og klare margener, så den behøver ikke en ekstra farvet baggrund.

Med en anden kilde bevarer Vis hele billedet sine kanter, mens Udfyld ikonet kan beskære dem. Afrundet firkant, Firkant og Cirkel definerer den ydre form. Gennemsigtig baggrund bevarer klare områder, men kan ikke fjerne en uigennemsigtig baggrund, der allerede er tegnet ind i et foto. Gennemse det mindste eksempel efter hver ændring af indramningen.

Under Download skal du vælge Website icon package (ZIP) til dette eksempel. Lad Website name stå som My website til eksemplet, eller erstat det med det rigtige brandnavn til dit eget projekt. Dette navn bruges i site.webmanifest; det tilføjes ikke som tekst over billedet.

Vælg Start. Browseren genererer en favicon.ico med syv rammer med kvadratiske billeder på 16, 24, 32, 48, 64, 128 og 256 pixels. Den opretter også PNG ikoner på 16, 32, 48, 180, 192 og 512 pixels, et manifest og installationsvejledning. Resultatet er én ZIP-fil i stedet for en separat download-knap til hvert ikon.

Hvis du kun har brug for et klassisk favicon.ico, skal du i stedet vælge Multi-size ICO. Dette er nyttigt, når en webstedsplatform accepterer en ICO-upload og ikke kræver en separat pakke.

Download gemmer website-icons.zip. Det faktiske eksempel indeholder ni filer og er på 304,351 bytes. Sammenligningen ovenfor viser kildebilledet på 512 pixels ved siden af den ægte ramme på 256 pixels, der er udtrukket fra den eksporterede ICO, frem for et simuleret skærmbillede fra en browser.

Udpak ZIP-filen, upload ikonfilerne til dit websteds rodmappe og læs INSTALL.txt. Den indeholder HTML link-tags til ICO, PNG-ikonet, Apple Touch-ikonet og web-manifestet. Hvis du placerer filerne i en undermappe, skal du opdatere både HTML-stierne og ikonstierne inde i site.webmanifest.

Tjek dit websted i en ny browserfane og på de enheder, du prioriterer. Browsere kan cache favicons, så et gammelt ikon er ikke et bevis på, at installationen fejlede. Behold kildebilledet og den downloadede pakke, før du opdaterer editoren, da en opdatering fører tilbage til hovedværktøjssiden.