En favoritikon (favicon), hvad er det? Ser du ikonet deroppe, når du besøger en webside eller et websted. Det lille ikon? Ja, det er en favicon lige der. Du vil finde dem vist på "fanen" øverst i en webbrowser (f.eks. Google Chrome, Apple Safari), typisk 16x16 pixels i størrelse, der repræsenterer en webside/websted. Du vil også finde favicons på mobile hjemmeskærme, en browsers bogmærkelinje og i søgeresultaterne.
Selvom det er "mini" i størrelse, har det meget på sine skuldre: Det kan gøre dit brand øjeblikkeligt genkendeligt, forbedre brugeroplevelsen og styrke brandidentiteten.
Så det spiller en betydelig rolle i branding (konsistens, genkendelse og husk). I det følgende vil vi dele processen med at oprette en favoritikon fra dit logo. Lyder det teknisk? Vi vil bevise for dig, at det ikke er.
Vi vil endda lære dig, hvordan du gør det hurtigt - selv uden designoplevelse - og måder at optimere og integrere det på din hjemmeside. Lad os komme i gang.
Forståelse af Favicons
Som nævnt er det et lille billede, der direkte repræsenterer din hjemmeside (dit hjem på WWW). Som en visuel genvej eller tegn lader det brugerne hurtigt identificere det, selvom de har mindst syv browsere åbne samtidig.
Standardformater
- .png: Brugervenlig. Det kræver ikke specielle grafiske designværktøjer at oprette det.
- .ico: Microsoft udviklede ICO, det originale favicon-filformat. Dette format tillader flere små billeder inden i samme fil og understøttes af alle browsertyper. (Mest bredt understøttet af browsere)
- .svg: Letvægts og meget skalerbar, men har i øjeblikket ikke fremragende browserunderstøttelse. Det går dog ikke på kompromis med indlæsningstider. (Kun Opera, Firefox og Chrome understøtter det)
Dette er de mest almindelige, selvom yderligere formater kan være tilgængelige til specifikke enheder eller browsere.
Anbefalede størrelser (i pixels)
PNG (*Browsere accepterer ethvert firkantet billede)
16x16
32x32
ICO
16x16
32x32
48x48
Men bemærk. Nogle hjemmesider kan kræve højere opløsninger (f.eks. 64x64, 128x128 eller 512x512 til mobile enheder og retina-skærme).
Sådan forbereder du dit logo til en Favicon
Først og fremmest: Ikke alle logoer kan være favicons. Nogle er ikke egnet til at være en. Derfor betyder det, hvordan du designer dem, noget.
Har du et logo med indviklet tekst eller detaljer? Vi anbefaler at bruge et genkendeligt element, som en monogram eller et symbol fra din branding, i stedet.
Eller indeholder dit logo små tekst eller detaljer? Dette kan være ulæseligt, når det skaleres ned. Vi anbefaler kraftigt at bruge højkontrast- eller endda fedede elementer for maksimal synlighed.
Det er også klogt at bruge en gennemsigtig baggrund, fordi det tillader en problemfri blanding af din favicon med forskellige browser-temaer, men en solid, ensfarvet baggrund er en god idé, hvis det forbedrer ikonets klarhed.
Vil du have din favicon til at se poleret ud og være let genkendelig? Brug skarpe kanter i et afbalanceret design.
Sådan opretter du en Favicon fra et Logo
Hvis du allerede har oprettet et logo med logogenie.com, er det tid til at oprette en favicon. Her er populære måder at gøre det på.
Online Favicon-generatore
Brug et online værktøj/generator som Favicon.cc, Favicon.io eller RealFaviconGenerator for at gøre processen bekvem og hurtig - uden at ændre størrelse og konvertere dit logo til filformater manuelt. [Vi har også udarbejdet en guide om de rigtige logo-størrelser.]
Upload dit brandlogo og konverter det til forskellige favicon-størrelser (og endda generer en eller flere opløsninger, som du finder passende for at sikre din favoritikons kompatibilitet på tværs af enheder, browsere og operativsystemer).
- Upload dit logo-billede.
- Tilpas de online favicon-generatorindstillinger.
- Download din favicon!
(Nogle værktøjer tilbyder også en pakke med de forskellige favicon-versioner for et ensartet udseende og tidsbesparende måder at ændre størrelse og konvertere på din side.)
Grafiske designværktøjer/software
Vil du have en tilpasset favicon? Vi anbefaler at bruge Illustrator, Adobe Photoshop, Canva eller GIMP. Inden du går i gang, skal du indstille størrelsen på lærredet (dimensioner: 128x128 px eller 64x64px) for de bedste resultater.
Du skal muligvis ændre størrelsen og justere dit firmalogo (eller oprette et forretningslogo først) for at sikre synlighed og klarhed, selv i mindre størrelser. Vi anbefaler at designe et skarpt og rent design for bedre skalering.
Husk at gemme det i PNG-format, før du konverterer det til et favicon-format som ICO for kompatibilitet. [Hvis du designer i Photoshop, skal du vælge "Gem til web" for at optimere filkvaliteten og størrelsen passende.]
Konvertering af billedet til Favicon-format
Designprocessen slutter ikke med at have din færdige JPG/PNG-fil, fordi du skal konvertere den til ICO-formatet for at sikre dens browserkompatibilitet. Brug konverteringsværktøjer som ICOConvert, ConvertICO og Favicon.io til dette.
Mens du foretrækker en standardstørrelse (16x16 osv.), anbefaler vi at generere flere størrelser for at sikre, at den korrekte størrelse er let tilgængelig for forskellige enheder. WordPress og andre platforme tillader direkte upload af en PNG-fil, dog.
Men at have en ICO-version kan sikre maksimal kompatibilitet på tværs af flere platforme.
Sådan tilføjer du en Favicon til din hjemmeside
Nu videre til næste trin. Med din favicon klar, lad os gå videre til det næste essentielle trin: at uploade den til din hjemmeside.
Gå til rodmappe og upload den der. Alternativt kan du placere favicon-filen direkte på /favicon.ico for at sikre, at den automatisk bliver opdaget af de fleste browsere.
Bruger du en no-code hjemmesidebygger som Dorik, Wix, Shopify eller WordPress? Hvis ja, gå til temaindstillingerne og upload favicon der. Hvis du ikke kan finde, hvor du skal uploade det i indstillingerne, gå til den dedikerede favicon-uploadsektion.
I mellemtiden, hvis du har en brugerdefineret bygget hjemmeside, der kræver manuel integration, skal du sikre, at den er gemt et tilgængeligt sted.
For at opdatere HTML-koden
af HTML-koden:
- Indsæt link-tagget i
- Er favicon gemt i en undermappe? Erstat favicon.png med den faktiske filsti til din favicon. Forbedr kompatibiliteten med et ekstra tag, fordi nogle webbrowsere kræver en ICO-fil.
Med yderligere meta-tags kan du identificere eller specificere ikoner til Android-enheder, Apple-enheder eller Windows, hvilket sikrer en problemfri brugeroplevelse med flere favicon-versioner.
For at opdatere CMS eller WordPress Favicon
WordPress
Gå til Udseende > Tilpas > Webstedsidentitet.
Upload favicon.
Shopify
Gå til Indstillinger > Filer eller inden for din temaeditor.
*Andre hjemmesidebyggere, såsom Squarespace eller Wix, kan have deres uploadmuligheder, som du kan finde i Indstillinger. TIP: Tjek din favicon på tværs af browsere og enheder og se, om de vises korrekt
Testning og fejlfinding
"Min favicon vises ikke. Hvad skal jeg gøre?" Ryd din browsercache og opdater siden. Husk, at nogle browsere kan tage tid om at genkende din nye favicon-upload.
Derudover skal du kontrollere, om favicon er implementeret med værktøjer som en online favicon-generators checker.
Men hvis du stadig ikke kan se den nyoploadede favoritikon, skal du kontrollere filstien igen. Se, om den er korrekt linket i din HTML-kode. Endelig skal du sikre, at den vises konsekvent på flere browsere som Edge, Firefox, Chrome og Safari.
Bedste praksis for Favicon-design
Brug dit logo eller brandsymbol til at hjælpe brugerne med at genkende din hjemmeside, når de gennemser hjemmeskærme og bogmærkelister.
Hvis du ikke har et logomærke, der passer ind i det firkantede lærred, skal du huske at bruge dets mest genkendelige del.
En gennemsigtig baggrund kan være et bedre valg end en med baggrundsfarver. Nogle brugere kan finde sidstnævnte for overvældende og ofte forældet. Derudover kan en gennemsigtig version deles eller uploades næsten overalt, fordi den ikke vil modsige de baggrundsfarver, en enhed, en browser eller en hjemmeside har.
Simplicitet er nøglen til en effektiv favicon!
Brug ikke intrikate linjer eller kompleks tekst, især hvis du bruger den mindste størrelse. Derudover skal den være genkendelig, selv på afstand, så vi anbefaler at bruge din logos forenklede og kondenserede version, hvis du oprindeligt brugte dens farverige og komplekse version.
Overvej branding
Hvordan vil den blive set eller opfattet af folk, der besøger din hjemmeside for første gang? Du skal afstemme den med de nuværende brandingstilretningslinjer for at sikre konsistens! Husk, den er en del af en større identitet, så sørg for, at den ser ud som om den er en del af dit brand.
Udnyt hele pladsen
PRO tip: For at maksimere pladsen, fyld baggrunden på din favicon med farve, før du tilføjer dit logo/ikon i midten.
Du behøver dog ikke en solid baggrund for at udnytte hele pladsen, fordi gennemsigtige baggrunde fungerer perfekt. Overordnet set, uanset hvad du sætter i rummet, skal du sikre, at det kan strække sig tættere på grænserne af dit favicon-design for at forbedre dets klarhed.
Brug en SVG-fil til moderne browsere, fordi den tilbyder fremragende skalering.
Da den er vektorbaseret, kan den bevare skarphed uanset størrelse, hvilket gør den ideel til at fremtidssikre dit webdesign og på højopløsningsdisplays. Den er også letvægt, hvilket forbedrer den samlede webstedsydelse og reducerer indlæsningstider.
Afsluttende tanker
Brug en let genkendelig, enkel, fed og simpel favicon uden overdrevne detaljer - det kan gøre den mindre synlig i små størrelser. Hold den i overensstemmelse med dit brand for at forbedre professionalisme og styrke din identitet. Sørg for klarhed og kompatibilitet på tværs af alle platforme.
De trin, vi har beskrevet ovenfor, bør få dig i gang med at oprette en professionelt udseende favicon til din webside eller dit websted med dit logo. Så kom i gang, opret en favicon og implementer den for at få din hjemmeside til at se poleret ud og genkendelig for dit publikum, uanset hvor de finder den.
