Når det hele skal gå lidt hurtigt, kommer man ofte til at springe de små detaljer over. En af de detaljer man som webdesigner ofte kommer til at springe over er faviconet – det der lille ikon i toppen af fanen på browseren og på din telefons hjemmeskærm, der er unikt for dit website.

Og det er synd, for faviconet gør det noget nemmere at navigere, når man har mange browser-faner åbne. Og så behøver det ikke at tage lang tid at lave et favicon. Så her har du en guide til hvordan du kan lave et favicon til dit site.

Design dit favicon

Først og fremmest skal du have designet dit favicon. I gamle dage var faviconet en lille grafikfil på 16 x 16 pixels. Nu om dage er faviconer i mange flere opløsninger – mange forskellige størrelser mellem 16 x 16 pixels og 192 x 192 pixels. Men en ting har alle størrelserne til fælles: De er kvadratiske.

Så start med at lave en ny fil i det program du bruger til at lave grafik. Jeg bruger photoshop. Her har jeg lavet en ny fil i størrelsen 512 x 512 pixels.

Som udgangspunktet skal faviconet være ret simpel grafik. Det skal fungere, selvom det skaleres ned til 16 x 16 pixels, så sørg for at eksperimentere med at skalere størrelsen op og ned, når du laver dit favicon.

Hvis du har et logo, kan du bruge det. Det har jeg ikke, men har i stedet brugt et af mine gennemgående designelementer på mit website: en gradient, der løber fra lyserød til gul. Så den har jeg brugt som udgangspunkt for mit favicon.

Fremstilling af favicon i Photoshop – 512 x 512 pixels canvas

Gem din favicon-fil i .png-format. Jeg har gemt min fil under navnet favicon.png. Photoshop kan ikke generere favicon-filer, så du skal gennem et par ekstra trin, efter at have lavet favicon.png filen.

Favicon-generator.org

Efter at have lavet din favicon.png, skal du konvertere den til .ico formatet. Det nemmeste er at bruge en af de mange favicon generators, man kan finde online. Jeg har selv brugt favicon-generator.org – den fungerer glimrende.

Inde på favicon-generator.org skal du uploade din .png-fil. Jeg vil anbefale at klikke “Include your favicon.ico in the public library” fra – dit favicon skulle gerne være unikt for dit website, så du vil ikke gøre det frit tilgængeligt for andre;-)

Favicon-generator.org – sørg for at klikke “include your favicon.ico in the public gallery” fra

Favicon-generatoren sørger for at konvertere din .png-fil til alle de forskellige størrelser favicons, der er brug for, og ændrer endelsen til fra .png til .ico.

Download alle filerne og pak dem ud. Mappen har et langt navn – en masse tal og bogstaver. Omdøb den til f.eks. favicons.

Download filerne fra favicon-generator.org
Udpak mappen fra favicon-generator, og omdøb mappen til favicons

Upload hele favicons-mappen til roden af dit webhotel.

Upload favicons mappen til roden af dit webhotel

Link dit site til dine favicon-filer

Efter upload af favicon-mappen, er der én sidste ting at gøre: Linke dit website til dine favicon-filer.

Fremgangsmåden afhænger af hvordan dit website er opbygget. Men helt overordnet giver favicon-generator.org dig en kodestump, der skal integreres i <head>-sektionen af dit website. Så her skal du rode lidt i websitets kode.

Kopier kodestumpen fra favicon-generator.org
Kopier koden fra favicon-generator.org

Jeg bruger WordPress som platform, så jeg har fundet mit temas header.php-fil, og åbnet den i min kode-editor. Her har jeg indsat kodestumpen fra favicon-generator.org lige før wp_head(); tagget. Dertil har jeg rettet alle stierne, så de peger ned i “favicons” mappen.

integrering af kodestump til faviconer
Tilføj favicon-kodestumperne til din <head>-sektion. Tilpas stierne for alle href’er ved at tilføje /favicons/ for at pege ned i favicons mappen

Reload siden og se dit favicon

Hvis du har gjort alt korrekt, skulle dit favicon gerne vises, næste gang du besøger dit site. Hvis du ikke ser det i første omgang, kan det skyldes din browser cache. Prøv i givet fald at åbne en inkognito browser eller rydde din browser historik.

God arbejdslyst:-)

stefangrage.dk - nu med et favicon
Mit website – nu med et favicon:-)

Skriv et svar

Jeg sender kun nyhedsbreve ud lejlighedsvis - 2-4 gange om året. Og du kan altid afmelde nyhedsbrevet igen ved at klikke på linket i bunden af nyhedsbrevet. Nyhedsbrevet er drevet med Mailchimp, og dine informationer vil derfor blive håndteret af Mailchimp.

© 2019 Stefan Grage