Konverter PNG til ICO (favicon)

Hvad et favicon skal kunne

Et favicon vises i meget små størrelser, ofte 16 pixels i kvadrat. I den størrelse forsvinder fine detaljer, og tynde linjer forsvinder helt. Et godt favicon er en kraftig, enkel form med stærk kontrast: et enkelt bogstav, en forenklet udgave af et logomærke eller en massiv form i brandets farve. Hvis dit fulde logo har et ordmærke, så brug kun symbolet eller bare det første bogstav.

Grunden til, at .ico-filer indeholder flere størrelser, er, at det ser sløret ud at skalere ét enkelt billede op eller ned, når det vises. Med versioner på 16, 32, 48 og 64 pixels kan styresystemet eller browseren vise et pixelpræcist billede i hver sammenhæng: 16 px i en fane, 32 px i en bogmærkeliste på en skærm med høj DPI, 48 px i en genvej på Windows' proceslinje og så videre.

Sådan forbereder du PNG-kilden

• Gør den kvadratisk. Hvis dit logo er bredt, så placer det først på et kvadratisk, gennemsigtigt lærred, eller beskær til symbolet med beskæringsværktøjet.
• Start med 256 pixels eller mere. At skalere ned fra en stor, ren kilde giver et glattere resultat end at skalere en lille op.
• Behold en gennemsigtig baggrund, hvis formen er massiv, så den står godt på både lyse og mørke browsertemaer. Hvis formen er tynd eller lys, så sæt den i stedet på et massivt kvadrat med afrundede hjørner.
• Undgå tekst på mere end et eller to tegn; den bliver ulæselig i 16 pixels.

Sådan installerer du dit favicon

Gem den downloadede fil som favicon.ico, og læg den i rodmappen på din hjemmeside. Tilføj derefter dette inde i <head> på hver side:

<link rel="icon" href="/favicon.ico" sizes="any">

De fleste platforme har i stedet en særskilt indstilling: WordPress kalder det Site Icon under Appearance, Shopify og Squarespace har et Favicon-felt i temaindstillingerne, og Webflow har et i Project Settings. Upload .ico-filen der. Læs sådan laver du et favicon for den fulde vejledning.

Hvis du vil videre

For at få det fulde sæt ikoner, som moderne enheder beder om, skal du også bruge en PNG på 180 pixels til genveje på iOS-hjemmeskærmen (apple-touch-icon) og PNG-filer på 192 og 512 pixels til Android og webappens manifest. Det er almindelige PNG-filer, så brug værktøjet til at ændre størrelse til at lave dem ud fra den samme original. .ico-filen fra denne side dækker browserfaner, bogmærker og Windows, og det er der, de fleste opdager et manglende favicon.