En favoritikon (favicon), vad är det? Se den ikonen där uppe när du besöker en webbsida eller webbplats. Den lilla ikonen? Ja, det är en favicon precis där. Du hittar dem visas på fliken längst upp i en webbläsare (t.ex. Google Chrome, Apple Safari), vanligtvis 16x16 pixlar i storlek, som representerar en webbplats/webbsida. Du hittar även favicons på mobila startsidor, en webbläsares bokmärkesfält och i sökresultat.
Även om den är "mini" i storlek, har den mycket på sina axlar: Den kan göra ditt varumärke omedelbart igenkännligt, förbättra användarupplevelsen och förstärka varumärkesidentiteten.
Så, den spelar en betydande roll i varumärkesbyggande (konsistens, igenkänning och återkallelse). I det följande kommer vi att dela med oss av processen att skapa en favoritikon från din logotyp. Låter det tekniskt? Vi ska bevisa för dig att det inte är det.
Vi kommer till och med att lära dig hur du gör det snabbt - även utan designupplevelse - och sätt att optimera och integrera det på din webbplats. Låt oss börja.
Förståelse för Favicons
Som nämnts är det en liten bild som direkt representerar din webbplats (ditt hem på WWW). Som en visuell genväg eller skylt låter den användare snabbt identifiera den även om de har minst sju webbläsare öppna samtidigt.
Standardformat
- .png: Användarvänlig. Att skapa den kräver inte speciella grafiska designtillbehör.
- .ico: Microsoft utvecklade ICO, det ursprungliga favicon-filformatet. Detta format tillåter flera små bilder inom samma fil och stöds av alla webbläsartyper. (Mest brett stödd av webbläsare)
- .svg: Lättviktig och mycket skalbar, men har för närvarande inte utmärkt webbläsarstöd. Det offrar dock inte laddningstider. (Endast Opera, Firefox och Chrome stöder det)
Dessa är de vanligaste, även om ytterligare format kan vara tillgängliga för specifika enheter eller webbläsare.
Rekommenderade storlekar (i pixlar)
PNG (*Webbläsare accepterar vilken fyrkantig bild som helst)
16x16
32x32
ICO
16x16
32x32
48x48
Observera dock. Vissa webbplatser kan kräva högre upplösningar (t.ex. 64x64, 128x128 eller 512x512 för mobila enheter och retina-skärmar).
Hur du förbereder din logotyp för en favicon
Först och främst: Inte alla logotyper kan vara favicons. Vissa är inte lämpliga att vara en. Därför spelar det roll hur du designar dem.
Har du en logotyp med intrikata texter eller detaljer? Vi rekommenderar att använda ett särskiljande element, som en monogram eller symbol från din varumärkning, istället.
Innehåller din logotyp små texter eller detaljer? Detta kan vara oläsligt när det skalas ned. Vi rekommenderar starkt att använda högkontrast- eller till och med fetstilselement för maximal synlighet.
Det är också klokt att använda en transparent bakgrund eftersom det möjliggör sömlös blandning av din favicon med olika webbläsarteman, men en solid, enfärgad bakgrund är en bra idé om det förbättrar ikonens tydlighet.
Vill du att din favicon ska se polerad och lättidentifierad ut? Använd skarpa kanter i en balanserad design.
Hur du skapar en favicon från en logotyp
Om du redan har skapat en logotyp med logogenie.com är det dags att skapa en favicon. Här är populära sätt att göra det.
Online Favicon-genererare
Använd ett onlineverktyg/generator som Favicon.cc, Favicon.io eller RealFaviconGenerator för att göra processen bekväm och snabb - utan att behöva ändra storlek och konvertera din logotyp till filformat manuellt.
Ladda upp din varumärkeslogotyp och konvertera den till olika favicon-storlekar (och även generera en eller flera upplösningar som du anser lämpligt för att säkerställa din favoritikons kompatibilitet över enheter, webbläsare och operativsystem).
- Ladda upp din logotypbild.
- Anpassa inställningarna för den online favicon-genereraren.
- Ladda ner din favicon!
(Vissa verktyg erbjuder också en paket med olika favicon-versioner för en enhetlig look och tidsbesparande sätt att ändra storlek och konvertera på din sida.)
Grafiska designtillbehör/program
Vill du ha en anpassad favicon? Vi rekommenderar att använda Illustrator, Adobe Photoshop, Canva eller GIMP. Innan du börjar, ange storleken på duken (dimensioner: 128x128 px eller 64x64px) för bästa resultat.
Du kan behöva ändra storlek och justera din företagslogotyp (eller skapa en företagslogotyp först) för att säkerställa synlighet och tydlighet, även i mindre storlekar. Vi rekommenderar att designa en skarp och ren design för bättre skalning.
Kom ihåg att spara den i PNG-format innan du konverterar den till ett favicon-format som ICO för kompatibilitet. [Om du designar i Photoshop, välj "Spara för webben" för att optimera filkvaliteten och storleken lämpligt.]
Konvertera bilden till Favicon-format
Designprocessen slutar inte med att ha din färdiga JPG/PNG-fil eftersom du måste konvertera den till ICO-formatet för att säkerställa dess webbläsarkompatibilitet. Använd konverteringsverktyg som ICOConvert, ConvertICO och Favicon.io för detta.
Även om du föredrar en standardstorlek (16x16 osv.) rekommenderar vi att generera flera storlekar för att säkerställa att rätt storlek är lättillgänglig för olika enheter. WordPress och andra plattformar tillåter direkt uppladdning av en PNG-fil, dock.
Att ha en ICO-version kan ändå säkerställa maximal kompatibilitet över flera plattformar.
Hur du lägger till en favicon på din webbplats
Nu, vidare till nästa steg. Med din favicon redo, låt oss gå vidare till nästa viktiga steg: att ladda upp den på din webbplats.
Gå till rotkatalogen och ladda upp den där. Alternativt kan du placera favicon-filen direkt på /favicon.ico för att säkerställa att den automatiskt upptäcks av de flesta webbläsare.
Använder du en no-code-webbplatsbyggare som Dorik, Wix, Shopify eller WordPress? Om så är fallet, gå till temainställningarna och ladda upp favicon där. Om du inte kan hitta var du ska ladda upp den i inställningarna, gå till den dedikerade avsnittet för favicon-uppladdning.
Om du har en anpassad webbplats som kräver manuell integration måste du se till att den är lagrad på en åtkomlig plats.
För att uppdatera HTML-koden
av HTML-koden:
- Sätt in länktaggen i
- Är favikonet lagrat i en undermapp? Ersätt favicon.png med den faktiska filvägen till din favicon. Förbättra kompatibiliteten med en ytterligare tagg eftersom vissa webbläsare kräver en ICO-fil.
Med ytterligare metataggar kan du identifiera eller specificera ikoner för Android-enheter, Apple-enheter eller Windows, vilket säkerställer en smidig användarupplevelse med flera favicon-versioner.
För att uppdatera CMS eller WordPress-favicon
WordPress
Gå till Utseende > Anpassa > Webbplatsidentitet.
Ladda upp favikonet.
Shopify
Navigera till Inställningar > Filer eller inom din temaredigerare.
*Andra webbplatsbyggare, som Squarespace eller Wix, kan ha sina uppladdningsalternativ, som du kan hitta i Inställningar. TIPS: Kontrollera din favicon över webbläsare och enheter och se om de visas korrekt.
Testning och felsökning
"Min favicon visas inte. Vad ska jag göra?" Rensa webbläsarens cache och uppdatera sidan. Kom ihåg att vissa webbläsare kan ta tid att känna igen din nya favicon-uppladdning.
Dessutom, kontrollera om favikonet har implementerats med verktyg som en online favicon-generators kontroll.
Men om du fortfarande inte kan se den nyuppladdade favoritikonen, kontrollera filvägen igen. Se om den är korrekt länkad i din HTML-kod. Slutligen, se till att den visas konsekvent på flera webbläsare som Edge, Firefox, Chrome och Safari.
Bästa praxis för favicon-design
Använd din logotyp eller varumärkessymbol för att hjälpa användare att känna igen din webbplats när de bläddrar på startsidor och bokmärkeslistor.
Om du inte har en logotyp som passar in i det fyrkantiga duken, kom ihåg att använda dess mest igenkännbara del.
En transparent bakgrund kan vara ett bättre val än en med bakgrundsfärger. Vissa användare kan tycka att den senare är för överväldigande och ofta föråldrad. Dessutom kan en transparent version delas eller laddas upp nästan var som helst eftersom den inte motsäger vilka bakgrundsfärger en enhet, en webbläsare eller en webbplats har.
Enkelhet är nyckeln till en effektiv favicon!
Använd inte intrikata linjer eller komplex text, särskilt om du använder den minsta storleken. Dessutom måste den vara igenkännbar, även på avstånd, så vi rekommenderar att du använder din logotyps förenklade och kondenserade version om du först använde dess färgglada och komplexa version.
Överväg varumärkning
Hur kommer den att ses eller uppfattas av personer som besöker din webbplats för första gången? Du måste anpassa den till de nuvarande varumärkesstilriktlinjerna för att säkerställa konsistens! Kom ihåg, den är en del av en större identitet, så se till att den ser ut som en del av ditt varumärke.
Utnyttja hela utrymmet
PRO-tipset: För att maximera utrymmet, fyll bakgrunden på din favicon med färg innan du lägger till din logotyp/ikon i mitten.
Du behöver dock inte en solid bakgrund för att utnyttja hela utrymmet eftersom transparenta bakgrunder fungerar perfekt. Oavsett vad du lägger i utrymmet, se till att det kan sträcka sig närmare gränserna för din favicon-design för att förbättra dess tydlighet.
Använd en SVG-fil för moderna webbläsare eftersom den erbjuder utmärkt skalbarhet.
Eftersom den är vektorbaserad kan den behålla skärpan oavsett storlek, vilket gör den idealisk för att framtidssäkra din webbdesign och för högupplösta skärmar. Den är också lättviktig, vilket förbättrar den totala webbplatsprestandan och minskar laddningstiderna.
Slutsatser
Använd en lättigenkännlig, enkel, fet och enkel favicon utan överdrivna detaljer - det kan göra den mindre synlig i små storlekar. Håll den i linje med ditt varumärke för att förbättra professionalismen och förstärka din identitet. Se till att den är tydlig och kompatibel över alla plattformar.
De steg vi har beskrivit ovan bör få dig att komma igång med att skapa en professionell favicon för din webbsida eller webbplats med din logotyp. Så, gå vidare, skapa en favicon och implementera den för att göra din webbplats se polerad och igenkännbar ut för din publik var de än hittar den.
