3 načini za ustvarjanje lastne ikone Favicon

Kazalo:

3 načini za ustvarjanje lastne ikone Favicon
3 načini za ustvarjanje lastne ikone Favicon

Video: 3 načini za ustvarjanje lastne ikone Favicon

Video: 3 načini za ustvarjanje lastne ikone Favicon
Video: CS50 2013 - Week 9 2024, Maj
Anonim

Favicon je tista kul slika poleg naslovne vrstice v brskalniku. To je tisto, kar razlikuje vaše spletno mesto na zavihku zaznamkov in ga lahko uporabite za povečanje prepoznavnosti blagovne znamke. Če imate spletno mesto, vendar nikoli niste razmišljali o ustvarjanju ikone, morate premisliti o svoji odločitvi. Razvijalci programske opreme vse pogosteje uporabljajo ikone za različne vidike svojih aplikacij, na primer ikone domačega zaslona na tabličnih računalnikih. Na srečo je oblikovanje, ustvarjanje in izvajanje favicona nekaj, kar lahko naredi skoraj vsak, če sledi ustreznim korakom.

Koraki

Metoda 1 od 3: Oblikovanje vašega Favicona

Ustvarite svojo ikono Favicon 1. korak
Ustvarite svojo ikono Favicon 1. korak

Korak 1. Ustvarite ikono, ki predstavlja vaše spletno mesto

Vrsta spletnega mesta, ki ga imate, bi morala določiti videz vašega favicona. Poskusite oblikovati nekaj, kar se bo držalo podobe vaše blagovne znamke in bo ljudem prepoznavno in nepozabno. Vaš favicon bo prva stvar, ki jo ljudje vidijo, ko pogledajo zavihke v svojem brskalniku, in se prikaže tudi med zaznamki ljudi.

  • Na primer, če imate spletno stran s hrano, lahko izbira priljubljene, ki vsebuje sadje ali zelenjavo, postane bolj nepozabna.
  • Če je vaše spletno mesto za odvetniško družbo ali investicijsko podjetje, je najboljši tradicionalni in elegantni favicon.
  • Če je vaše spletno mesto namenjeno mlajšim, poskusite ustvariti igriv in barvit favicon.
Ustvarite svojo ikono Favicon 2. korak
Ustvarite svojo ikono Favicon 2. korak

Korak 2. Odločite se, ali želite prozorno ozadje

Če ne določite ozadja, se bo zapolnilo z belo, kar morda ne ustreza vaši blagovni znamki. Prozorno ozadje bo prevzelo barvo brskalnika osebe in bo v nekaterih primerih videti bolj poenostavljeno. V drugih primerih se zaradi barve ozadja pojavijo črke v ospredju ali grafika. Odločite se, kaj bi bilo najboljše za vaš dizajn in ga imejte v mislih, ko ga izdelujete.

Najosnovnejši favicon je kvadrat velikosti 16x16 in ima barvo ozadja

Ustvarite svojo ikono Favicon 3. korak
Ustvarite svojo ikono Favicon 3. korak

Korak 3. Ustvarite ikono, ki je enostavna za branje

Ker je podoba priljubljene, ki jo boste uporabljali, majhna, je pomembno, da svojo blagovno znamko predstavite brez zmede obiskovalcev. Favicon, ki ga je težko prebrati, pusti negativen vtis in lahko v mislih obiskovalcev vzbudi vprašanja o kakovosti dela, ki ga lahko ponudite. Preveč zapletene slike in logotipi ne izgledajo dobro, če se zmanjšajo na 16x16 ali 32x32 slikovnih pik.

  • Če je vaš obstoječi logotip preveč zapleten, ga lahko poenostavite s taktiko, tako da ga je mogoče prepoznati pri velikosti ikone. Namesto prikaza celotnega imena podjetja uporabite začetnice ali pa namesto slike uporabite oblikovano preprosto ikono.
  • Če že imate preprost logotip, lahko sliko skrčite in jo nastavite kot svojo ikono. Morda ga boste morali spremeniti, preden ga pretvorite v datoteko z ikonami.
  • Uporabite lahko tudi sliko predmeta, ki opisuje celotno temo vašega spletnega mesta.
Ustvarite svojo ikono Favicon 4. korak
Ustvarite svojo ikono Favicon 4. korak

Korak 4. Ustvarite estetsko prijeten favicon

Struktura vašega favicona se imenuje njegova oblika. Favikoni običajno dobijo oblike, na primer krog ali kvadrat. Ko oblikujete svoj favicon, je na splošno bolje, če se prilega eni od teh osnovnih oblik, ker se lahko oblike proste oblike pogosto zmedejo ali zmedejo pri 16x16 slikovnih pikah. Drug pomemben vidik vašega oblikovanja se imenuje estetska enotnost. Estetska enotnost vključuje podrobnosti in velikosti različnih komponent v vašem faviconu in kako je vaš favicon uravnotežen. Bolj kot so podrobnosti enotne, bolj skladen bo videti vaš favicon. Na primer, uporaba različnih vrst pisav ali velikosti pisave v vašem faviconu ni prijetna za oko in lahko povzroči, da bo vaš favicon videti zmedeno ali grdo.

  • Drug primer estetske enotnosti je ohranjanje zaobljenih vogalov po vseh oblikah v vašem faviconu.
  • Dober primer ikone, ki je spremenila obliko, je Googlov favicon. Iz kvadrata se je spremenil v krog.
Ustvarite svojo ikono Favicon 5. korak
Ustvarite svojo ikono Favicon 5. korak

Korak 5. Uporabite barve, ki so skladne z vašo blagovno znamko

Ko ustvarite svoj favicon, ga ustvarite v 8 -bitni (256 barv) ali 24 -bitni (16,7 milijona barv) globini barv, saj bo to delovalo v sodobnih brskalnikih. Prepričajte se, da lahko izbrane barve najdete drugje na svojem spletnem mestu ali so na nek način povezane z vašo blagovno znamko. Favicon z barvami, ki niso na vašem spletnem mestu, logotipu ali v aplikacijah, se ne bo zapomnil in ljudje ne bodo mogli povezati ikone z vašo blagovno znamko.

  • Nekatere ustvarjalne uporabe barve favicon vključujejo GitHub, ki spreminja barve glede na stanje vašega sistema, in Trello, ki se spreminja glede na barvo ozadja.
  • Najpogostejši barvi, uporabljeni v faviconih, sta rdeča in modra.
Ustvarite svojo ikono Favicon 6. korak
Ustvarite svojo ikono Favicon 6. korak

Korak 6. Pri oblikovanju favicona upoštevajte svoje občinstvo

Razen prepoznavanja vaše blagovne znamke mora biti vaš favicon privlačen za vaše obiskovalce. Ljudje z različnimi okusi, interesi in družbenimi normami bodo na različno ikonologijo gledali z različnih vidikov. Kulturne razlike obstajajo v naši družbi in lahko zmedejo ali odbijejo občinstvo, ki ga poskušate pritegniti.

Na primer, Mac Os X uporablja žig, ki je univerzalni simbol za pošto. Uporaba nabiralnika ne bi bila tako učinkovita, ker se nabiralniki razlikujejo v različnih delih sveta

Ustvarite svojo ikono Favicon 7. korak
Ustvarite svojo ikono Favicon 7. korak

Korak 7. Pridobite mnenje prijateljev in sodelavcev

Čeprav grafično ni neverjetno intenziven, je favicon pomemben del vaše blagovne znamke. Na primer, pomislite na svoja najljubša spletna mesta, kot so Twitter, Gmail, Facebook ali wikiHow, in koliko povezujete favicon z blagovno znamko. Če nimate dobrega pogleda na oblikovanje ali ste v zadregi glede tega, kakšno obliko bi morali imeti za svojo spletno stran, se posvetujte s prijatelji, ki imajo radi oblikovanje ali se ukvarjajo z grafičnim oblikovanjem.

  • V svoji mreži prijateljev povprašajte, ali lahko kdo brezplačno svetuje pri oblikovanju.
  • Večja podjetja imajo lastne grafične oblikovalce, ki lahko ustvarijo podobo priljubljenih.

Metoda 2 od 3: Ustvarite svoj Favicon

Ustvarite svojo ikono Favicon 8. korak
Ustvarite svojo ikono Favicon 8. korak

Korak 1. S programsko opremo za urejanje fotografij ustvarite svojo ikono

Za ustvarjanje slike za vašo ikono lahko uporabite programsko opremo za urejanje fotografij, kot sta Adobe Photoshop ali Illustrator. Te programske aplikacije vam omogočajo tudi spreminjanje velikosti in izvoz slike v pravi obliki. Nekatera programska oprema vam omogoča, da ročno ustvarite svoj favicon.

  • Obstajajo tudi posebni programi za urejanje, ki jih najdete na spletu.
  • Uporabite iskalnik in vnesite »urejevalniki favicon«.
  • Naj bo vaše platno velikosti 512x512 slikovnih pik, ker se to število razčleni na najbolj ustrezne velikosti ikone in je še vedno dovolj veliko, da ga lahko učinkovito urejate.
  • Druga priljubljena programska oprema za urejanje fotografij vključuje GIMP, PhotoScape in Paint. NET.
  • Ko uporabljate to programsko opremo, ne boste mogli neposredno urejati datotek.ico, lahko pa uporabite datoteke.png,-j.webp" />
Ustvarite svojo ikono Favicon 9. korak
Ustvarite svojo ikono Favicon 9. korak

Korak 2. Spremenite velikost in shranite svoj favicon

32x32 px je velikost elementov namizja Windows, 16x16 px pa velikost ikon na zavihku brskalnika. Ko ustvarite svoj favicon v večji obliki, je pomembno, da zmanjšate njegovo velikost, da boste lahko videli, kako bo videti v brskalnikih ljudi. Če ni berljivo ali estetsko neprijetno, začnite znova pri svojem prvotnem dizajnu. Pomislite na platforme, na katerih bo najverjetneje uporabljeno vaše spletno mesto ali aplikacija, nato pa ustvarite ikono, ki bo pokrivala vse vaše baze.

  • Pomembno je omeniti, da različna strojna in programska oprema uporablja različne velikosti ikon.
  • Nekatere druge velikosti favicon vključujejo 57x57px za standardni domači zaslon iOS, 72x72px za iPad, 96x96px za Google TV, 128x128px za spletno trgovino Chrome in 195x195px za hitro klicanje Opera.
  • Če želite pokriti vse svoje baze, lahko ustvarite različice svojega favicona v vsaki od teh velikosti.
  • Shranite ločene različice svojega favicona, da ne izgubite opravljenega dela.
Ustvarite svojo ikono Favicon 10. korak
Ustvarite svojo ikono Favicon 10. korak

Korak 3. Združite datoteke s pretvornikom

Odlična stvar pri datotekah.ico je, da lahko za njihovo ustvarjanje združite več datotek. To je uporabno, ker bodo različni brskalniki in programska oprema želeli ikono drugačne velikosti. Če želite, da vaš favicon izgleda dobro na vseh različnih platformah, pretvorite datoteke s spletnim pretvornikom. V svoj najljubši iskalnik vnesite "icon converter", da poiščete brezplačne spletne aplikacije za to. Združeno datoteko shranite kot "favicon.ico."

  • Uporabite lahko tudi program, kot je GIMP, ki ima vgrajeno funkcijo, ali naložite vtičnik, imenovan ICO FORMAT, v Adobe Photoshop.
  • Ustvarite novo mapo, da boste lahko shranili nove ikone ali dela v teku.
  • V iskalnik vnesite ".ico converter" ali "favicon generator", da poiščete različna orodja, ki jih lahko uporabite.

Metoda 3 od 3: Izvajanje vašega Favicon -a

Ustvarite svojo ikono Favicon 11. korak
Ustvarite svojo ikono Favicon 11. korak

Korak 1. Naložite svoj favicon, če uporabljate urejevalnik spletnih mest

Številni urejevalniki spletnih mest imajo vgrajen obrazec, ki vam omogoča, da svoj favicon samodejno naložite na svoje spletno mesto. Če uporabljate urejevalnik spletnega mesta, ki ima to vgrajeno, poiščite možnosti, ki pravijo "Naloži Favicon" ali "Dodaj Favicon" v meniju z nastavitvami spletnega mesta. Izberite datoteko favicon.ico in jo naložite na svoje spletno mesto.

Če v urejevalniku spletnega mesta ne najdete mesta za nalaganje svoje ikone, morate to narediti ročno

Ustvarite svojo ikono Favicon 12. korak
Ustvarite svojo ikono Favicon 12. korak

Korak 2. Naložite datoteko v korenski imenik svojega spletnega mesta

Če vaše spletno mesto podpira protokol za prenos datotek ali FTP, lahko s svojim odjemalcem FTP naložite novo datoteko favicon.icon v svoj korenski (indeksni) imenik. V nasprotnem primeru morate obiskati stran svojih spletnih gostiteljev in sliko naložiti ročno. Ne pozabite zamenjati obstoječe datoteke favicon.ico z novo datoteko.

Ustvarite svojo ikono Favicon 13. korak
Ustvarite svojo ikono Favicon 13. korak

Korak 3. Dodajte datoteko v glavo

Poiščite mesto, kjer lahko dostopate do datotek PHP in CSS za vaše spletno mesto. Pojdite na datoteko header.php svojega spletnega mesta in jo uredite. Pod vrsto oznake je"

  • . To bi moralo povezati vaše spletno mesto z vašo ikono.

    Ker uporabljate PHP, to pomeni, da bodo vsa spletna mesta, ki uporabljajo vašo datoteko glave, imela isti simbol

    Ustvarite svojo ikono Favicon 14. korak
    Ustvarite svojo ikono Favicon 14. korak

    Korak 4. Osvežite brskalnik

    Ko naložite ikono favicon, lahko osvežite brskalnik, da bo poleg naslovne vrstice videl vašo novo sliko. Če želite iti neposredno na sliko posodobljenega favicona, vnesite »https://www.yourdomain.com/favicon.ico«.

    • Če se vaš favicon sprva ne prikaže, boste morda morali ponastaviti predpomnilnik brskalnika.
    • Če želite počistiti predpomnilnik, pojdite v nastavitve brskalnika in izbrišite začasne internetne datoteke, piškotke in zgodovino.

Priporočena: