Sådan bruger du det
- Vælg Bogstaver og indtast et eller to tegn med dine farver, eller vælg Billede og vælg et logo (helst kvadratisk, mindst 512 px).
- Tjek forhåndsvisningerne i alle størrelser, især 16 og 32 px, som vises i browserfaner.
- Download ZIP-filen, og upload dens filer til rodmappen på dit websted.
- Indsæt HTML-tags i head-sektionen på dine sider, og justér navnet i site.webmanifest, hvis det er nødvendigt.
Sådan fungerer det
Browsere og enheder leder efter ikoner forskellige steder. Sættet, der oprettes her, dækker de almindelige tilfælde: favicon.ico med billeder på 16, 32 og 48 px til browserfaner, bogmærker og ældre software, der automatisk anmoder om /favicon.ico; PNG-filer på 16 og 32 px, som refereres via link-tags; et apple-touch-icon på 180 × 180, som bruges, når nogen føjer dit websted til hjemmeskærmen på en iPhone eller iPad; og ikoner på 192 og 512 px, som refereres fra site.webmanifest til Android-hjemmeskærme og installerbare webapps.
Filen favicon.ico gemmer ikonerne som PNG-billeder i en ICO-beholder, som alle aktuelle browsere og Windows Vista eller nyere kan læse. ICO- og ZIP-filerne sammensættes af kode på denne side; intet sendes til en server.
Små størrelser kræver et enkelt design: ved 16 × 16 pixels forsvinder tynde linjer og lille tekst, så et fedt bogstav eller et forenklet logo-mærke fungerer bedre end et fuldt logo med ord. Billedet nedskaleres i flere trin af høj kvalitet. apple-touch-icon får altid en ensfarvet baggrund, fordi iOS udfylder gennemsigtige områder med sort, og iOS runder selv hjørnerne.
Efter upload af nye ikoner kan browsere blive ved med at vise det gamle favicon i et stykke tid, fordi de cacher det aggressivt. En tvungen opdatering eller at åbne /favicon.ico direkte hjælper som regel.
Eksempler
Bogstavikon til et nyt projekt
At skrive "TG" med hvide bogstaver på en mørkegrøn, afrundet firkant giver et rent ikon, der forbliver læsbart ved 16 × 16 px i en browserfane uden at kræve et designet logo.
Ikon fra et eksisterende logo
Et 1024 × 1024 PNG-logo med gennemsigtig baggrund, indstillet til Tilpas hele billedet, giver gennemsigtige faneikoner og et apple-touch-icon i din brandfarve.
Bredt logo
For et 1200 × 300 ordmærke bevarer beskæring af midten kun de midterste bogstaver. Tilpasning af hele billedet bevarer alt, men gør det meget lille; et separat kvadratisk logomærke ser som regel bedre ud.
Ofte stillede spørgsmål
Skal jeg stadig bruge favicon.ico?
Det er stadig nyttigt. Nogle browsere, feed-læsere og værktøjer anmoder om /favicon.ico fra webstedets rod, selv uden et link-tag. Moderne browsere bruger også PNG-ikonerne, der henvises til i HTML.
Hvor placerer jeg filerne?
Upload dem til rodmappen på dit websted, ved siden af din startside, så /favicon.ico og de andre stier i HTML'en virker. Hvis du bruger en undermappe, skal du ændre stierne i link-tags og i site.webmanifest.
Hvorfor vises mit gamle favicon stadig?
Browsere cachelagrer favicons separat og i lang tid. Prøv en hård opdatering, åbn /favicon.ico i en ny fane, eller tjek i et privat vindue. Omdøbning af filerne, f.eks. favicon-v2.ico, tvinger også en genindlæsning.
Opretter dette et SVG-favicon?
Nej. Den opretter PNG- og ICO-filer, som fungerer overalt. Hvis du allerede har et SVG-logo, kan du selv tilføje det med et link-tag af typen image/svg+xml ud over disse filer.
Privatliv
Ikoner, ICO-filen og ZIP-filen oprettes i din browser. Dit billede og din tekst hverken uploades, gemmes eller medtages i analyser.