Favicon suunnittelu on tärkeämpää kuin saatat ajatella. Koolla on tässä todella merkitystä, sillä hyvin suunnitellun logon on oltava tunnistettavissa missä koossa tahansa. Se on asteikolla massiivinen näyttöjä myöten kuvake, joka voi olla niin pieni kuin 16 x 16 pikseliä, joka tunnetaan nimellä favicon. Hyvä esimerkki faviconin muotoilusta on Googlen logo. Se toimii erinomaisesti isompi näytöt sen iso ” G ” ja erottuva neljä-väri-teksti., Ja se on edelleen yhtä tunnistettava, kun kutistunut alas pieni neljä-värinen ” G ” nähnyt web-selaimissa osoiteriville.
favicon voidaan nähdä myös pikakuvakkeena, välilehtikuvakkeena tai kirjanmerkkikuvakkeena, joten sen on katsottava osaa. Nähdä favicon malleja, jotka toimivat, katso meidän roundup logo design inspiration ja tutustu upea kokoelma iOS App kuvakkeet, jotka saavat sen juuri oikea.
tässä artikkelissa, aiomme ajaa läpi prosessin, miten suunnitella täydellinen favicon., Annamme erityisiä vinkkejä faviconin luomiseen Apple-laitteille, Androidille, Chromelle, Operalle ja safarille. Plus kätevä opas eri favicon kokoja ja formaatteja sinun täytyy tietää. Käytä pikalinkkejä (oikealla) hypätäksesi suoraan haluamaasi osioon.
- Etsivät erilaisia ikoni? Katso oppaamme paras ilmainen kuvakejoukkoja
alkuaikoina web, favicon oli yksinkertaisesti a 16x16px icon-tiedoston, mutta nykyään se on hieman monimutkaisempi., Eri yhteyksissä on erilaisia favicon-kokoja ja-prosesseja. Oikean faviconin luominen on tiedettä.
Niin, olemme menossa kick-off kanssa joitakin alkuun vinkkejä siitä, mitä favicon pitäisi näyttää, ja sitten siirtyä erityisiä neuvoja siitä, miten luoda favicon eri yhteyksissä. Käytämme mallia, joka on saatavilla Soveltaa Pikseliä helposti luoda eri favicon koot tarvita, ja favicon alkaen Soveltaa Pikseliä esimerkkinä.,
faviconin suunnittelusäännöt
tekevät siitä tunnistettavan
ensimmäisenä faviconia suunniteltaessa tulee ottaa huomioon se, mitä kankaalle pitää esittää. Muista, että favicon näkyy käyttäjälle vain silloin, kun ne ovat jo sivustossasi tai ovat varanneet sen. Joten ei ole tarvetta yrittää houkutella käyttäjää favicon.
Käytä logo
Harkitse favicons kuin selvin päin tienviitat, että tuen käyttäjien tunnustaa sivuston selatessasi kirjanmerkkejä luettelot ja homescreens., Siksi, haluat käyttää logoa, tai kumpi symboli helpoimmin antaa käyttäjän tunnistaa sivustosi. Jos sinulla ei ole logomarkia, joka sopii quadratic kankaalle, käytä logosi tunnistettavinta osaa.
pidä se kirkkaana
on myös muutamia asioita, joita sinun tulee välttää. Älä käytä faviconia markkinointityökaluna – se tarkoittaa, että ei Hintalappuja, ”uusia” tai ”päivitettyjä” bannereita ja niin edelleen. Itse asiassa, et halua laittaa tekstiä sisällä favicon ollenkaan. Teksti ei skaalaudu hyvin, ja mahdollisuudet ovat, että se on joka tapauksessa luettavissa., Lopuksi, älä käytä valokuvaa-se on mutainen ja tunnistamaton koko se tulee näkyviin.
Luo kaksi versiota
Kun favicons otettiin ensimmäisen kerran käyttöön vuonna Internet Explorer 5, he ilmestyi osoitepalkkiin ja kirjanmerkit-lista. Tänään, favicons näytetään paljon muissa yhteyksissä, mukaan lukien kirjanmerkit luettelot, pikavalikot ja jopa mobiili-ja TV-homescreens., Tämän vuoksi on vaikea ennustaa, miten favicon näkyy loppukäyttäjälle.
varmistetaan, favicon näyttää hyvältä monissa eri yhteyksissä, että se on menossa näy, mieluiten sinun pitäisi antaa kaksi favicon tyylejä:
– Logo läpinäkyvä tausta
Tämä versio on osoittanut, URL baari, kirjanmerkit luettelot ja muissa paikoissa, joissa favicon vieressä näkyy sivuston URL-osoite tai nimi.,
– Logo kiinteä täyttää
Tämä versio on käytetty grid-kuten kirjanmerkit ja pikavalikot, jossa selain tai laite naamarit tausta, saavuttaa yhtenäinen ilme yhteydessä.
Favicon size cheatsheet
kuten aiemmin mainittiin, eri yhteyksissä tarvitaan erikokoisia faviconeja. Alla näet nopean oppaan eri muodoissa ja mitat sinun täytyy toimittaa kattamaan kaikki tärkeimmät käyttötapaukset.
aiemmin faviconit oli toimitettava ICO-muodossa., Tänään se on OK antaa tiedostoja PNG-muodossa (paitsi Safari puristuksiin välilehti kuvaketta, joka olisi annettava SVG).
Jos haluat helppo tapa suunnitella ja viedä kaikki favicon kokoja, katso favicon malli yli Sovelletaan Pikseliä.
katsotaanpa Nyt ottaa tarkemmin erityisiä vaatimuksia eri käyttötapauksia.,
Desktop-selain favicons
Miten luoda työpöydän selain favicon
aloitetaan kaikkein yksinkertainen favicon sinun täytyy luoda: klassinen favicon klassinen työpöydän selaimissa. Tämäntyyppinen favicon toimii parhaiten läpinäkyvillä taustoilla, koska se näkyy usein URL-palkeissa ja kirjanmerkkiluetteloissa.,
Sinun täytyy antaa tämä tyyppi favicon on kolmea eri kokoa, kaikki PNG-muodossa läpinäkyvällä taustalla.,
- 16×16
- 32×32
- 48×48
Apple
Miten luoda Apple Touch kuvakkeet
Applen iOS käyttää Apple Touch Kuvakkeet edustavat sivustoja, jotka on tallennettu iOS aloitusnäyttö kuten kirjanmerkit. Tämä tarkoittaa, että Apple Touch-kuvake pyöristetään iOS-sovelluksen kuvakkeiden squircle-maskiin.
se näkyy myös sitä taustaa vasten, jonka käyttäjä on valinnut kotivideoonsa. Tämä mielessä, Apple Touch kuvake pitäisi olla vankka täyttää tausta tyyli.,
Apple favicons pitäisi olla toimitetaan PNG-muodossa. Voit päästä eroon tarjoamalla 180×180 Apple Touch kuvake, joka automaattisesti skaalata eri iPhone ja iPad koot. Tämä toimii hyvin useimmissa tapauksissa.,
Jos ei, voit tarjota lisää kokoja eri Applen laitteet:
- 60×60
- 76×76
- 120×120
- 152×152
- 180×180
Android, Chrome ja Opera
Miten luoda favicon Android, Chrome ja Opera
Android -, Chrome-ja Opera käyttää android-chrome-192×192.png ja android-chrome-512×512.png että Google suosittelee.,
käyttöönoton mukautuva kuvakkeet Android, sivustoja lisätään Android etusivulla tulee peittää 192×192 suunnittelu, joten kuvaketta muotoutuu sen jälkeen, kun käyttäjä on ensisijainen rajauksella tyyli. Tämä voi olla squircle, ellipsis, suorakulmio, pyöristetty suorakulmio tai pisaran muoto.
Sinun täytyy luoda PNG favicon vankka tausta, klo 192×192 ja 512 x 512.,
toteuttaa nämä faviconit lisäämällä manifestin.json-tiedosto sivustosi ja linkittää sen sisällä luokka:
<link rel="manifest" href="/manifest.json">Tässä on koodi ilmeinen.json-tiedosto:
Safari
Miten luoda favicon Safari on kiinnitetty välilehti
Tämä on outo ilmestys, ja se on vain favicon, että on annettava vektorimuodossa kuten SVG-tiedosto. Se näyttää esikatselukuvan, kun käyttäjä pinssaa välilehden Safari-selainikkunaan.,
Tämä favicon on oltava 100% musta SVG-tiedosto, jossa on läpinäkyvä tausta. SVG voi olla vain yksi kerros, ja safari edellyttää, että SVG: n viewBox-attribuutti asetetaan arvoon ”0 0 16 16”.
<link rel="mask-icon" href="your_icon.svg">Muut favicon tyypit
On olemassa joitakin favicon mitat ja muodot, jotka eivät sisälly tämän artiklan esim., Google TV, Chrome Web Store ja ennen iOS 7 Apple Touch kuvakkeet. Miksi? Koska ne on hylätty tai, koska ne ovat harvoin merkityksellisiä tavalliselle web-kehittäjä.
yleisesti kehittäjien ja suunnittelijoiden tulisi pyrkiä tukemaan mahdollisimman laajaa valikoimaa laitteita ja käyttöjärjestelmiä, mutta joskus se ei vain käy järkeen. Mutta, jos haluat nähdä täydellisemmän luettelon favicon kuvia, varmista, että katsot tätä favicon huijata arkki GitHub.,
- top suunnittelun trendejä vuoteen 2020 mennessä
- 15 ammatillinen fonttien suunnittelijoille
- 27 parasta sarjaa ilmainen kuvakkeet
