Kako dizajnirati favicon: Krajnji vodič

favicon dizajn
(Slika zaslužna: Michael Flarup)
SKOČI NA:


Dizajn Favicona važniji je nego što mislite. Veličina je ovdje zaista bitna jer dobro dizajniran logotip mora biti prepoznatljiv bez obzira na veličinu. Treba se skalirati od masivnih zaslona do ikone koja može biti manja od 16 x 16 piksela, poznate kao favicon. Sjajan primjer favicon dizajna je Googleov logotip. Savršeno funkcionira za veće zaslone sa svojim velikim 'G' i prepoznatljivim tekstom u četiri boje. I dalje je prepoznatljiv kada se smanji na maleni četverobojni 'G' viđen u adresnoj traci web preglednika.

Favicon se također može vidjeti kao ikona prečaca, ikona kartice ili ikona oznake, tako da treba pogledati dio. Da biste vidjeli koji favicon dizajni djeluju, pogledajte naš pregled inspiracija za dizajn logotipa i pogledajte ovu zapanjujuću kolekciju Ikone aplikacija za iOS koji to točno shvaćaju.

U ovom ćemo članku proći kroz postupak dizajniranja savršenog favicona. Uključit ćemo posebne savjete za izradu favicona za Apple uređaje, Android, Chrome, Opera i Safari. Plus priručnik o različitim veličinama i formatima favicona koje trebate znati. Pomoću brzih veza (desno) skočite ravno do željenog odjeljka.



Dizajn favicona: brze poveznice

- Pravila dizajna Favicon
- Varalica s veličinama Favicona
- Favoriti stolnog preglednika
- Apple Touch favoriti
- Android, Chrome i Opera
- Safarijeva prikvačena kartica



kako napraviti 3d izgled 2d

U prvim danima weba favicon je jednostavno bio datoteka s ikonama 16x16px, ali danas je malo složeniji. Postoje različite veličine i procesi favikona za različite kontekste. Stvaranje ispravnog favicona je znanost.

Stoga ćemo započeti s nekoliko glavnih savjeta kako bi vaš favicon trebao izgledati, a zatim ćemo prijeći na konkretne savjete o tome kako stvoriti favicon za različite kontekste. Koristit ćemo predložak dostupan na Primjeni piksele za lako generiranje različitih potrebnih veličina favikona, a kao primjer favicon iz Primijeni piksele.



Pravila dizajna Favicon

01. Učinite to prepoznatljivim

Prvo što treba uzeti u obzir prilikom dizajniranja favicona jest ono što treba biti predstavljeno na platnu. Imajte na umu da se vaša favicon korisniku prikazuje samo kad već jeste na vašoj web stranici ili ste je označili. Stoga nema potrebe pokušavati privući korisnika svojim faviconom.

Favicone smatrajte trezvenim putokazima koji pomažu korisnicima u prepoznavanju vaše web stranice prilikom pregledavanja njihovih popisa oznaka i početnih zaslona. Stoga želite koristiti svoj logotip ili koji simbol najlakše omogućava korisniku da prepozna vašu web stranicu. Ako nemate logotipa koji odgovara kvadratnom platnu, upotrijebite najprepoznatljiviji dio svog logotipa.

03. Neka bude jasno

Postoji i nekoliko stvari koje biste trebali izbjegavati. Ne upotrebljavajte favicon kao marketinški alat - to znači da nema oznaka s cijenama, 'novih' ili 'ažuriranih' natpisa i tako dalje. U stvari, uopće ne želite staviti tekst u favicon. Tekst se ne prilagođava dobro, a šanse su da će ionako biti nečitljiv. Napokon, nemojte koristiti fotografiju - ona će biti mutna i neprepoznatljiva u veličini na kojoj će se pojaviti.



04. Stvorite dvije verzije

Favicon na prozirnoj pozadini i jedan na punoj pozadini

Različite pozadine dobro funkcioniraju u različitim kontekstima(Slika: Michael Flarup / Primjena piksela)

Kada su favikon prvi put predstavljeni u Internet Exploreru 5, pojavili su se u URL traci i na popisu oznaka. Danas se favikoni prikazuju u mnogim drugim kontekstima, uključujući popise oznaka, izbornike prečaca, pa čak i mobilne i TV početne zaslone. Zbog toga je teško predvidjeti kako će se vaša favikona prikazivati ​​krajnjem korisniku.

Da biste osigurali da vaš favicon izgleda dobro u mnogim različitim kontekstima u kojima će se pojaviti, idealno bi bilo pružiti dva stila favicon:

Logotip na prozirnoj pozadini
Ova se verzija prikazuje na URL traci, popisima oznaka i na drugim mjestima na kojima se favikon pojavljuje pored URL-a ili imena vašeg web mjesta.

Logotip na čvrstom ispunu
Ova se inačica koristi u mrežnim oznakama i izbornicima prečaca gdje preglednik ili uređaj maskiraju pozadinu kako bi se postigao ujednačen izgled u kontekstu.

Favicon tablica veličine

Kao što je već spomenuto, različiti konteksti zahtijevaju različite veličine favikona. Ispod možete vidjeti kratki vodič za različite formate i dimenzije koje trebate isporučiti da biste pokrili sve glavne slučajeve upotrebe.

Prije su se favicons morali pružati u ICO formatu. Danas je u redu pružiti datoteke u PNG formatu (osim ikone pričvršćene kartice Safari koja bi trebala biti SVG).

Ako želite jednostavan način dizajniranja i izvoza svih veličina favikona, pogledajte predložak favicon preko na Primjeni piksele.

Favicon varalica

Ovo su najčešće veličine favicona(Slika pripisana: emergeinteractive)

Sada ćemo detaljnije pogledati specifične zahtjeve različitih slučajeva upotrebe.

Favoriti stolnog preglednika

Kako stvoriti favicon preglednika na radnoj površini

Počnimo s najjednostavnijim faviconom koji ćete trebati stvoriti: klasični favicon za klasične preglednike na radnoj površini. Ova vrsta favikona najbolje djeluje na prozirnoj pozadini, jer će se često pojavljivati ​​na URL traci i na popisima oznaka.

Favicons prikazani na traci oznaka i URL traci u Google Chromeu

Favoriti klasičnog stila prikazani na traci oznaka i URL traci u Google Chromeu(Slika: Michael Flarup / Primjena piksela)

Morat ćete pružiti ovu vrstu favicona u tri veličine, sve u PNG format s prozirna pozadina .

kako nacrtati pravog medvjeda
  • 16x16
  • 32x32
  • 48x48

Jabuka

Kako stvoriti Apple Touch favicons

Appleov iOS koristi Apple Touch Icons za predstavljanje web stranica koje su spremljene na početni zaslon iOS-a kao oznake. To znači da će Apple Touch Icon biti zaokružena na vjeverica maska ​​ikona aplikacija za iOS.

Prikazat će se i na onoj pozadini koju je korisnik odabrao za početni zaslon. Imajući ovo na umu, vaša Apple Touch ikona trebala bi imati čvrsta pozadina za popunjavanje stil.

iPhone početni zaslon s ikonama

Ova će se oznaka prikazati na pozadini korisničkog početnog zaslona(Slika: Michael Flarup / Primjena piksela)

Apple favicons trebali biste se isporučiti u a PNG format . Možete se izvući pružajući a 180x180 Ikona Apple Touch koja će se automatski prilagoditi raznim veličinama iPhonea i iPada. To će u većini slučajeva uspjeti.

Ako ne, možete navesti dodatne veličine za različite Apple uređaje:

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

Android, Chrome i Opera

Kako stvoriti favicon za Android, Chrome i Opera

Android, Chrome i Opera koriste android-krom-192x192.png i android-chrome-512x512.png da Google preporučuje .

Od uvođenja prilagodljivih ikona u Androidu, web stranice dodane na početni zaslon Androida maskirat će dizajn 192x192, pa se ikona oblikuje prema korisnikovom željenom stilu maskiranja. To bi mogao biti oblik vjeverice, elipse, pravokutnika, zaobljenog pravokutnika ili kapljice.

Favoriti na početnom zaslonu Android Pie

Ovdje će se ikone maskirati u različite oblike, prema korisničkim željama(Slika: Michael Flarup / Primjena piksela)

Trebate stvoriti PNG favicon sa solidna podloga , na 192x192 i 512x512 .

Primijenite ove favorite dodavanjem a manifest.json datoteku na vaše web mjesto i povezivanje s njom unutar oznaka:

Ovdje je kod za manifest.json datoteka:

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

Kako stvoriti favicon za prikvačenu karticu Safarija

Ovo je neobično i to je jedina opcija koju treba pružiti vektorski format kao an SVG datoteka . Prikazuje se kao ikona minijature kad korisnik prikvači karticu u prozor preglednika Safari.

ikona favikona: SVG format

Za razliku od svih ostalih ikona, ova se ikona generira iz SVG slike(Slika: Michael Flarup / Primjena piksela)

Ovaj favikon mora biti 100% crna SVG datoteka s prozirna pozadina . SVG može biti samo jedan sloj, a safari zahtijeva viewBox atribut SVG-a treba postaviti na ' 0 0 16 16 ' .

Ostale vrste favikona

Postoje neke dimenzije i formati favicona koji nisu uključeni u ovaj članak, npr. Google TV, web-trgovina Chrome i Apple Touch Icons prije iOS-a 7. Zašto? Budući da su zastarjeli ili zato što su rijetko relevantni za prosječnog web programera.

Općenito, programeri i dizajneri trebali bi nastojati podržati što širi izbor uređaja i operativnih sustava, ali ponekad to jednostavno nema smisla. Ali, ako želite vidjeti cjelovitiji popis favicon slika, svakako pogledajte ovo favicon varalica na GitHubu.

Čitaj više: