Favicon-generator
Læg dit logo i favicon-generatoren, og få et komplet sæt faviconfiler, fra ikonet på 16 pixels i browserfanen til appikonet på 512 pixels, plus HTML-koden, du skal indsætte. Det hele sker i din browser, så dit billede bliver aldrig uploadet.
Qwyzzle
Summit Roasters
Fox EsportsSlip dit logo her
PNG, JPG, WebP eller SVG. Kvadratisk virker bedst, 512 px eller større.
Laves i din browser. Dit billede bliver aldrig uploadet.
Hvad en favicon er, og hvor den vises
En favicon er det lille kvadratiske ikon, der repræsenterer din hjemmeside. Navnet kommer af det engelske ”favorite icon”, favoritikon. Den første browser, der viste en favicon, satte den ved siden af bogmærkerne, som den kaldte Favorites.
Du ser den i browserfaner ved siden af sidens titel, 16 pixels bred eller 32 på en skarpere skærm. Den markerer også din hjemmeside i bogmærker og browserhistorik. Når nogen gemmer din hjemmeside på telefonens hjemmeskærm, bliver den til et appikon. Og Google viser den ved siden af din hjemmesides navn i søgeresultaterne.
Overalt har den samme opgave: at blive genkendt med det samme blandt andre ikoner.
Hvorfor én favicon bliver til flere filer
Hvert af de steder kom til på forskellige tidspunkter og beder om sin egen fil. Favicon-generatoren ovenfor laver dem alle ud fra ét billede.
Browserfaner, bogmærker og historik bruger favicon.ico, én fil med versioner på 16, 32 og 48 pixels. Det er det ældste format: Når en side ikke angiver noget ikon, leder browsere stadig efter favicon.ico i hjemmesidens rodmappe.
Starter du fra en SVG, får du også favicon.svg, som bruges i stedet af browsere, der kan tegne SVG-ikoner. Den består af former frem for pixels og forbliver derfor skarp på alle skærme.
iPhones og iPads bruger apple-touch-icon.png på 180 × 180 pixels, når nogen føjer din hjemmeside til hjemmeskærmen. En iPhone fylder gennemsigtige områder med sort, så dette ikon får altid en heldækkende baggrund: din farve eller hvid, hvis du valgte gennemsigtig.
Android-telefoner og hjemmesider, der installeres som apps fra en browser, bruger icon-192.png og icon-512.png. De finder dem via site.webmanifest, en lille tekstfil, der fortæller browsere din hjemmesides navn, hvis du skrev et i værktøjet, og hvor de større ikoner ligger.
De løse PNG-filer fra 16 til 48 pixels er reserver til tjenester, der vil have en PNG. Til søgeresultaterne læser Google ikonlinksene i din forsides HTML.
Sådan lægger du faviconfilerne på din hjemmeside
Hvis du eller din udvikler redigerer hjemmesidens filer, tager det to trin.
Pak først downloadet ud, og læg filerne i hjemmesidens rodmappe, den øverste mappe, hvor forsiden ligger. Tjek det ved at tilføje /favicon.ico efter din hjemmesides adresse: Så skal ikonet blive vist.
Indsæt derefter HTML-linjerne fra README-filen (værktøjet viser dem også) i dine siders head-sektion: afsnittet øverst i HTML-koden, der indeholder sidens titel. Der er en linje til ICO-filen, en til Apple touch-ikonet og en til manifestet, plus en til SVG-filen, hvis du har en.
Som regel deler alle sider én sideskabelon, så du skal kun indsætte linjerne én gang. Slet først eventuelle ældre ikonlinjer, ellers kan browsere blive ved med at vælge det gamle ikon.
Bruger du en hjemmesidebygger, kan du springe begge trin over: Upload icon-512.png under indstillingen for webstedsikon, så tilføjer byggeren HTML-koden for dig.
Sådan får du et logo til at virke på 16 pixels
Ved 16 × 16 pixels består hele dit ikon af 256 bittesmå farvefelter. De fleste logoer er ikke tegnet til det.
Start med symbolet, ikke navnet: Presser du et navn på otte bogstaver ind på 16 pixels, får hvert bogstav to pixels i bredden. Intet symbol? Brug det første bogstav, stort og fedt. Kraftige bogstaver holder også meget længere end tynde, når de bliver små.
Fjern derefter detaljer. Meget tynde streger og små mellemrum flyder sammen med omgivelserne, og et slogan bliver til en plet.
Det, der tæller, er lyst mod mørkt, ikke selve farverne. Faner er lyse eller mørke afhængigt af temaet, og et marineblåt ikon forsvinder på en mørk fanelinje. Er dit logo mørkt, så giv det en lys baggrund i værktøjet, eller omvendt.
Margenen, afstanden mellem dit logo og kanten af kvadratet, er en afvejning. Er den for stor, skrumper logoet i fanen. Er den for lille, skærer en iPhone logoets hjørner af, fordi den afrunder ikonerne på hjemmeskærmen.
Tjek til sidst de lyse og mørke fanevisninger ovenfor i deres rigtige størrelse uden at zoome ind. Vil du gå videre, så tjek dit logo gratis: Værktøjet krymper det til 32 pixels og måler, hvor mange detaljer der overlever.
Hvornår du skal tegne symbolet om i stedet for at krympe det
Nogle gange kan intet redde det. I en detaljeret illustration eller et 3D-look, der bygger på skygger, er detaljerne selve designet, og ved 16 pixels er de væk. Værktøjet kan ændre størrelsen på dit logo, men det kan ikke tegne det om.
Det gør det ikke til et dårligt logo, kun til et, der er lavet til større flader. Tegn i stedet en særlig lille udgave: et forenklet symbol eller din initial i dit brands skrifttype. Behold dine farver og noget af formen, så forbinder folk de to. Vi vælger en tydelig initial frem for en sløret miniature hver gang.
Brug for et nyt symbol? Vores AI-logogenerator designer et ud fra dit brandnavn, plus en kort beskrivelse, hvis du vil. Logoer fra vores logoskabeloner leveres med symbolet som en separat fil, når de har et, og hvert logo, du køber hos os, indeholder sine faviconfiler.
Spørgsmål om favicons
Den er gratis, uden tilmelding og uden vandmærke. Og dit billede bliver hos dig. Værktøjet kører helt i din browser: Det laver alle størrelser og zip-filen direkte på din enhed, og billedet bliver aldrig sendt til vores servere. Derfor kan du roligt bruge det til et logo, du ikke har vist nogen endnu.
Kvadratisk og mindst 512 pixels på hver led. Det største ikon i sættet er 512 pixels, så en mindre PNG, JPG eller WebP skal strækkes for at fylde det, og de store ikoner bliver uskarpe. Værktøjet siger til, når det sker. En SVG har ikke den begrænsning: Den består af former, ikke pixels, og forbliver derfor skarp i alle størrelser. Et bredt logo fylder kun en tynd stribe af et kvadrat, så start fra dit symbol eller din initial.
Du skal bruge dem alle, fordi forskellige browsere og telefoner beder om forskellige filer, og HTML-koden fra værktøjet fortæller hver af dem, hvilken fil de skal bruge. ICO-filen forstår alle browsere. PNG-filerne er til telefoner og installerede apps, med reserver i de små størrelser. SVG-filen, som du får, når du starter fra en SVG, forbliver skarp på alle skærme i browsere, der understøtter den.
Sandsynligvis viser din browser en gemt kopi. Browsere holder fast i favicons meget længere end i resten af en side, så det gamle ikon kan blive hængende, efter at de nye filer er lagt online. Prøv en hård genindlæsning, der genindlæser siden uden de gemte filer: Ctrl+Shift+R i Windows, Cmd+Shift+R på en Mac (Option+Cmd+R i Safari). Hjælper det ikke, så åbn din hjemmesides adresse med /favicon.ico i slutningen, og genindlæs den, eller kig i et privat vindue. Andres browsere følger med efter et stykke tid.
Ind i byggerens indstillinger frem for i en mappe. De fleste hjemmesidebyggere og webshopplatforme har en indstilling for webstedsikon eller favicon, hvor du uploader én kvadratisk PNG. Vælg icon-512.png, den største fil i zip-filen, så byggeren har rigeligt at arbejde med, når den laver mindre størrelser. Beder indstillingen om en bestemt størrelse, så brug den fil, der passer. Byggeren tilføjer HTML-koden for dig, så du kan springe README-filen over.
Google opdager en ny favicon, næste gang Googles crawler besøger din forside. Crawleren er det program, der læser websider for Google, og den kommer ikke efter en fast tidsplan. Google vil have et kvadratisk billede og ikonlinket i din forsides HTML, så tjek, at begge dele er på plads. Derefter er det op til Google, hvad der vises og hvornår, så giv det tid.
Intet logo endnu? Begynd her.
Design et med vores AI-logogenerator eller med en skabelon i logoværktøjet. Hvert logo, du downloader fra DepthLogo, leveres allerede med favicons.