Indsættelse af Favicon
Hvordan man gemmer som .ico- og indsætter favicon på sin hjemmeside.
Edited: 2017-11-13 03:59
Et Favicon bliver brugt til flere forskellige ting. Det kunne eksempelvis være det lille ikon man ser på et fanablad i en browser, men det bliver også brugt, når man tilføjer en side til sine favoritter eller bogmærker.
Selve ikonet kan man gemme som enten .png eller .ico, hvoraf .ico er det bedste. Når man inkludere ikon filen i sin HTML, skal man gøre det i head delen af siden ved brug af link elementet. Se et eksempel nedenfor:
<link rel="shortcut icon" href="/favicon.ico">
Bemærk. Ikonet er her placeret i roden på dit domæne. Se evt: Absolutte og Relative Stier
Det er også muligt at bruge .png:
<link rel="icon" type="image/png" href="/image.png">
Hvordan man gemmer .ico filer
Det er meget normalt, at man bruger en .ico fil i stedet for individuelle .png filer, da man derved kan gemme flere forskellige størrelser af sit ikon i den samme fil.
Når man gemmer sit ikon, kan det være en god idé ikke at gemme det i mere end 2-4 forskellige størrelser. Man skal altså helst undgå at tænke for meget over, hvilke størrelser og formater de enkelte devices bruger, da det hurtigt kan blive for meget arbejde at holde styr på. Normalt vil et givent device bare benytte det ikon, som ligger tættest på den størrelse der skal bruges.
Mange grafik programmer kan ikke gemme som ico som standard. Det kan derfor være nødvendigt, at man downloader et plugin til at behandle ico filer med. Hvis man ikke kan finde et plugin til sit nuværende program, så har gratis programmet Paint.NET et ganske udemærket plugin til det formål. Se links nedenfor:
- Paint.NET Website - getpaint.net
- IcoCur.zip - forums.getpaint.net
- Photoshop .ico Plugin - telegraphics.com.au
Forskellen på png og ico
Forskellen er, at ico understøtter flere billeder, i forskellig størrelse og farvedybde, i samme fil, imens png kun tillader et billede per fil.
Mange browsere vil simpelthen sende en anmodning efter favicon.ico, uanset om filen er linket i sidens HTML eller ej, hvilket vil resultere i en 404 fejl hvis filen ikke eksistere.
Både png og ico understøtter fuld alpha gennemsigtighed på billeder (32-bit farver).
Sådan linker du dit favorit ikon
Dit favorit ikon skal linkes i head delen af HTMLen. Bruger du favicon.ico, kan det stadig være en god idé at linke til den, selvom mange browsere selv vil sende en anmodning efter den. Vi ved nemlig ikke om dette vil ændre sig i fremtiden.
<!doctype html> <html> <head> <title>Mit første hjemmeside design</title> <link rel="shortcut icon" href="/favicon.ico"> </head> <body> </body> </html>
Bruger du .png filer, så skal du bruge koden nedenfor i stedet:
<link rel="icon" type="image/png" href="/image.png">
Fortæl os hvad du tænker: