Hvilke favikonfiler et nettsted trenger, og størrelsene på hver

Et nettsted trenger et lite sett med ikonfiler, og de fleste valgene handler om størrelse. Legg en favicon.ico med bilder på 16, 32 og 48 piksler i roten av nettstedet, for faner i nettleseren og Windows. Legg til et 180 piksler stort Apple touch-ikon for hjemskjermer på iPhone og iPad, og PNG-ikoner på 192 og 512 piksler som er oppført i et web app-manifest. Favikon-generatoren lager alle sammen fra én logo og skriver HTML-linjene du limer inn på sidene dine.

Filene og størrelsene

ZIP-filen generatoren laster ned, inneholder alle sju filene. Filen favicon.ico er laget av tre PNG-bilder, på 16, 32 og 48 piksler, lagret i én fil. Hvert ikon er den samme logoen tegnet mindre. Generatoren jobber ut fra en 512 piksler stor versjon av bildet ditt og lager hver størrelse fra den.

HTML-linjene

Generatoren skriver fire linjer til hodet på sidene dine:

<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 linjen peker til favicon.ico og oppgir størrelsen som 48 x 48. Den andre gir PNG-bildet på 32 piksler. Den tredje oppgir Apple touch-ikonet, og den fjerde peker til manifestet, der ikonene på 192 og 512 piksler er oppført. PNG-bildet på 16 piksler ligger i ZIP-filen, men ikke i disse linjene. Nettlesere ser også etter /favicon.ico av seg selv, så filen blir likevel funnet hvis den første linjen mangler. Behold banene slik de står, med mindre filene dine ligger et annet sted.

Hvorfor små størrelser trenger enkle former

Et ikon på 16 x 16 piksler har 256 piksler til sammen. Et ikon på 48 piksler har 2 304, og kildebildet på 512 piksler har 262 144. Det meste av detaljene i en logo forsvinner før den når 16 piksler, så en tynn strek eller et lite ord blir til en uskarp flekk. Bruk et enkelt merke, eller én eller to bokstaver med sterk kontrast.

Bokstavvalget godtar ett eller to tegn og tegner dem store midt i ikonet, og krymper dem hvis de er for brede. Formene er Kvadrat, Avrundet og Sirkel. Forhåndsvisningen viser resultatene i 16, 32, 48, 180 og 512 piksler side om side, og faner for lys og mørk bakgrunn, så du kan vurdere de små størrelsene før du laster ned. Forhåndsvisningene oppdateres når du endrer form, marg eller bakgrunn, så du kan prøve hver innstilling først.

Marg, bakgrunn og Apple-ikonet

Marg har tre innstillinger: Ingen marg, Liten og Stor. Liten lar 10 prosent av ikonet stå tomt på hver side, og Stor lar 20 prosent stå tomt. I bildemodus klipper Ingen marg bildet til den midterste kvadraten, så endene av en bred logo går tapt. Innstillingene med marg passer hele bildet inn i kvadraten i stedet.

Bakgrunnsvalgene er Gjennomsiktig, Hvit og Egendefinert, og Gjennomsiktig er standard. Apple touch-ikonet er alltid ugjennomsiktig. I bildemodus får de gjennomsiktige områdene den valgte bakgrunnen, eller hvit hvis bakgrunnen er Gjennomsiktig. I bokstavmodus får de bokstavens bakgrunnsfarge. Gjennomsiktige områder i et Apple touch-ikon kan vises som svarte på iPhone og iPad, så generatoren fyller dem. De andre størrelsene beholder gjennomsiktigheten du valgte. Hvorfor en gjennomsiktig PNG blir svart forklarer årsaken.

Et favikon er firkantet, så en bred logo trenger en kvadratisk ramme først. Lager av kvadratiske bilder passer hele bildet inn i en 1:1-ramme, med en uskarp, hvit, svart eller egendefinert kant, slik at ingenting klippes bort. Endre bildestørrelse setter nøyaktige piksler. Med Behold proporsjoner på og begge sider fylt ut, passer bildet inn i boksen uten forvrengning. Bildeformater og proporsjoner forklart dekker de vanlige formatene.

Endringer som tar tid å vise

Nettlesere lagrer favikoner i en hurtigbuffer. En endret fil på samme adresse kan vedvare med det gamle ikonet en stund, så en vanlig oppdatering er ofte ikke nok. Åpne adressen til ikonet direkte for å bekrefte at den nye filen ligger på serveren, og last deretter siden på nytt med hurtigbufferen omgått. Hvis det gamle ikonet fortsatt vises, gi den nye filen et annet navn og oppdater lenken så den peker dit.

Slik gjør du det med fixmint

1. Velg Bilde og slipp logoen din i boksen, eller velg Bokstav og skriv inn ett eller to tegn.
2. Sett Marg til Ingen, Liten eller Stor, og Bakgrunn til Gjennomsiktig, Hvit eller Egendefinert farge.
3. Sjekk ikonene i 16, 32 og 48 piksler på fanene for lys og mørk bakgrunn, og forhåndsvisningene i 180 og 512 piksler.
4. Trykk Last ned ZIP for alle sju filene, eller Last ned favicon.ico for den ene filen.
5. Trykk Kopier HTML og lim linjene fra HTML for hodet ditt inn i hodet på hver side.

Spesialtilfeller

• Bildet ditt blir på enheten din. Generatoren lager ikonene i nettleseren din, og ingenting lastes opp.
• To bokstaver. To tegn godtas og tegnes mindre slik at begge får plass, noe som gjør dem vanskeligere å lese i 16 piksler enn én bokstav.
• Filnavn. Behold navnene HTML-en bruker, fordi lenkene peker til dem.
• Filer som ikke kan leses. Hvis et bilde ikke kan gjøres om til ikoner, viser generatoren meldingen «Kunne ikke lage ikonene fra denne filen. Prøv et annet bilde.» og tømmer resultatene. Prøv en annen fil, eller lagre bildet på nytt i et vanlig format.