Favicon design er vigtigere end du måske tror,. Størrelse betyder virkelig noget her, da et veldesignet logo skal være genkendeligt, uanset hvilken størrelse det ses på. Det skal skaleres fra massive skærme helt ned til et ikon, der kan være så lille som 16 16 16 pi .els, kendt som et favicon. Et godt eksempel på favicon-design er Google-logoet. Det fungerer perfekt til større skærme med sin store ‘G’ og karakteristiske firefarvetekst., Og det er stadig så genkendeligt, når det skrumpes ned til den lille firfarvede ‘G’, der ses i en addressebbro .sers adresselinje.favicon kan også ses som et genvejsikon, et fanebladsikon eller et bogmærkeikon, så det skal se ud. For at se favicon design, der virker, se vores roundup af logo design inspiration og tjek denne fantastiske samling af iOS app ikoner, der får det helt rigtigt.
i denne artikel skal vi gennemgå processen med at designe det perfekte favicon., Vi inkluderer specifikke tip til oprettelse af et favicon til Apple-enheder, Android, Chrome, Opera og Safari. Plus en praktisk guide til de forskellige favicon-størrelser og formater, du har brug for at vide. Brug de hurtige Links (til højre) til at hoppe direkte til det ønskede afsnit.
- Leder du efter en anden slags ikon? Se vores guide til de bedste gratis ikonsæt
i de tidlige dage af internettet var en favicon simpelthen en 16 .16p.ikonfil, men i dag er det lidt mere kompliceret., Der er forskellige favicon størrelser og processer til forskellige sammenhænge. Oprettelse af en ordentlig favicon er en videnskab.
så vi skal starte med nogle Toptips til, hvordan din favicon skal se ud, og derefter gå videre til specifikke råd om, hvordan du opretter et favicon til forskellige sammenhænge. Vi bruger den skabelon, der er tilgængelig på Anvend pi .els for nemt at generere de forskellige favicon-størrelser, der kræves, og favicon fra Anvend pi .els som et eksempel.,
Favicon design regler
gør det genkendeligt
den første ting at overveje, når du designer en favicon, er, hvad der skal repræsenteres i lærredet. Husk, at din favicon kun vises til brugeren, når de allerede er på dit websiteebsted eller har bogmærket det. Så der er ingen grund til at forsøge at tiltrække brugeren med din favicon.
Brug dit logo
Overvej favicons som ædru skilte at støtte brugerne i at genkende din hjemmeside, når du gennemser deres bogmærker lister og homescreens., Derfor vil du bruge dit logo, eller hvilket symbol der lettest lader brugeren genkende dit websiteebsted. Hvis du ikke har et logomark, der passer til det kvadratiske lærred, skal du bruge den mest genkendelige del af dit logo.
hold det klart
Der er også et par ting, du bør undgå. Brug ikke favicon som et marketingværktøj – det betyder ingen prismærker, ‘nye’ eller ‘opdaterede’ bannere og så videre. Faktisk ønsker du ikke at sætte tekst inde i favicon overhovedet. Tekst skaleres ikke godt, og chancerne er, at det alligevel vil være ulæseligt., Til sidst skal du ikke bruge et foto – det vil være mudret og ikke genkendeligt i den størrelse, det vises på.
Opret to versioner
Når favicons blev først indført i Internet Explorer 5, de dukkede op i URL-baren og i listen over bogmærker. I dag vises favicons i mange andre sammenhænge, herunder bogmærkelister, genvejsmenuer og endda mobil-og TV-skærme., Dette gør det svært at forudsige, hvordan din favicon vil blive vist til slutbrugeren.
for At sikre dit favicon ser godt ud i mange forskellige sammenhænge, det kommer til at fremstå i, ideelt set bør du give to favicon stilarter:
Logo på gennemsigtig baggrund
Denne version er vist i URL-baren, bogmærker lister og andre steder, hvor favicon vises ved siden af dit website URL-adresse eller navn.,
Logo på solid fill
denne version bruges i gitterlignende bogmærker og genvejsmenuer, hvor bro .seren eller enheden maskerer baggrunden for at opnå et ensartet udseende i sammenhæng.
Favicon størrelse cheatsheet
Som nævnt før, forskellige sammenhænge kræver forskellige størrelse favicons. Nedenfor kan du se en hurtig guide til de forskellige formater og dimensioner, du skal levere til at dække alle de vigtigste use cases.
tidligere skulle favicons leveres i ICO-formatet., I dag er det okay at give filerne i PNG-format (bortset fra Safari Pinned Tab ikon, som skal leveres som SVG).
Hvis du ønsker en nem måde at designe og eksportere alle favicon størrelser, tage et kig på den favicon skabelon over på Anvendelse Pixels.
lad os Nu tage et nærmere kig på de specifikke krav i forskellige use cases.,
Desktop browser favicons
Hvordan opretter jeg en desktop browser favicon
Lad os starte med den mest enkle favicon du bliver nødt til at skabe: en klassisk favicon til den klassiske desktop browsere. Denne type favicon fungerer bedst på gennemsigtige baggrunde, da den ofte vises i URL-linjen og i bogmærkelister.,
Du er nødt til at give denne type af favicon i tre størrelser, alle i PNG-format med transparent baggrund.,
- 16×16
- 32×32
- 48×48
Apple
Hvordan til at skabe Apple Touch favicons
Apple ‘ s iOS bruger Apple-Touch-Ikoner til at repræsentere hjemmesider, som er blevet gemt til iOS hjem skærmen som bogmærker. Dette betyder, at Apple Touch-ikonet afrundes til S .uircle-masken fra iOS-appikoner.
det vil også blive vist på hvilken baggrund brugeren har valgt til deres homescreen. Med dette i tankerne skal dit Apple Touch-ikon have en solid baggrundsstil.,
Apple favicons bør være leveret i PNG-format. Du kan slippe af sted med at levere et 180 .180 Apple Touch-ikon, der automatisk skaleres for de forskellige iPhone-og iPad-størrelser. Dette vil fungere fint i de fleste tilfælde.,
Hvis ikke, du kan give ekstra størrelser for de forskellige Apple-enheder:
- 60×60
- 76×76
- 120×120
- 152×152
- 180×180
Android, Chrome og Opera
Hvordan opretter jeg en favicon til Android, Chrome og Opera
Android, Chrome og Opera bruge android-chrome-192×192.png og android-chrome-512 and512.PNG, som Google anbefaler.,
siden introduktionen af adaptive ikoner i Android vil websebsteder, der er tilføjet til Android-startskærmen, maskere 192 .192-designet, så ikonet tager form efter brugerens foretrukne maskeringsstil. Dette kan være en s .uircle, ellipsis, rektangel, afrundet rektangel eller dråbeformet form.
Du er nødt til at skabe en PNG favicon med solid baggrund, på 192×192 og 512×512.,
Gennemfør disse favicons ved at tilføje et manifest.json filen til dit website og linker til det inden for de tags:
<link rel="manifest" href="/manifest.json">Her er koden til manifestet.json file:
Safari
Sådan oprettes en favicon til Safari ‘ s pinned tab
Dette er den ulige ud, og det er den eneste favicon, der skal leveres i vektorformat som en SVG-fil. Det vises som miniatureikonet, når en bruger stifter en fane til Safari-bro .servinduet.,
Denne favicon skal være en 100% sort SVG fil med transparent baggrund. SVG kan kun være et lag, og safari kræver, at vie .bo. – attributten for SVG indstilles til “0 0 16 16”.
<link rel="mask-icon" href="your_icon.svg">Andre favicon typer
Der er nogle favicon dimensioner og formater, der ikke er medtaget i denne artikel, f.eks., Google TV, Chrome Storeebshop og præ-iOS 7 Apple Touch-ikoner. Hvorfor? Fordi de er blevet udskrevet, eller fordi de sjældent er relevante for den gennemsnitlige developerebudvikler. generelt bør udviklere og designere stræbe efter at støtte så bredt en række enheder og operativsystemer som muligt, men nogle gange giver det bare ikke mening. Men hvis du vil se en mere komplet liste over favicon-billeder, skal du sørge for at se på dette favicon snydeark på GitHub.,
- De øverste design trends for 2020
- 15 professionel skrifttyper for designere
- 27 bedste sæt af gratis ikoner
