Sådan laver du et favicon
De størrelser, formater og den kode, du skal bruge til et favicon, der vises overalt.
Faviconet er det lille ikon i en browserfane, i bogmærker og ved siden af din side i Googles mobile søgeresultater. Mangler der et favicon, ser siden ufærdig ud, og et sløret et ser endnu værre ud. Det tager kun et par minutter at lave et godt.
Start med den rigtige grafik
Et favicon vises helt ned til 16 gange 16 pixels, så et fuldt logo med navnetræk bliver ulæseligt. Brug et enkelt mærke: symbolet fra dit logo, et enkelt forbogstav eller en kraftig form i din brandfarve. Test det ved at gøre det en fjerdedel så stort på skærmen: kan du stadig se, hvad det er, så virker det.
Start med et kvadratisk billede på mindst 512 gange 512 pixels, helst en PNG med gennemsigtig baggrund. Er dit logo ikke kvadratisk, så beskær det til et kvadrat med formatet låst til 1:1.
De filer du skal bruge
| Fil | Størrelse | Bruges af |
|---|---|---|
| favicon.ico | Indeholder versioner på 16, 32 og 48 pixels | Browsere, ældre systemer, standardforespørgslen efter /favicon.ico |
| Et PNG-ikon | 32 gange 32 og 192 gange 192 | Moderne browsere, hjemmeskærme på Android |
| apple-touch-icon.png | 180 gange 180 | Bogmærker på hjemmeskærmen på iPhone og iPad |
Google Søgning bruger også dit favicon i resultaterne. Det skal være et kvadrat på mindst 48 gange 48 pixels og skal kunne crawles på din side.
Sådan laver du ICO-filen
Træk din kvadratiske PNG ind i PNG til ICO-konverteren. Den laver en ægte .ico-fil med de små størrelser, browserne beder om. Til PNG-versionerne skal du skifte størrelse på det samme kvadratiske billede til 180, 192 og 32 pixels.
Sådan tilføjer du det til din side
Upload favicon.ico til roden af din side, så den kan nås på dinside.dk/favicon.ico, og tilføj disse linjer i head på dine sider:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/da/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/da/apple-touch-icon.png">
I WordPress går du til Udseende, Tilpas, Webstedsidentitet og uploader et kvadratisk billede som webstedsikon. WordPress laver størrelserne for dig. Shopify, Wix og Squarespace har hver især en indstilling til favicon i side- eller temaindstillingerne.
Når det nye favicon ikke vises
Browsere gemmer favicons stædigt i cachen. Åbn siden i et privat vindue, eller gå direkte til dinside.dk/favicon.ico og opdater. Der kan gå dage eller uger, før Google opdaterer ikonet i søgeresultaterne, når den har crawlet din forside igen.
Almindelige fejl
- At bruge hele logoet med lille tekst, som bliver til en klat ved 16 pixels.
- Et hvidt ikon på gennemsigtig baggrund, som forsvinder på lyse browserfaner.
- Kun at levere en lillebitte fil på 16 pixels, som ser sløret ud på skærme med høj opløsning.
- At glemme filen på /favicon.ico, som nogle browsere og crawlere beder om, uanset hvad siden siger.