Favicon design er viktigere enn du kanskje tror. Størrelse virkelig betyr noe her som en godt designet logo må være gjenkjennelig på hvilken størrelse det er sett på. Det er behov for å skala, fra enorme skjermer rett ned til et ikon som kan være så lite som 16 x 16 piksler, som er kjent som et favicon. Et flott eksempel på favicon design er Google-logoen. Det fungerer perfekt for større skjermer med sin store ‘G’ og særegne fire-farge tekst., Og det er fortsatt som å kjenne igjen når krympet ned til den lille fire-farget ‘G’ sett i en nettleser adressefeltet.
favicon kan også sees på som en snarvei, en fane ikon eller et bokmerke-ikonet, så det er behov for å se den delen. For å se favicon design som fungerer, kan du se vår roundup av logo design inspirasjon og sjekk ut denne fantastiske samlingen av iOS-app-ikoner som får det akkurat.
I denne artikkelen, vi kommer til å kjøre gjennom prosessen med hvordan å designe den perfekte favicon., Vi kommer til å ta konkrete tips for å lage et favicon for Apple-enheter, Android, Chrome, Opera og Safari. Pluss en hendig guide til de forskjellige favicon størrelser og formater du trenger å vite. Bruk Quick Links (til høyre) for å hoppe rett til den delen du vil.
- på Jakt etter en annen type ikon? Se vår guide til de beste gratis ikonet angir
I de tidlige dagene av internett, en favorittikon var rett og slett en 16x16px ikon-fil, men i dag er det litt mer komplisert., Det er forskjellige favicon størrelser og prosesser for ulike kontekster. Å skape en riktig favicon er en vitenskap.
Så, vi kommer til å kick-off med noen tips for hva favicon bør se ut, og deretter gå videre til konkrete råd om hvordan å lage en favorittikon for ulike kontekster. Vi vil bruke malen tilgjengelig på Bruke Piksler til å enkelt generere ulike favicon størrelser kreves, og favicon fra Gjelder Punkter som et eksempel.,
Favicon design regler
Gjøre det gjenkjennelig
Det første du må vurdere når du utformer et favicon er det behov for å være representert i lerretet. Husk at favicon er bare vises til brukeren når de er allerede på din nettside eller har bokmerket den. Så det er ingen grunn til å prøve og tiltrekke brukeren med din favicon.
Bruk din logo
Tenk favicons som edru skilting som hjelper brukerne i å gjenkjenne ditt nettsted når du surfer sine bokmerker lister og homescreens., Derfor, ønsker du til å bruke logoen din, eller hvilket symbol de fleste lett lar brukeren anerkjenner ditt nettsted. Hvis du ikke har en logomark som passer de kvadratiske lerret, bruker den mest fremtredende del av din logo.
Holde det klart
Det er også et par ting du bør unngå. Ikke bruk favicon som et verktøy for markedsføring – det betyr at du ikke prislapper, ‘ny’ eller ‘oppdatert’ bannere og så videre. Faktisk, du ønsker ikke å sette teksten i favicon i det hele tatt. Teksten ikke skalere godt, og det er store sjanser for at det kommer til å bli uleselige uansett., Til slutt, ikke bruke et bilde – det vil være gjørmete og bremser på størrelsen det kommer til å vises på.
Lage to versjoner
Når favicons ble først introdusert i Internet Explorer 5, de dukket opp i URL-baren og i listen over bokmerker. I dag, favicons er vist i en rekke andre sammenhenger, blant annet bokmerker lister, hurtigmenyer og til og med mobil-og TV-homescreens., Dette gjør det vanskelig å forutsi hvordan ikonet vil vises til sluttbruker.
for Å sikre at favicon ser bra ut i mange forskjellige sammenhenger det kommer til å dukke opp i, ideelt sett bør du gi to vekers stiler:
– Logoen på gjennomsiktig bakgrunn
Denne versjonen vises i adresselinjen, bokmerker lister og andre steder hvor dette ikonet vises ved siden av adressen til nettsiden eller navn.,
– Logoen på solid fyll
Denne versjonen er brukt i grid-som for eksempel bokmerker og hurtigmenyer der for nettleseren eller enheten masker bakgrunn, for å oppnå en enhetlig utseende i sammenheng.
Favicon størrelse cheatsheet
Som nevnt før, forskjellige sammenhenger krever ulike størrelser favicons. Nedenfor kan du se en rask guide til ulike formater og mål du trenger for å levere til å dekke alle de viktigste bruksområdene.
Tidligere favicons måtte leveres i ICO format., I dag er det greit å gi filene i PNG-format (med unntak for Safari, Festet Fane-ikonet som bør være tilgjengelig som SVG).
Hvis du ønsker en enkel måte å lage og eksportere alle favicon størrelser, ta en titt på favicon malen over på Gjelder Punkter.
la oss Nå ta en nærmere titt på de spesifikke krav til ulike bruksmåter.,
Desktop nettleser favicons
Hvordan å lage en pc-nettleser favicon
La oss starte med det enkleste favicon du trenger for å lage: en klassisk favicon for den klassiske skrivebordet nettlesere. Denne type favicon fungerer best på gjennomsiktig bakgrunn, så vil det ofte vises i adresselinjen og i bokmerker-lister.,
Du trenger for å gi denne type favicon i tre størrelser, alle i PNG-format med en gjennomsiktig bakgrunn.,
- 16×16
- 32×32
- 48×48
Apple
Hvordan å lage Apple Touch favicons
Apple ‘ s iOS-bruker Apple-Touch-Ikoner, for å representere nettsteder som har blitt lagret til iOS-hjem-skjermen som bokmerker. Dette betyr at Apple-Touch-Ikonet vil bli avrundet til squircle maske av iOS-app-ikoner.
Det vil også vises mot hvilken bakgrunn som brukeren har valgt for sine homescreen. Med dette i tankene, din Apple-Touch-Ikonet skal ha en solid fylle bakgrunnen stil.,
Apple favicons skal leveres i PNG-format. Du kan komme unna med å gi en 180×180 Apple-Touch-Ikonet som automatisk skala for de forskjellige iPhone-og iPad-størrelser. Dette vil fungere bra i de fleste tilfeller.,
Hvis ikke, kan du gi flere størrelser for forskjellige Apple-enheter:
- 60×60
- 76×76
- 120×120
- 152×152
- 180×180
Android, Chrome og Opera
Hvordan å lage en favorittikon for Android, Chrome og Opera
Android, Chrome og Opera bruke android-chrome-192×192.png og android-chrome-512×512.png at Google anbefaler.,
Siden introduksjonen av adaptive ikoner i Android, nettsteder lagt til Android startskjermen vil maskere 192×192 design, så ikonet tar form etter brukerens foretrukne maskering stil. Dette kan være en squircle, ellipse, rektangel, avrundet rektangel eller teardrop form.
Du trenger for å lage en PNG-vekers med solid bakgrunn, på 192×192 og 512×512.,
Implementere disse favicons ved å legge til en manifest.json-filen til ditt nettsted og linker til det innenfor tagger:
<link rel="manifest" href="/manifest.json">Her er koden for å manifestere.json-fil:
Safari
Hvordan å lage en favorittikon for Safari er festet fane
Dette er den odde en ut, og det er bare favicon som trenger å bli gitt i vektor format som en SVG-fil. Det vises som thumbnail ikon når en bruker pinner en fane i nettleseren Safari-vinduet.,
Dette favicon behov for å være 100% svart SVG-fil med en gjennomsiktig bakgrunn. SVG kan bare være ett lag, og safari krever viewBox egenskap av SVG til å være satt til «0 0 16 16».
<link rel="mask-icon" href="your_icon.svg">Andre favicon typer
Det er noen favicon dimensjoner og formater som ikke var inkludert i denne artikkelen, f.eks., Google TV, Chrome nettmarked og pre-iOS 7 Apple-Touch-Ikoner. Hvorfor? Fordi de har blitt avskrevet eller fordi de er sjelden relevant for den gjennomsnittlige web developer.
generelt, utviklere og designere bør bestrebe seg på å støtte et så bredt utvalg av enheter og operativsystemer som mulig, men noen ganger er det bare ikke gir mening. Men, hvis du ønsker å se en mer komplett liste over favicon bilder, bør du ta en titt på denne favicon jukse ark på GitHub.,
- topp-design trender for 2020
- 15 profesjonell skrifter for designere
- 27 beste sett med gratis ikoner
