Kaip sukurti favicon: galutinis vadovas

favicon dizainas
(Vaizdo kreditas: Michaelas Flarupas)
Pereiti į:


„Favicon“ dizainas yra svarbesnis, nei jūs manote. Dydis čia tikrai svarbus, nes gerai sukurtą logotipą reikia atpažinti bet kokio dydžio, kokiu jis matomas. Jis turi būti keičiamas nuo masyvių ekranų iki piktogramos, kuri gali būti mažesnė nei 16 x 16 pikselių, vadinama favicon. Puikus „favicon“ dizaino pavyzdys yra „Google“ logotipas. Jis puikiai tinka didesniems ekranams su dideliu „G“ ir išskirtiniu keturių spalvų tekstu. Ir tai vis tiek atpažįstama, kai susitraukia iki mažo keturių spalvų „G“, matomo žiniatinklio naršyklių adresų juostoje.

„Favicon“ taip pat gali būti vertinamas kaip nuorodos piktograma, skirtuko piktograma arba žymės piktograma, todėl ji turi atrodyti dalyje. Norėdami pamatyti favicon dizainus, kurie veikia, žr logotipo įkvėpimas ir patikrinkite šią nuostabią kolekciją „iOS“ programų piktogramos kad tai teisingai.

Šiame straipsnyje mes atliksime procesą, kaip sukurti tobulą favicon. Pateiksime konkrečių patarimų, kaip sukurti „Apple“ įrenginių, „Android“, „Chrome“, „Opera“ ir „Safari“ favicon. Be to, patogus įvairių favicon dydžių ir formatų vadovas, kurį turite žinoti. Norėdami pereiti tiesiai į norimą skyrių, naudokite „Greitas nuorodas“ (dešinėje).

„Favicon“ dizainas: greitos nuorodos

- „Favicon“ dizaino taisyklės
- „Favicon“ dydžių cheatsheet
- Darbalaukio naršyklės piktogramos
- „Apple Touch“ favicons
- „Android“, „Chrome“ ir „Opera“
- „Safari“ prisegtas skirtukas



Pirmosiomis interneto dienomis favicon buvo paprasčiausiai 16x16px piktogramų failas, tačiau šiais laikais tai yra šiek tiek sudėtingesnė. Skirtingiems kontekstams yra skirtingi favicon dydžiai ir procesai. Tinkamo favicon sukūrimas yra mokslas.

Taigi mes pateiksime keletą geriausių patarimų, kaip turėtų atrodyti jūsų favicon, ir tada pereikime prie konkrečių patarimų, kaip sukurti favicon skirtingiems kontekstams. Mes naudosime šabloną, kurį galite rasti „Taikyti taškus“ kad lengvai sugeneruotumėte įvairius reikalingus favicon dydžius ir pavyzdį iš „Apply Pixels“.

„Favicon“ dizaino taisyklės

01. Padarykite tai atpažįstamą

Pirmas dalykas, į kurį reikia atsižvelgti kuriant favicon, yra tai, kas turi būti vaizduojama drobėje. Atminkite, kad jūsų favicon rodomas vartotojui tik tada, kai jis jau rodomas savo svetainėje arba pažymėjote. Taigi nereikia bandyti pritraukti vartotojo su favicon.

Laikykite „favicons“ blaiviais kelio ženklais, kurie padeda vartotojams atpažinti jūsų svetainę naršant jų žymių sąrašus ir pagrindinius ekranus. Todėl norite naudoti savo logotipą arba bet kurį simbolį, kuris leidžia vartotojui lengviau atpažinti jūsų svetainę. Jei neturite kvadratinei drobei tinkančio logomarko, naudokite geriausiai atpažįstamą logotipo dalį.

03. Laikykitės aiškumo

Taip pat reikėtų vengti kelių dalykų. Nenaudokite favicon kaip rinkodaros įrankio - tai reiškia, kad nėra kainų etikečių, „naujų“ ar „atnaujintų“ reklamjuostių ir pan. Tiesą sakant, jūs visiškai nenorite įdėti teksto į favicon. Tekstas nėra pakankamai masto ir yra tikimybė, kad jis vis tiek bus neįskaitomas. Galiausiai nenaudokite nuotraukos - ji bus purvina ir neatpažįstama tokio dydžio, kokia bus.

04. Sukurkite dvi versijas

Favicon ant skaidraus fono ir vienas ant tvirto užpildo fono

ką tu gali padaryti su blenderiu
Skirtinga kilmė gerai tinka skirtingiems kontekstams(Vaizdo kreditas: Michaelas Flarupas / „Apply Pixels“)

Kai „Internet Explorer 5“ pirmą kartą buvo įvestos piktogramos, jos atsirado URL juostoje ir žymių sąraše. Šiandien „favicons“ rodomi daugelyje kitų kontekstų, įskaitant žymių sąrašus, sparčiuosius meniu ir netgi pagrindinius mobiliųjų telefonų bei televizorių ekranus. Todėl sunku nuspėti, kaip jūsų favicon bus rodomas galutiniam vartotojui.

Kad jūsų favicon gerai atrodytų įvairiuose kontekstuose, kuriuose jis pasirodys, idealiu atveju turėtumėte pateikti du favicon stilius:

Logotipas skaidriame fone
Ši versija rodoma URL juostoje, žymių sąrašuose ir kitose vietose, kur favicon rodomas šalia jūsų svetainės URL ar pavadinimo.

garsūs XXI amžiaus iliustratoriai

Logotipas ant vientiso užpildo
Ši versija naudojama panašių į tinklelį žymių ir nuorodų meniu, kur naršyklė ar įrenginys užmaskuoja foną, kad būtų pasiekta vienoda išvaizda kontekste.

„Favicon“ dydžio cheatsheet

Kaip minėta anksčiau, skirtingiems kontekstams reikia skirtingo dydžio favicon. Žemiau galite pamatyti trumpą įvairių formatų ir matmenų vadovą, kurį turėsite pateikti, kad aptartumėte visus pagrindinius naudojimo atvejus.

Anksčiau favicons turėjo būti pateikiami ICO formatu. Šiandien gerai pateikti failus PNG formatu (išskyrus „Safari“ prisegto skirtuko piktogramą, kuri turėtų būti pateikta kaip SVG).

Jei norite lengvai suprojektuoti ir eksportuoti visus „favicon“ dydžius, pažvelkite į „favicon“ šablonas daugiau nei „Taikyti pikselius“.

Tai yra labiausiai paplitę favicon dydžiai(Vaizdo kreditas: emergeinteractive)

Dabar atidžiau pažvelkime į specifinius skirtingų naudojimo atvejų reikalavimus.

Darbalaukio naršyklės piktogramos

Kaip sukurti darbalaukio naršyklės piktogramą

Pradėkime nuo paprasčiausio favicon, kurį jums reikės sukurti: klasikinis favicon, skirtas klasikinėms darbalaukio naršyklėms. Šio tipo favicon geriausiai veikia skaidriame fone, nes dažnai pasirodys URL juostoje ir žymių sąrašuose.

Klasikinio stiliaus piktogramos, rodomos „Google Chrome“ žymių juostoje ir URL juostoje(Vaizdo kreditas: Michaelas Flarupas / „Apply Pixels“)

Turėsite pateikti trijų tipų favicon, visų dydžių PNG formatas su skaidrus fonas .

  • 16x16
  • 32x32
  • 48x48

„Apple“

Kaip sukurti „Apple Touch“ favicons

„Apple“ „iOS“ naudoja „Apple Touch“ piktogramas pateikti svetaines, kurios buvo išsaugotos „iOS“ pagrindiniame ekrane kaip žymės. Tai reiškia, kad „Apple Touch“ piktograma bus suapvalinta iki sukišti „iOS“ programų piktogramų kaukė.

Jis taip pat bus rodomas bet kuriame fone, kurį vartotojas pasirinko savo pagrindiniam ekranui. Atsižvelgiant į tai, jūsų „Apple Touch“ piktogramoje turėtų būti vientisas užpildymo fonas stiliaus.

Ši piktograma bus rodoma vartotojo pagrindinio ekrano fone(Vaizdo kreditas: Michaelas Flarupas / „Apply Pixels“)

Obuolių favicons turėtų būti tiekiami a PNG formatas . Galite išsisukti pateikdami 180x180 „Apple Touch“ piktograma, kuri bus automatiškai keičiama pagal įvairius „iPhone“ ir „iPad“ dydžius. Daugeliu atvejų tai bus gerai.

kaip būti knygų iliustratoriumi

Jei ne, galite pateikti papildomų dydžių skirtingiems „Apple“ įrenginiams:

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

„Android“, „Chrome“ ir „Opera“

Kaip sukurti „Android“, „Chrome“ ir „Opera“ favicon

„Android“, „Chrome“ ir „Opera“ naudoja android-chrome-192x192.png ir android-chrome-512x512.png kad „Google“ rekomenduoja .

Įvedus adaptyvias piktogramas „Android“, prie „Android“ pagrindinio ekrano pridėtos svetainės užmaskuos 192x192 dizainą, todėl piktograma įgauna formą pagal vartotojo pageidaujamą maskavimo stilių. Tai gali būti kvadratas, elipsė, stačiakampis, suapvalintas stačiakampis arba ašaros forma.

„Favicons“ čia bus užmaskuoti į skirtingas formas, atsižvelgiant į vartotojo pageidavimus(Vaizdo kreditas: Michaelas Flarupas / „Apply Pixels“)

Jums reikia sukurti PNG favicon su tvirtas fonas , 192x192 ir 512x512 .

Įgyvendinkite šiuos mėgstamus simbolius pridėdami a manifestas.json failą į savo svetainę ir susiejimas su juo žymose:

Čia yra manifestas.json failas:

{ '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“

Kaip sukurti „Safari“ prisegto skirtuko favicon

Tai yra nelyginis, ir tai yra vienintelis favicon, kurį reikia pateikti vektorinis formatas kaip SVG failas . Jis rodomas kaip miniatiūros piktograma, kai vartotojas prisegia skirtuką prie „Safari“ naršyklės lango.

piktogramos piktograma: SVG formatas

Skirtingai nuo visų kitų piktogramų, ši piktograma sukuriama iš SVG vaizdo(Vaizdo kreditas: Michaelas Flarupas / „Apply Pixels“)

Ši favicon turi būti 100% juoda SVG byla su skaidrus fonas . SVG gali būti tik vienas sluoksnis, o safariui reikalingas „viewBox“ nustatomas SVG atributas „ 0 0 16 16 ' .

„juodas penktadienis“ „MacBook Pro“ 2016 m

Kiti favicon tipai

Yra keletas favicon matmenų ir formatų, kurie nebuvo įtraukti į šį straipsnį, pvz. „Google TV“, „Chrome“ internetinė parduotuvė ir prieš „iOS 7“ įdiegtos „Apple Touch Icons“. Kodėl? Nes jie buvo nebenaudojami arba dėl to, kad jie retai yra aktualūs vidutiniam interneto kūrėjui.

Apskritai kūrėjai ir dizaineriai turėtų stengtis palaikyti kuo įvairesnius įrenginius ir operacines sistemas, tačiau kartais tai tiesiog nėra prasmės. Bet, jei norite pamatyti išsamesnį „Favicon“ vaizdų sąrašą, būtinai atkreipkite dėmesį į tai „favicon“ apgaulės lapas „GitHub“.

Skaityti daugiau: