Hvilke favicon-filer en hjemmeside har brug for, og størrelserne

En hjemmeside har brug for et lille sæt ikonfiler, og de fleste valg handler om størrelse. Læg en favicon.ico med billeder på 16, 32 og 48 pixel i roden af siden til browserfaner og Windows. Tilføj et 180 pixel Apple touch-ikon til startskærmene på iPhone og iPad, og 192 og 512 pixel PNG-ikoner, der er angivet i et web app-manifest. Favicon-generatoren laver dem alle ud fra ét logo og skriver HTML-linjerne, som du indsætter på dine sider.

Filerne og deres størrelser

ZIP-filen, generatoren henter, indeholder alle syv filer. Filen favicon.ico er bygget af tre PNG-billeder på 16, 32 og 48 pixel, gemt inde i én fil. Hvert ikon er det samme logo tegnet mindre. Generatoren arbejder ud fra en 512 pixel version af dit billede og laver hver størrelse derfra.

HTML-linjerne

Generatoren skriver fire linjer til hovedet (head) på dine sider:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Den første linje peger på favicon.ico og angiver den som 48 gange 48. Den anden giver 32 pixel-PNG'en. Den tredje navngiver Apple touch-ikonet, og den fjerde peger på manifestet, hvor 192 og 512 pixel-ikonerne er angivet. 16 pixel-PNG'en ligger i ZIP-filen, men ikke i disse linjer. Browsere leder også selv efter /favicon.ico, så filen bliver stadig fundet, hvis den første linje mangler. Behold stierne, som de er skrevet, medmindre dine filer ligger et andet sted.

Hvorfor små størrelser kræver enkle former

Et ikon på 16 gange 16 pixel har 256 pixel i alt. Et 48 pixel-ikon har 2.304, og kildebilledet på 512 pixel har 262.144. Det meste af detaljen i et logo er væk, når det når 16 pixel, så en tynd linje eller et lille ord bliver til en sløret plet. Brug et simpelt mærke eller et eller to bogstaver med stærk kontrast.

Bogstavindstillingen tager et eller to tegn og tegner dem store i midten af ikonet, og de gøres mindre, hvis de er for brede. Formerne er Kvadrat, Afrundet og Cirkel. Forhåndsvisningen viser resultaterne i 16, 32, 48, 180 og 512 pixel side om side samt faner for lys og mørk baggrund, så du kan vurdere de små størrelser, før du downloader. Forhåndsvisningerne opdateres, når du ændrer form, margen eller baggrund, så du kan prøve hver indstilling først.

Margen, baggrund og Apple-ikonet

Margen har tre valg: Ingen margen, Lille og Stor. Lille lader 10 procent af ikonet stå tomt på hver side, og Stor lader 20 procent stå tomt. I billedtilstand beskærer Ingen margen billedet til dets midterste kvadrat, så enderne af et bredt logo forsvinder. Indstillingerne med margen passer i stedet hele billedet ind i kvadratet.

Baggrundsvalgene er Transparent, Hvid og Brugerdefineret, og Transparent er standard. Apple touch-ikonet er altid ugennemsigtigt. I billedtilstand får dets gennemsigtige områder den valgte baggrund, eller hvid, når baggrunden er Transparent. I bogstavtilstand får de bogstavets baggrundsfarve. Gennemsigtige områder i et Apple touch-ikon kan vises som sort på iPhone og iPad, så generatoren udfylder dem. De andre størrelser beholder den gennemsigtighed, du valgte. Hvorfor en transparent PNG bliver sort forklarer årsagen.

Et favicon er kvadratisk, så et bredt logo har brug for en kvadratisk ramme først. Lav kvadratisk foto passer hele billedet ind i en 1:1-ramme med en sløret, hvid, sort eller egen kant, så intet bliver skåret af. Ændr billedstørrelse sætter præcise pixels. Med Bevar proportioner slået til og begge sider udfyldt passer billedet ind i boksen uden forvrængning. Billedformater forklaret gennemgår de almindelige formater.

Ændringer, der tager tid at slå igennem

Browsere gemmer favicons i en cache. En ændret fil på samme adresse kan vise det gamle ikon i et stykke tid, så en almindelig genindlæsning er ofte ikke nok. Åbn ikonets adresse direkte for at bekræfte, at den nye fil ligger på serveren, og genindlæs derefter siden med cachen omgået. Hvis det gamle ikon stadig vises, så giv den nye fil et andet navn og opdater linket, så det peger på den.

Sådan gør du med fixmint

1. Vælg Billede og træk dit logo ind i boksen, eller vælg Bogstav og skriv et eller to tegn.
2. Sæt Margen til Ingen, Lille eller Stor, og Baggrund til Transparent, Hvid eller Brugerdefineret farve.
3. Tjek ikonerne i 16, 32 og 48 px på fanerne for lys og mørk baggrund samt forhåndsvisningerne i 180 og 512 px.
4. Tryk på Download ZIP for alle syv filer, eller på Download favicon.ico for kun den ene fil.
5. Tryk på Kopiér HTML, og indsæt linjerne fra HTML til dit hoved i hovedet på hver side.

Særtilfælde

• Dit billede bliver på din enhed. Generatoren laver ikonerne i din browser, og intet bliver uploadet.
• To bogstaver. To tegn accepteres og tegnes mindre, så de begge passer. Det gør dem ssværere at læse i 16 pixel end et enkelt bogstav.
• Filnavne. Behold de navne, HTML'en bruger, for linkene peger på dem.
• Filer, der ikke kan læses. Hvis et billede ikke kan omdannes til ikoner, viser generatoren meddelelsen "Kunne ikke lave ikonerne ud fra dette input. Prøv et andet billede." og tømmer resultaterne. Prøv en anden fil, eller gem billedet igen i et almindeligt format.