Kuinka suunnitella favicon: Lopullinen opas

favicon-muotoilu
(Kuvan luotto: Michael Flarup)
HYPÄTÄ:


Favicon-suunnittelu on tärkeämpää kuin luulisi. Koko on todella merkitystä tässä, koska hyvin suunnitellun logon on oltava tunnistettavissa missä tahansa koossa. Sen on skaalattava massiivisista näytöistä alas kuvakkeeksi, joka voi olla niin pieni kuin 16 x 16 pikseliä, joka tunnetaan nimellä favicon. Hieno esimerkki favicon-suunnittelusta on Google-logo. Se toimii täydellisesti isommissa näytöissä isolla G: llä ja erottuvalla nelivärisellä tekstillä. Ja se on edelleen yhtä tunnistettavissa, kun se kutistuu pieneen neliväriseen G-kirjaimeen, joka näkyy verkkoselainten osoiterivillä.

Suosikkikuvaketta voidaan nähdä myös pikakuvakkeena, välilehden kuvakkeena tai kirjanmerkkikuvakkeena, joten sen täytyy näyttää osa. Jos haluat nähdä toimivat favicon-mallit, tutustu yhteenvetoomme inspiraatiota logosuunnittelusta ja tutustu tähän upeaan kokoelmaan iOS-sovelluksen kuvakkeet jotka saavat sen oikein.

Tässä artikkelissa aiomme käydä läpi prosessin, kuinka suunnitella täydellinen favicon. Lisäämme erityisiä vinkkejä suosikkikuvakkeen luomiseen Apple-laitteille, Androidille, Chromelle, Operalle ja Safarille. Lisäksi kätevä opas eri favicon-kooista ja -muodoista, jotka sinun on tiedettävä. Käytä pikalinkkejä (oikealla) siirtyäksesi suoraan haluamaasi osioon.



Favicon-suunnittelu: Pikalinkit

- Faviconin suunnittelusäännöt
- Favicon-kokoinen huijausarkki
- Työpöydän selaimen suosikit
- Apple Touch -suosikit
- Android, Chrome ja Opera
- Safarin kiinnitetty välilehti



Verkon alkuaikoina favicon oli yksinkertaisesti 16x16px-kuvaketiedosto, mutta nykyään se on hieman monimutkaisempi. Eri favicon-kokoja ja -prosesseja on eri yhteyksissä. Oikean favikonin luominen on tiede.

Joten aloitamme joitain suosituimpia vinkkejä siitä, miltä faviconisi pitäisi näyttää, ja siirrymme sitten erityisiin neuvoihin siitä, miten favicon luodaan eri yhteyksille. Käytämme malli on käytettävissä Käytä pikseleitä luoda helposti tarvittavat eri favicon-koot ja esimerkkinä Apply Pixels -sovelluksen favicon.



Faviconin suunnittelusäännöt

01. Tee siitä tunnistettavissa

Ensimmäinen asia, joka on otettava huomioon suunniteltaessa faviconia, on se, mikä on edustettava kankaassa. Muista, että favicon näkyy käyttäjälle vain, kun hän on jo näkyvissä verkkosivustollasi tai kirjanmerkillä. Joten sinun ei tarvitse yrittää houkutella käyttäjää suosikkikuvakkeellasi.

Pidä suosikkikuvioita raittiina tienviittoina, jotka auttavat käyttäjiä tunnistamaan verkkosivustosi kirjanmerkkiluetteloita ja aloitusnäyttöjä selatessaan. Siksi haluat käyttää logoa tai mitä tahansa symbolia, jonka avulla käyttäjä tunnistaa verkkosivustosi helpoimmin. Jos sinulla ei ole neliömäiseen kankaaseen sopivaa logomerkkiä, käytä logosi tunnetuinta osaa.

dikembe mutombon 4 1/2 viikkoa pelastaa maailma

03. Pidä se selvänä

On myös muutamia asioita, joita sinun tulisi välttää. Älä käytä faviconia markkinointityökaluna - se tarkoittaa, ettei hintalappuja, 'uusia' tai 'päivitettyjä' bannereita ja niin edelleen. Itse asiassa et halua laittaa tekstiä faviconiin lainkaan. Teksti ei skaalaudu hyvin, ja on todennäköistä, että se on joka tapauksessa lukukelvoton. Lopuksi, älä käytä valokuvaa - se on mutainen ja tunnistamaton siinä koossa, jossa se näkyy.



04. Luo kaksi versiota

Favicon läpinäkyvällä taustalla ja yksi kiinteällä täytekuvalla

Erilaiset taustat toimivat hyvin erilaisissa yhteyksissä(Kuvan luotto: Michael Flarup / Apply Pixels)

Kun suosikkikuvakkeet esiteltiin ensimmäisen kerran Internet Explorer 5: ssä, ne ilmestyivät URL-palkkiin ja kirjanmerkkiluetteloon. Nykyään suosikkikuvakkeet näkyvät monissa muissa yhteyksissä, mukaan lukien kirjanmerkkiluettelot, pikavalikot ja jopa mobiililaitteiden ja televisioiden aloitusnäytöt. Tämän vuoksi on vaikea ennustaa, kuinka suosikkikuvasi näytetään loppukäyttäjälle.

Varmistaaksesi, että favicon näyttää hyvältä monissa erilaisissa tilanteissa, joissa se esiintyy, sinun on parasta antaa kaksi favicon-tyyliä:

Logo läpinäkyvällä taustalla
Tämä versio näkyy URL-palkissa, kirjanmerkkiluetteloissa ja muissa paikoissa, joissa favicon näkyy verkkosivustosi URL-osoitteen tai nimen vieressä.

Logo kiinteällä täytöllä
Tätä versiota käytetään ruudukkomaisissa kirjanmerkeissä ja pikavalikoissa, joissa selain tai laite peittää taustan, yhtenäisen ilmeen saamiseksi kontekstissa.

Favicon-kokoinen huijausarkki

Kuten aiemmin mainittiin, erilaiset kontekstit vaativat erikokoisia suosikkikuvakkeita. Alla on pikaopas eri muodoista ja mitoista, jotka sinun on toimitettava kattamaan kaikki tärkeimmät käyttötapaukset.

Aikaisemmin favicons oli toimitettava ICO-muodossa. Tänään on hyvä toimittaa tiedostot PNG-muodossa (paitsi Safari Pinned Tab -kuvake, joka tulisi antaa SVG: nä).

Jos haluat helpon tavan suunnitella ja viedä kaikki favicon-koot, tutustu favicon-malli yli kohdasta Käytä pikseleitä.

Favicon-huijausarkki

Nämä ovat yleisimpiä favikonikokoja(Kuvan luotto: emergeinteractive)

Tarkastellaan nyt tarkemmin eri käyttötapausten erityisvaatimuksia.

Työpöydän selaimen suosikit

Kuinka luoda työpöydän selaimen suosikkikuvake

Aloitetaan yksinkertaisimmasta faviconista, joka sinun on luotava: klassinen favicon klassisille työpöydän selaimille. Tämäntyyppinen favicon toimii parhaiten läpinäkyvällä taustalla, koska se näkyy usein URL-palkissa ja kirjanmerkkiluetteloissa.

Suosikit näkyvät Google Chromen kirjanmerkkipalkissa ja URL-palkissa

Google Chromen kirjanmerkkipalkissa ja URL-palkissa näkyvät klassisen tyylin suosikkikuvakkeet(Kuvan luotto: Michael Flarup / Apply Pixels)

Sinun on toimitettava tämän tyyppinen favicon kolmessa koossa, kaikki PNG-muoto kanssa läpinäkyvä tausta .

  • 16x16
  • 32x32
  • 48x48

Omena

Kuinka luoda Apple Touch -favikonit

Applen iOS käyttää Apple Touch -kuvakkeita edustaa verkkosivustoja, jotka on tallennettu iOS-aloitusnäyttöön kirjanmerkeinä. Tämä tarkoittaa, että Apple Touch -kuvake pyöristetään rypistää iOS-sovelluskuvakkeiden naamio.

Se näytetään myös sitä taustaa vasten, jonka käyttäjä on valinnut kotinäyttöönsä. Tässä mielessä Apple Touch -kuvakkeellasi tulisi olla kiinteä täyttö tausta tyyli.

iPhonen aloitusnäyttö kuvakkeilla

Tämä suosikkikuvake näkyy käyttäjän aloitusnäytön taustaa vasten(Kuvan luotto: Michael Flarup / Apply Pixels)

Apple-favicons tulee toimittaa a PNG-muoto . Voit päästä eroon tarjoamalla 180x180 Apple Touch -kuvake, joka skaalautuu automaattisesti eri iPhone- ja iPad-kooille. Tämä toimii hyvin useimmissa tapauksissa.

miten tehdä jalusta puhelimelle

Jos ei, voit antaa lisäkoot eri Apple-laitteille:

  • 60x60
  • 76x76
  • 120x120
  • 152x152
  • 180x180

Android, Chrome ja Opera

Suosikkikuvakkeen luominen Androidille, Chromelle ja Operalle

Android, Chrome ja Opera käyttävät android-chrome-192x192.png ja android-chrome-512x512.png että Google suosittelee .

Adaptiivisten kuvakkeiden käyttöönoton jälkeen Androidissa Android-aloitusnäyttöön lisätyt verkkosivustot peittävät 192x192-mallin, joten kuvake muotoutuu käyttäjän suosiman peittotyylin jälkeen. Tämä voi olla ympyrän, ellipsin, suorakulmion, pyöristetyn suorakulmion tai pisaran muotoinen.

Suosikit Android Pie -aloitusnäytössä

Tässä olevat suosikkikuviot naamioidaan erilaisiin muotoihin käyttäjän mieltymysten mukaan(Kuvan luotto: Michael Flarup / Apply Pixels)

Sinun on luotava PNG favicon kanssa vankka tausta , osoitteessa 192x192 ja 512x512 .

Toteuta nämä suosikit lisäämällä a manifest.json tiedosto sivustollesi ja linkittäminen siihen tageihin:

Tässä on manifest.json tiedosto:

{ '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': 'standalone' }

Safari

Faviconin luominen Safarin kiinnitetylle välilehdelle

Tämä on outo, ja se on ainoa favicon, joka on annettava sisään vektorimuodossa kuten SVG-tiedosto . Se näkyy pikkukuvakkeena, kun käyttäjä kiinnittää välilehden Safari-selainikkunaan.

favicon-kuvake: SVG-muoto

Toisin kuin kaikki muut suosikkikuvakkeet, tämä kuvake luodaan SVG-kuvasta(Kuvan luotto: Michael Flarup / Apply Pixels)

Tämän faviconin on oltava 100% musta SVG-tiedosto, jossa on läpinäkyvä tausta . SVG voi olla vain yksi kerros, ja safari vaatii viewBox määritettävän SVG: n attribuutti 0 0 16 16 ' .

Muut favicon-tyypit

On joitain favicon-mittoja ja -muotoja, joita ei sisällytetty tähän artikkeliin, esim. Google TV, Chrome Web Store ja iOS 7 -käyttöjärjestelmää edeltävät Apple Touch -kuvakkeet. Miksi? Koska ne ovat vanhentuneet tai koska ne ovat harvoin merkityksellisiä keskimääräiselle web-kehittäjälle.

Yleensä kehittäjien ja suunnittelijoiden tulisi pyrkiä tukemaan mahdollisimman monenlaisia ​​laitteita ja käyttöjärjestelmiä, mutta joskus sillä ei ole järkeä. Mutta jos haluat nähdä täydellisemmän luettelon favicon-kuvista, varmista, että katsot tätä favicon-huijausarkki GitHubissa.

Lue lisää: