Favicon-generator

Hva et favicon er, og hvor det vises

Et favicon er det lille kvadratiske ikonet som representerer nettsiden din. Navnet er en forkortelse av det engelske «favorite icon», favorittikon: den første nettleseren som viste favicons, plasserte dem ved siden av bokmerkene, som den kalte Favoritter.

Du ser det i nettleserfaner, ved siden av sidetittelen, 16 piksler bredt eller 32 på en skarpere skjerm. Det markerer også nettsiden din i bokmerkene og i historikken. Når noen lagrer nettsiden din på hjemskjermen på mobilen, blir det et appikon. Og Google viser det ved siden av navnet på nettsiden din i søkeresultatene.

Overalt har det den samme jobben: å bli gjenkjent med én gang blant andre ikoner.

Hvorfor ett favicon blir til et helt sett med filer

Disse stedene kom til på ulike tidspunkter, og hvert av dem ber om sin egen fil. Favicon-generatoren ovenfor lager dem alle fra ett bilde.

Nettleserfaner, bokmerker og historikk bruker favicon.ico, én fil med versjoner på 16, 32 og 48 piksler inni. Det er det eldste formatet: når en side ikke oppgir noe ikon, ser nettlesere fortsatt etter favicon.ico i rotmappen på nettsiden.

Starter du fra en SVG, får du også favicon.svg, som brukes i stedet av nettlesere som kan tegne SVG-ikoner. Den består av former i stedet for piksler, så den holder seg skarp på alle skjermer.

iPhone og iPad bruker apple-touch-icon.png, 180 × 180 piksler, når noen legger nettsiden din til på hjemskjermen. En iPhone fyller gjennomsiktige områder med svart, så dette ikonet får alltid en heldekkende bakgrunn: fargen din, eller hvit hvis du valgte gjennomsiktig.

Android-telefoner, og nettsider som er installert som apper fra en nettleser, bruker icon-192.png og icon-512.png. De finner dem via site.webmanifest, en liten tekstfil som forteller nettleseren hva nettsiden heter, hvis du skrev inn et navn i verktøyet, og hvor de større ikonene ligger.

De løse PNG-filene fra 16 til 48 piksler er reserver for tjenester som vil ha en PNG. Til søkeresultatene leser Google ikonlenkene i HTML-koden på forsiden din.

Slik legger du faviconfilene inn på nettsiden din

Hvis du eller utvikleren din redigerer filene til nettsiden, tar det to steg.

Pakk først ut nedlastingen, og legg filene i rotmappen på nettsiden, den øverste mappen der forsiden ligger. Sjekk ved å legge til /favicon.ico etter adressen til nettsiden: da skal ikonet vises.

Lim deretter inn HTML-linjene fra README-filen (verktøyet viser dem også) i head-delen på sidene dine, delen øverst i HTML-koden som inneholder sidetittelen. Det er én linje hver for ICO-filen, Apple touch-ikonet og manifestet, pluss én for SVG-filen hvis du har en.

Som regel bruker alle sidene den samme sidemalen, så du trenger bare å lime dem inn én gang. Slett eventuelle eldre ikonlinjer først, ellers kan nettlesere fortsette å velge det gamle ikonet.

Bruker du en nettsidebygger, kan du hoppe over begge stegene: last opp icon-512.png i innstillingen for nettstedsikon, så legger byggeren inn HTML-koden for deg.

Slik får du en logo til å fungere på 16 piksler

På 16 × 16 piksler består hele ikonet ditt av 256 bittesmå fargeruter. De fleste logoer er ikke tegnet for det.

Start med symbolet, ikke navnet: presser du et navn på åtte bokstaver inn på 16 piksler, får hver bokstav to piksler i bredden. Ikke noe symbol? Bruk forbokstaven, stor og fet. Kraftige bokstaver holder seg også mye lenger enn tynne når de krympes.

Fjern deretter detaljer. Veldig tynne linjer og små mellomrom flyter ut i omgivelsene, og et slagord blir til en flekk.

Det som teller, er lyst mot mørkt, ikke fargene i seg selv. Faner er lyse eller mørke avhengig av temaet, og et marineblått ikon forsvinner på en mørk fanelinje. Er merket ditt mørkt, gir du det en lys bakgrunn i verktøyet, eller omvendt.

Margen, avstanden mellom logoen og kanten av kvadratet, er et kompromiss. Er den for stor, krymper logoen i fanen. Er den for liten, kutter en iPhone hjørnene på logoen, fordi den runder av ikonene på hjemskjermen.

Se til slutt på forhåndsvisningene i lys og mørk fane ovenfor, i faktisk størrelse og uten å zoome inn. Vil du gå lenger, kan du sjekke logoen din gratis: sjekken krymper den til 32 piksler og måler hvor mye av detaljene som overlever.

Når du bør tegne merket på nytt i stedet for å krympe det

Noen ganger kan ingenting redde det. I en detaljert illustrasjon eller et 3D-uttrykk som bygger på skyggelegging, er detaljene selve designet, og på 16 piksler er de borte. Verktøyet kan endre størrelsen på logoen din, men det kan ikke tegne den på nytt.

Det gjør den ikke til en dårlig logo, bare til en som er laget for større flater. Tegn heller en egen liten versjon: et forenklet symbol, eller initialen din i merkevarens skrifttype. Behold fargene og noe av formen, så kobler folk de to sammen. Vi velger en tydelig initial fremfor en uskarp miniatyr hver gang.

Trenger du et nytt merke? AI-logogeneratoren vår designer et ut fra merkenavnet ditt, pluss en kort beskrivelse hvis du vil. Logoer fra logomalene våre har symbolet som en egen fil når de har et, og alle logoer du kjøper hos oss, inkluderer faviconfilene sine.