Innhold
- Favicon designregler
- 01. Gjør det gjenkjennelig
- 02. Bruk logoen din
- 03. Hold det klart
- 04. Lag to versjoner
- Favicon størrelse cheatsheet
- Desktop-nettleserens favorittikoner
- Hvordan lage en favicon på en stasjonær nettleser
- eple
- Hvordan lage Apple Touch-favicons
- Android, Chrome og Opera
- Hvordan lage et favicon for Android, Chrome og Opera
- Safari
- Hvordan lage et favicon for Safaris festede fane
- Andre typer favicon
HOPPE TIL: - Favicon designregler
- Favicon størrelse cheatsheet
- Desktop-nettleserens favorittikoner
- eple
- Android, Chrome og Opera
- Safari
- Andre favicon-typer
Favicon-design er viktigere enn du kanskje tror. Størrelse har virkelig betydning her, ettersom en veldesignet logo må være gjenkjennelig uansett hvilken størrelse den er sett på. Det må skaleres fra massive skjermer helt ned til et ikon som kan være så lite som 16 x 16 piksler, kjent som et favicon. Et godt eksempel på favicon-design er Google-logoen. Den fungerer perfekt for større skjermer med sin store 'G' og særegne firefargetekst. Og det er fremdeles like gjenkjennelig når det krympet ned til den lille firefargede 'G' sett i en adresselinje for nettlesere.
Favicon kan også sees på som et snarveisikon, et faneikon eller et bokmerkeikon, så det må se ut. For å se favicon-design som fungerer, se vår oversikt over inspirasjon til logo design og sjekk ut denne fantastiske samlingen av iOS-appikoner som får det akkurat.
I denne artikkelen skal vi gjennomgå prosessen med hvordan du designer det perfekte favicon. Vi inkluderer spesifikke tips for å lage et favorittikon for Apple-enheter, Android, Chrome, Opera og Safari. Pluss en praktisk guide til de forskjellige favorittstørrelsene og -formatene du trenger å vite. Bruk hurtigkoblingene (til høyre) for å hoppe rett til delen du vil ha.
Favicon-design: Hurtigkoblinger- Favicon designregler
- Favicon størrelser cheatsheet
- Favikoner på skrivebordet
- Apple Touch-favikoner
- Android, Chrome og Opera
- Safaris festede fane
- Leter du etter en annen type ikon? Se vår guide til de beste gratis ikonsettene
I de tidlige dagene på nettet var et favicon ganske enkelt en 16x16px ikonfil, men i dag er den litt mer komplisert. Det er forskjellige favorittstørrelser og prosesser for forskjellige sammenhenger. Å lage et skikkelig favicon er en vitenskap.
Så vi kommer til å begynne med noen av de beste tipsene for hvordan faviconet ditt skal se ut, og deretter gå videre til spesifikke råd om hvordan du lager et favicon for forskjellige sammenhenger. Vi bruker malen som er tilgjengelig på Apply Pixels for å enkelt generere de forskjellige favicon-størrelsene som kreves, og faviconet fra Apply Pixels som et eksempel.
Favicon designregler
01. Gjør det gjenkjennelig
Det første du bør vurdere når du designer et favicon, er hva som må representeres på lerretet. Husk at favorittikonet ditt bare vises for brukeren når de allerede er detpå nettstedet ditt eller har bokmerket det. Så det er ikke nødvendig å prøve å tiltrekke brukeren med favorittikonet ditt.
02. Bruk logoen din
Betrakt favicons som nøkterne skilt som hjelper brukere med å gjenkjenne nettstedet ditt når de surfer på bokmerklisten og startskjermen. Derfor vil du bruke logoen din, eller hvilket symbol som helst som lar brukeren gjenkjenne nettstedet ditt. Hvis du ikke har et logomark som passer til det kvadratiske lerretet, kan du bruke den mest gjenkjennelige delen av logoen din.
03. Hold det klart
Det er også et par ting du bør unngå. Ikke bruk favicon som et markedsføringsverktøy - det betyr ingen prislapper, nye eller oppdaterte bannere og så videre. Faktisk vil du ikke sette tekst i favicon i det hele tatt. Tekst skaleres ikke godt, og sjansen er at den uansett blir uleselig. Til slutt, ikke bruk et bilde - det vil være gjørmete og ugjenkjennelig i størrelsen det kommer til å vises på.
04. Lag to versjoner
Da favicons først ble introdusert i Internet Explorer 5, dukket de opp i URL-linjen og i bokmerkelisten. I dag vises favorittikoner i mange andre sammenhenger, inkludert bokmerkelister, hurtigmenyer og til og med mobil- og TV-startskjermbilder. Dette gjør det vanskelig å forutsi hvordan faviconet ditt vises til sluttbrukeren.
For å sikre at faviconet ditt ser bra ut i mange forskjellige sammenhenger det skal vises i, bør du ideelt sett oppgi to favicon-stiler:
Logo på gjennomsiktig bakgrunn
Denne versjonen vises i URL-linjen, bokmerkelister og andre steder der favorittikonet vises ved siden av nettadressen eller navnet ditt.
Logo på solid fyll
Denne versjonen brukes i rutenettlignende bokmerker og snarveismenyer der nettleseren eller enheten maskerer bakgrunnen for å oppnå et jevnt utseende i sammenheng.
Favicon størrelse cheatsheet
Som nevnt tidligere krever forskjellige sammenhenger favicons i forskjellige størrelser. Nedenfor kan du se en rask guide til de forskjellige formatene og dimensjonene du må levere for å dekke alle de viktigste brukssakene.
Tidligere måtte favicons leveres i ICO-format. I dag er det greit å oppgi filene i PNG-format (bortsett fra ikonet Safari Pinned Tab, som skal oppgis som SVG).
Hvis du vil ha en enkel måte å designe og eksportere alle favicon-størrelser på, kan du ta en titt på favicon-malen på Apply Pixels.
La oss nå se nærmere på de spesifikke kravene til forskjellige brukssaker.
Desktop-nettleserens favorittikoner
Hvordan lage en favicon på en stasjonær nettleser
La oss begynne med det mest enkle faviconet du trenger å lage: et klassisk favicon for de klassiske stasjonære nettleserne. Denne typen favicon fungerer best på gjennomsiktig bakgrunn, da den ofte vises i URL-linjen og i bokmerkelister.
Du må oppgi denne typen favicon i tre størrelser, alt i PNG-format med en gjennomsiktig bakgrunn.
- 16x16
- 32x32
- 48x48
eple
Hvordan lage Apple Touch-favicons
Apples iOS bruker Apple Touch-ikonerå representere nettsteder som er lagret på iOS-startskjermen som bokmerker. Dette betyr at Apple Touch-ikonet vil bli avrundet til kretsmasken til iOS-appikoner.
Den vises også med bakgrunn i hvilken bakgrunn brukeren har valgt på startskjermen. Med dette i tankene, bør Apple Touch-ikonet ditt ha en solid fyll bakgrunn stil.
Apple-favicons skal leveres i en PNG-format. Du kan komme unna med å gi en 180x180 Apple Touch Icon som automatisk skaleres for de forskjellige iPhone- og iPad-størrelsene. Dette vil fungere bra i de fleste tilfeller.
Hvis ikke, kan du tilby flere størrelser for de forskjellige Apple-enhetene:
- 60x60
- 76x76
- 120x120
- 152x152
- 180x180
lenke rel = "apple-touch-ikon" størrelser = "60x60" href = "/ apple-touch-ikon-60x60.png"> lenke rel = "apple-touch-ikon" størrelser = "76x76" href = "/ apple -touch-icon-76x76.png "> link rel =" apple-touch-icon "sizes =" 120x120 "href =" / apple-touch-icon- 120x120.png "> link rel =" apple-touch-icon " størrelser = "152x152" href = "/ apple-touch-ikon- 152x152.png"> lenke rel = "apple-touch-ikon" størrelser = "180x180" href = "/ apple-touch-ikon- 180x180.png">
Android, Chrome og Opera
Hvordan lage et favicon for Android, Chrome og Opera
Android, Chrome og Opera bruker android-chrome-192x192.png og android-chrome-512x512.png som Google anbefaler.
Siden introduksjonen av adaptive ikoner i Android, vil nettsteder som er lagt til på Android-startskjermen, maskere 192x192-designen, slik at ikonet får form etter brukerens foretrukne maskeringsstil. Dette kan være en krets, ellipsis, rektangel, avrundet rektangel eller dråpeform.
Du må opprette en PNG favicon med solid bakgrunn, kl 192x192 og 512x512.
Implementere disse favorittikonene ved å legge til en manifest.json fil til nettstedet ditt og lenker til det i kodene:
lenke rel = "manifest" href = "/ manifest.json">
Her er koden for manifest.json fil:
{"name": "", "short_name": "", "icons": [{"src": "/ android-chrome- 192x192.png", "sizes": "192x192", "type": "image / png "}, {" src ":" / android- chrome-512x512.png "," sizes ":" 512x512 "," type ":" image / png "}]," theme_color ":" #ffffff ", "background_color": "#ffffff", "display": "frittstående"}
Safari
Hvordan lage et favicon for Safaris festede fane
Dette er den rare, og det er det eneste faviconet som må leveres inn vektorformat som en SVG-fil. Den vises som miniatyrikonet når en bruker fester en fane til Safari-nettleservinduet.
Dette faviconet må være en 100% svart SVG-fil med en gjennomsiktig bakgrunn. SVG kan bare være ett lag, og safari krever viewBox attributtet til SVG skal settes til "0 0 16 16’.
link rel = "mask-icon" href = "your_icon.svg">
Andre typer favicon
Det er noen favicon-dimensjoner og -formater som ikke var inkludert i denne artikkelen, f.eks. Google TV, Chrome Web Store og Apple Touch-ikoner før iOS 7. Hvorfor? Fordi de er utfaset, eller fordi de sjelden er relevante for den gjennomsnittlige webutvikleren.
Generelt sett bør utviklere og designere streve for å støtte et så bredt utvalg av enheter og operativsystemer som mulig, men noen ganger gir det bare ikke mening. Men hvis du vil se en mer komplett liste over favicon-bilder, må du ta en titt på dette favicon-juksearket på GitHub.
