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 farvegradient, der løber fra cyan til gul. Så den har jeg brugt som udgangspunkt for mit favicon, kombineret med et S for Stefan. Første version af denne guide blev lavet med en lyserød-gul gradient.
Gem din favicon-fil i .png-format. Jeg har gemt min fil under navnet favicon.png.
Favicons i WordPress
Hvis du bruger WordPress, kan du i de fleste temaer gå ind og uploade din favicon-fil, og WordPress klarer resten. Hvis ikke skal du igennem et par ekstra skridt – start med at generere din Favicon-fil.
I WordPress: Åbn WordPress admin panel, og gå til Udseende -> Tilpas (engelsk: Apperance -> Customize). I bunden af fanen “webstedsidentitet” finder du knappen til upload af faviconer/webstedsikoner.
Upload dit favicon, og check at det hele virker:-)
Favicon-generator.org
Hvis du ikke bruger WordPress, eller hvis du har et tema, der ikke understøtter favicons, skal du konvertere din favicon-fil fra Photoshop til .ico formatet. Det nemmeste er at bruge en af de mange favicon generators, man kan finde online. Jeg har tidligere 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-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.
Upload hele favicons-mappen til roden af dit webhotel – uanset om det er.
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.
Hvis du bruger et CMS som f.eks. WordPress som platform, skal du have fat i dit temas header.php-fil, og åbnet den i en kode-editor. Kodestumpen fra favicon-generator.org skal indsættes lige før wp_head(); tagget. Dertil har jeg rettet alle stierne, så de peger 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:-)
