Hvad er et favicon?
Favicon er det lille ikon som bliver vist ved siden af hjemmesidens navn oppe i browserens tab. Det hjælper dine besøgende med at identificere din hjemmeside og mere hyppige besøgende kan identificere din hjemmeside bare på det lille ikon. Det er med til at styrke dit brand kendskab og for blogs skaber det troværdighed og personlighed. Mange glemmer desværre at tilføje et favicon og ender derfor med at bruge det kedelige standard favicon som er et tomt dokument.
Engang var favicon et lille ikon på 16x16 pixels som kun blev vist i browser tab, men i dag bliver favicon brugt mange flere steder. Favicon er for eksempel det ikon som bliver vist på hjemmeskærmen på en iPhone når du trykker "Gem til hjemmeskærm" (klik på billede for illustration 
). I dag skal man gerne have et favicon som ser godt ud på forskellige platforme som PC, Mac, iPhone, Android, tablets m.m. hvilket kræver et større ikon end bare 16x16 pixels. Favicons er dog stadig kvadratiske ikoner, så man kan nemt generere alle de nødvendige ikoner ud fra kun et billede. Til at generere alle ikonerne vil vi i denne guide bruger et plugin kaldt Favicon by RealFaviconGenerator.
Hvorfor skal jeg tilføje et favicon til min WordPress side?
Som nævnt ovenfor så er det med til at gøre din hjemmeside let identificerbar. Derudover er det også med til at styrke brugervenligheden og bruger oplevelsen af din hjemmeside. Mange internet-brugere har en håndfuld tabs åben på samme tid i deres browser, såsom social medier, musik osv., og din hjemmeside kan derfor nemt forsvinde blandt de andre, hvis du ikke har et unikt favicon. Jo flere tabs åben, des sværere bliver tabben med din hjemmeside at finde.
GUIDE - Sådan tilføjer du et favicon
Trin 1
Først og fremmest skal du lave/finde dig et kvadratisk billede. Du kan finde nogle halv-unikt ved at søge på det du leder efter + icon på Google, fx "sun icon" . Når du har fundet dit billede skal du uploade det til WordPress Mediebibliotek. Billedet kan være alle de formater som WordPress understøtter: .jpg, .png .gif m.m. (https://en.support.wordpress.com/accepted-filetypes/)
Psst, et lille trick til at gøre dit billede kvadratisk i WordPress: Tryk på dit billedet i Mediebiblioteket > tryk herefter "Rediger billede" > Træk en firkant på billedet > Under billedeskæring skriv 260x260 (eller en anden kvadratisk størrelse) > Træk firkanten på billeder hen til det ønskede sted på billedet > Tryk Gem, så bliver dit billede automatisk beskåret i den ønskede størrelse. :-)
Trin 2
Der er flere forskellige måder at installere et favicon på, men klart den nemmeste måde at gøre det, er ved hjælp af et plugin. Vi kan varmt anbefale Favicon by RealFaviconGenerator da det super nemt laver alle de 4 favicons man skal bruge: PC/Mac, Android, iPhone/iPad og Windows 8 (mobil og tablets).
I dit WordPress kontrolpanel gå til Plugins > Tilføj nyt > Søg efter "Favicon by RealFaviconGenerator" > du skulle helst kun få et resultat > Tryk "Installer nu" > Når den er færdig med at installere, så tryk "Aktiver plugin".
Trin 3
Lokaliser plugin'ets indstillinger ved at "Udseende" > Efterfulgt af "Favicon".
Trin 4
Tryk "Select from the Media Library", vælg derefter dit ikon og afslut ved at trykke "Vælg".
Trin 5
Du skulle nu gerne kunne se en lang adressen i "Master picture URL" feltet, tryk "Generate favicon"
Trin 6
Det kan godt virkeligt lidt uoverskueligt med alle de indstillinger man kan ændre på, men det er meget simpelt, vi holder også til det mest basale. Afhængig af om det ikon er transparent eller har en solid baggrund, så kan du måske tilføje en baggrund. I billede nedenfor kan du se, at under "Favicon for iOS - Web Clip" har jeg tilføjet en hvid baggrund til mit ikon, da mit ikon er transparent og ingen baggrund havde i forvejen. Men er dit ikon/favicon ikke transparent, så bare hold indstillingen på den øverste "Use the original favicon...."
Under "Favicon for Android Chrome" har jeg valgt ikke at bruge nogen baggrund, men derimod behold mit ikon transparent. Under "App name" anbefaler jeg at du skriver din hjemmeside/blogs kaldenavn, fx Webhotelmatch. I "Theme color" har jeg valgt en mørkere blå farve så den matcher min hjemmeside. Du kan se hvordan farven ser ud, ved at trykke på "Switcher" under billedet. Hvis du vælger en farve som matcher din hjemmeside, gør du det nemmere for dine besøgende, at identificere din hjemmeside blandt andre åbne hjemmesider og apps.
Trin 7
I "Favicon for Windows 8 - Tile" har jeg valgt at bruge hvid, jeg synes at hvid spiller super godt sammen med mit mørkeblå logo/ikon. Pas på ikke at vælge en farve, som gør dit ikon utydeligt og svær at læse.
"Favicon Generator Options"; Hvis du lige har oprettet din blog, så skal du bruge funktionen som vist på billedet "This is a new site.....". Også selvom du har haft din hjemmeside længe men aldrig haft et favicon før, så kan du fint bruge samme funktion. Har du derimod haft et favicon før og er ved at skifte til et nyt, så marker funktionen nedenfor "The web site is already...."
Du har nu ændret på de vigtigste indstillinger og kan trygt trykke "Genrate your Favicons and HTML code"
Resultat
Du har nu tilføjet favicon(s) til din hjemmeside og gjort, at det også ser super godt ud på både computer såvel som telefon og tablet. :-)
