Hvordan legge til favicon og nedlastingsikon
For de som ikke forsto det, så er dette et favicon:
1. Opprett en ny fil i et valgfritt bildeprogram. Fila burde ha bildestørrelsen 100×100.
2. Lag ikonet ditt og eksporter deretter bildet til en png-fil.
3. Gå inn på denne nettsiden (Favicon-generator).
4. Trykk på velg fil, og velg ikonet ditt. Trykk på “Create Favicon”. Dersom du bare skal ha favicon, og ikke nedlastingsikoner (ikoner som kommer på mobilen om man legger til nettsiden på startskjermen), så huker du av for “Generate only 16×16 favicon”.
5. Trykk på “Download the generated favicon”.
6. Nå vil det lastes ned en zip-fil med veldig mange ulike bilder. For å unngå å måtte legge til å mange forskjellige bilder, luker du ut bildene som heter “favicon.ico”, “android-icon-96×96.png” og “apple-icon-76×76.png”, da har du bilder for faviconet, og dersom noen skal laste ned nettsiden din til startsiden sin fra enten Android eller iPhone. Om du bare ønsker favicon, så holder det med fila som heter “favicon.ico”.
7. Last opp alle bildene til bloggen din ved å gå inn under “Post” og så “Bilde”.
8. Gå inn under “Bloggdesign” -> “HTML” -> “Moduler” i menyen til venstre.
9. Trykk på “Ny modul”.
10. Kall modulen for “Favicon” og lim inn denne koden:
<link rel=”icon” type=”image/png” sizes=”96×96″ href=”Erstatt-dette-med-link”>
<link rel=”apple-touch-icon” sizes=”76×76″ href=”Erstatt-dette-med-link”>
11. I en ny fane går du inn i bildearkivet til bloggen din.
12. Trykk på favicon-bildet du lastet opp, høyreklikk på det og velg “Kopier bildeadresse”. Lim denne adressen inn i koden der det står “Erstatt-dette-med-link”, i den aller øverste av <link>-tagene.
13. Gjør det samme med de to neste. Bildeadressen til android-bildet skal i nr. 2 og bildeadressen til apple-bildet skal i nr. 3.
14. Lagre modulen.
15. Gå inn på “Bloggdesign” -> “HTML” -> “Forsiden”.
16. Lim denne koden inn direkte under <head>-tagen:
17. Lagre malen og gjør det samme på “Mobilvisning” (se øverst på bildet her, der er en knapp for “Mobilvisning).
18. Dette må gjentas på “Forside”, “Innlegg”, “Video”, “Podcast”, “Kategori” og “Arkiv”. Husk å lagre malen mellom hver gang!
19. Nå kan du oppdatere bloggen din og se på favikonet. Prøv å åpne den på mobil og lagre bloggen på startsiden (i chome er det ved å trykke på de tre prikkene oppe til høyre og deretter på “Legg til på startsiden”:
Håper dette var til hjelp og tips for noen! Masse lykke til. For flere webtips, sjekk ut alt jeg har postet om webutvikling her.
takk for tipset! har lurt på dette en stund hehe 😀
Maiken Johnsen: Det er bare å spørre om det er noe annet du lurer på 😀 Kaanskje jeg kan svare, haha!
Så spennende, men jeg tror ikke jeg har alle de duppe dingsene på denne pc’n her! 😀 hehe
Faviconet mitt er ganske utydelig. Det kan være litt for detaljert men det kan også være fordi filen var ikke 100×100. Jeg har laget det i Canva som ikke har 100×100 som alternativ. Er det mulig å justere størrelsen på pc-en?
Ingrid; voksen tilslutt: Hva slags størrelser finnes? 😀 Du kan nok bruke både større og mindre størrelse, men jeg brukte 100×100, så bildet skulle bli skarpt nok i både favicon-størrelse og mobilikon-størrelse 🙂 Jeg anbefaler også å lagre fila som .png, for .jpg utgjevner pikslene mer, og på logoer og ikoner ønsker man gjerne ikke den effekten.
Å justere størrelsen på pcen i ettertid vil nok ha samme virkning som å legge et stort bilde inn i favicon-generatoren 😀
Therese Bråthen: Du kan lage i Paint om du vil 😀 Bildet må bare være en liiiten kvadrat, og så putter du den bare inn i den linken jeg postet. Og følger resten av oppskriften i blogg-grensesnittet!
Takk for tips, kommer godt med! 😀
Hmm, da skal jeg prøve det! 🙂 Kan hende jeg sender deg en melding om jeg er litt usikker! 😀
girlswithnojob: Bare hyggelig 😀
Therese Bråthen: Gjør gjerne det 😀