favicon design är viktigare än du kanske tror,. Storlek spelar verkligen roll här som en väl utformad logotyp måste vara igenkännlig oavsett storlek det ses på. Det måste skala från massiva skärmar ända ner till en ikon som kan vara så liten som 16 x 16 pixlar, känd som en favicon. Ett bra exempel på favicon design är Google-logotypen. Det fungerar perfekt för större skärmar med sin stora ” G ” och distinkt fyrfärgstext., Och det är fortfarande lika igenkännligt när krympt ner till den lilla fyrfärgade ” G ” sett i en webbläsare adressfältet.
favicon kan också ses som en genvägsikon, en flikikon eller en bokmärkesikon, så den måste se delen. För att se favicon mönster som fungerar, se vår roundup av logo design inspiration och kolla in denna fantastiska samling av iOS app ikoner som får det precis rätt.
i den här artikeln kommer vi att gå igenom processen för hur man utformar den perfekta favicon., Vi kommer att innehålla konkreta tips för att skapa en favicon för Apple-enheter, Android, Chrome, Opera och Safari. Plus en praktisk guide till de olika favicon storlekar och format du behöver veta. Använd snabblänkarna (höger) för att hoppa direkt till det avsnitt du vill ha.
- letar du efter en annan typ av ikon? Se vår guide till de bästa gratis ikonuppsättningarna
i början av webben var en favicon helt enkelt en 16x16px ikonfil, men nuförtiden är det lite mer komplicerat., Det finns olika favicon storlekar och processer för olika sammanhang. Att skapa en riktig favicon är en vetenskap.
Så, vi kommer att kick-off med några bästa tips för hur din favicon ska se ut, och sedan gå vidare till specifika råd om hur man skapar en favicon för olika sammanhang. Vi kommer att använda mallen som finns på Apply Pixels för att enkelt generera de olika favicon-storlekarna som krävs, och favicon från Apply Pixels som ett exempel.,
favicon design rules
gör det igenkännligt
det första att tänka på när man utformar en favicon är vad som behöver representeras i duken. Kom ihåg att din favicon endast visas för användaren när de redan finns på din webbplats eller har bokmärkt den. Så det finns ingen anledning att försöka locka användaren med din favicon.
Använd din logotyp
betrakta favicons som nyktra skyltar som hjälper användarna att känna igen din webbplats när de surfar på sina bokmärkeslistor och hemkretsar., Därför vill du använda din logotyp, eller vilken symbol som helst låter användaren känna igen din webbplats. Om du inte har ett logomark som passar den kvadratiska duken, använd den mest igenkännliga delen av din logotyp.
håll det klart
det finns också några saker du bör undvika. Använd inte favicon som marknadsföringsverktyg – det betyder inga prislappar, ” nya ”eller” uppdaterade ” banners och så vidare. Faktum är att du inte vill lägga text i favicon alls. Texten skalar inte bra, och chansen är att det kommer att vara oläsligt ändå., Slutligen, använd inte ett foto – det blir lerigt och oigenkännligt i den storlek det kommer att visas på.
skapa två versioner
När favicons först introducerades i Internet Explorer 5 uppträdde de i URL-fältet och i bokmärkeslistan. Idag visas favicons i många andra sammanhang, inklusive bokmärkeslistor, genvägsmenyer och till och med mobil-och TV-homescreens., Detta gör det svårt att förutsäga hur din favicon kommer att visas för slutanvändaren.
för att säkerställa att din favicon ser bra ut i de många olika sammanhang det kommer att visas i, helst bör du ge två favicon stilar:
logotyp på transparent bakgrund
den här versionen visas i URL-fältet, bokmärkeslistor och andra platser där favicon visas bredvid din webbadress eller namn.,
Logo on solid fill
den här versionen används i rutnätsliknande bokmärken och genvägsmenyer där webbläsaren eller enheten maskerar bakgrunden, för att uppnå ett enhetligt utseende i sammanhanget.
favicon size cheatsheet
som tidigare nämnts kräver olika sammanhang olika stora favicons. Nedan kan du se en snabbguide till de olika format och dimensioner du behöver för att leverera för att täcka alla de viktigaste användningsfall.
tidigare favicons måste tillhandahållas i ICO-formatet., Idag är det okej att tillhandahålla filerna i PNG-format (förutom Safari Pinned Tab-ikonen som ska tillhandahållas som SVG).
om du vill ha ett enkelt sätt att designa och exportera alla favicon-storlekar, ta en titt på favicon-mallen över vid Apply Pixels.
låt oss nu titta närmare på de specifika kraven i olika användningsfall.,
Desktop browser favicons
hur man skapar en stationär webbläsare favicon
låt oss börja med den enklaste favicon du behöver för att skapa: en klassisk favicon för de klassiska stationära webbläsarna. Denna typ av favicon fungerar bäst på transparenta bakgrunder, eftersom det ofta visas i URL-fältet och i bokmärkeslistor.,
Du kommer att behöva för att tillhandahålla denna typ av favicon i tre olika storlekar, alla i PNG-format med en transparent bakgrund.,
- 16×16
- 32×32
- 48×48
Apple
hur man skapar Apple Touch favicons
Apples iOS använder Apple Touch ikoner för att representera webbplatser som har sparats på iOS startskärmen som bokmärken. Detta innebär att Apple Touch-ikonen kommer att avrundas till squircle mask av iOS appikoner.
det kommer också att visas mot vilken bakgrund användaren har valt för startskärmen. Med detta i åtanke bör din Apple Touch-ikon ha en solid fyllning bakgrundsstil.,
Apple favicons bör levereras i PNG-format. Du kan komma undan med att tillhandahålla en 180×180 Apple Touch-ikon som automatiskt kommer att skala för de olika iPhone-och iPad-storlekarna. Detta kommer att fungera bra i de flesta fall.,
om inte, kan du ge ytterligare storlekar för de olika Apple-enheter:
- 60×60
- 76×76
- 120×120
- 152×152
- 180×180
Android, Chrome och Opera
hur man skapar en favicon för Android, Chrome och Opera
Android, Chrome och Opera använder Android-Chrome-192×192.png-och android-chrome-512×512.png som Google rekommenderar.,
sedan introduktionen av adaptiva ikoner i Android kommer webbplatser som läggs till Android-startskärmen att maskera 192×192-designen, så ikonen tar form efter användarens föredragna maskeringsstil. Detta kan vara en squircle, ellips, rektangel, rundad rektangel eller droppform.
Du måste skapa en PNG-favicon med solid bakgrund, vid 192×192 och 512×512.,
implementera dessa favicons genom att lägga till ett manifest.JSON fil till din webbplats och länka till den inom taggarna:
<link rel="manifest" href="/manifest.json">här är koden för manifestet.JSON file:
Safari
så här skapar du en favicon för Safari ’ s pinned tab
det här är den udda ut, och det är den enda favicon som behöver tillhandahållas i vektorformat som en SVG-fil. Den visas som miniatyrikonen när en användare stift en flik till Safari webbläsarfönstret.,
denna favicon måste vara en 100% svart SVG-fil med en transparent bakgrund. SVG kan bara vara ett lager, och safari kräver att vybox-attributet för SVG ska ställas in på”0 0 16 16″.
<link rel="mask-icon" href="your_icon.svg">andra favicon typer
det finns vissa favicon dimensioner och format som inte inkluderades i den här artikeln t.ex., Google TV, Chrome Web Store och pre-Apple iOS 7 Trycker på Ikonerna. Varför? Eftersom de har blivit föråldrade eller eftersom de är sällan relevanta för den genomsnittliga webbutvecklare.
i allmänhet bör utvecklare och designers sträva efter att stödja så många olika enheter och operativsystem som möjligt, men ibland är det bara inte meningsfullt. Men, om du vill se en mer komplett lista över favicon bilder, se till att du tar en titt på detta favicon fuskblad på GitHub.,
- de bästa designtrenderna för 2020
- 15 professionella teckensnitt för designers
- 27 bästa uppsättningar av gratis ikoner
