3 būdai, kaip sukurti savo „Favicon“piktogramą

Turinys:

3 būdai, kaip sukurti savo „Favicon“piktogramą
3 būdai, kaip sukurti savo „Favicon“piktogramą

Video: 3 būdai, kaip sukurti savo „Favicon“piktogramą

Video: 3 būdai, kaip sukurti savo „Favicon“piktogramą
Video: How to Change Where Downloaded Files Are Saved in Firefox 2024, Gegužė
Anonim

Favicon yra tas šaunus mažas vaizdas šalia jūsų adreso juostos naršyklėje. Tai išskiria jūsų svetainę žymių skirtuke ir gali būti naudojama siekiant padidinti prekės ženklo žinomumą. Jei turite svetainę, bet niekada nesvarstėte sukurti „favicon“, turėtumėte persvarstyti savo sprendimą. Programinės įrangos kūrėjai vis dažniau naudoja „favicons“skirtingiems savo programų aspektams, pvz., Planšetinių kompiuterių pagrindinio ekrano piktogramoms. Laimei, „favicon“projektavimas, kūrimas ir įgyvendinimas yra tai, ką beveik kiekvienas gali padaryti, jei atliks teisingus veiksmus.

Žingsniai

1 metodas iš 3: „Favicon“projektavimas

Sukurkite savo „Favicon“piktogramą 1 veiksmas
Sukurkite savo „Favicon“piktogramą 1 veiksmas

Žingsnis 1. Sukurkite favikoną, vaizduojantį jūsų svetainę

Jūsų turimos svetainės tipas turėtų nustatyti jūsų favicon išvaizdą. Pabandykite sukurti tai, kas atitiktų jūsų prekės ženklo įvaizdį ir būtų atpažįstama ir įsimintina žmonėms. Jūsų mėgstamiausia piktograma bus pirmas dalykas, kurį žmonės pamatys žiūrėdami į savo naršyklės skirtukus ir taip pat bus rodomi žmonių žymėse.

  • Pavyzdžiui, jei turite maisto svetainę, pasirinkę „favicon“, kurio dizainas turi vaisių ar daržovių, jis gali būti įsimintinesnis.
  • Jei jūsų svetainė skirta advokatų kontorai ar investicinei bendrovei, geriausia yra tradicinė ir aptakus favicon.
  • Jei jūsų svetainė skirta jaunesniems žmonėms, pabandykite sukurti žaismingą ir spalvingą favikoną.
Sukurkite savo „Favicon“piktogramą 2 veiksmas
Sukurkite savo „Favicon“piktogramą 2 veiksmas

Žingsnis 2. Nuspręskite, ar norite skaidraus fono

Jei nenurodysite fono, jis bus užpildytas balta spalva, kuri gali neatitikti jūsų prekės ženklo. Skaidrus fonas įgaus asmens naršyklės spalvą ir kai kuriais atvejais atrodys racionaliau. Kitais atvejais, turint fono spalvą, priekinės raidės ar grafika pasirodys. Nuspręskite, kas geriausiai tinka jūsų dizainui, ir nepamirškite to kurdami.

Paprasčiausias faviconas yra 16x16 kvadratas ir turi fono spalvą

Sukurkite savo „Favicon“piktogramą 3 veiksmas
Sukurkite savo „Favicon“piktogramą 3 veiksmas

Žingsnis 3. Sukurkite lengvai skaitomą favikoną

Kadangi jūsų naudojamas favicon vaizdas yra mažas, svarbu, kad galėtumėte pristatyti savo prekės ženklą, nesuklaidindami lankytojų. Favicon, kurį sunku perskaityti, palieka neigiamą įspūdį ir gali sukelti klausimų lankytojo galvoje apie darbo kokybę, kurią galite pateikti. Pernelyg sudėtingi vaizdai ir logotipai neatrodo gerai, kai jie sumažėja iki 16x16 arba 32x32 pikselių.

  • Jei jūsų esamas logotipas yra per daug sudėtingas, galite jį supaprastinti naudodami taktiką, kad jis būtų atpažįstamas favicon dydžiu. Naudokite inicialus, o ne rodykite visą įmonės pavadinimą, arba kurkite paprastą piktogramą, o ne paveikslėlį.
  • Jei jau turite paprastą logotipą, galite jį sumažinti ir nustatyti kaip mėgstamą. Prieš konvertuodami į piktogramų failą, gali tekti jį pakeisti.
  • Taip pat galite naudoti objekto nuotrauką, kuri apibūdina bendrą jūsų svetainės temą.
Sukurkite savo „Favicon“piktogramą 4 veiksmas
Sukurkite savo „Favicon“piktogramą 4 veiksmas

Žingsnis 4. Sukurkite estetišką favikoną

Jūsų „favicon“struktūra vadinama jos forma. „Favicons“paprastai įgauna tokias formas kaip apskritimas ar kvadratas. Kuriant „favicon“paprastai geriau, jei jis gali tilpti į vieną iš šių pagrindinių formų, nes laisvos formos formos dažnai gali būti sumišusios ar supainiotos esant 16 x 16 pikselių. Kitas svarbus jūsų dizaino aspektas vadinamas estetine vienybe. Estetinė vienybė apima įvairių „favicon“komponentų detales ir dydžius bei tai, kaip jūsų favicon yra subalansuotas. Kuo vienodesnės detalės, tuo darnesnis atrodys jūsų faviconas. Pvz., Skirtingų šriftų tipų ar dydžių naudojimas favicone nėra malonus akiai, todėl favicon gali atrodyti sutrikęs ar netvarkingas.

  • Kitas estetinės vienybės pavyzdys yra suapvalintų kampų išlaikymas visose favicon formose.
  • Geras piktogramos, pakeitusios formą, pavyzdys yra „Google“piktograma. Jis pasikeitė iš kvadrato į apskritimą.
Sukurkite savo „Favicon“piktogramą 5 veiksmas
Sukurkite savo „Favicon“piktogramą 5 veiksmas

Žingsnis 5. Naudokite spalvas, derančias prie jūsų prekės ženklo

Kurdami „favicon“, turėtumėte sukurti 8 bitų (256 spalvų) arba 24 bitų (16,7 mln. Spalvų) spalvų gylį, nes tai veiks šiuolaikinėse naršyklėse. Įsitikinkite, kad pasirinktas spalvas galima rasti kitur jūsų svetainėje arba tam tikru būdu susieti su jūsų prekės ženklu. Faviconas su spalvomis, kurių nėra jūsų svetainėje, logotipe ar programose, nebus įsimenamas, ir žmonės negalės susieti piktogramos su jūsų prekės ženklu.

  • Kai kurie kūrybingi „favicon“spalvų naudojimo būdai yra „GitHub“, kuris keičia spalvas, priklausomai nuo jūsų sistemos būsenos, ir „Trello“, kuris keičiasi priklausomai nuo jūsų fono spalvos.
  • Dažniausiai favikonuose naudojamos spalvos yra raudona ir mėlyna.
Sukurkite savo „Favicon“piktogramą 6 veiksmas
Sukurkite savo „Favicon“piktogramą 6 veiksmas

Žingsnis 6. Kurdami „favicon“, atsižvelkite į savo auditoriją

Išskyrus jūsų prekės ženklo identifikavimą, jūsų faviconas turi atrodyti patrauklus lankytojams. Žmonės, turintys skirtingą skonį, pomėgius ir visuomenės normas, pažvelgs į skirtingą ikonologiją iš skirtingų perspektyvų. Kultūriniai skirtumai egzistuoja mūsų visuomenėje ir gali suklaidinti ar atstumti auditoriją, kurią bandote pritraukti.

Pavyzdžiui, „Mac Os X“naudojamas antspaudas, kuris yra universalus pašto simbolis. Naudoti pašto dėžutę nebūtų taip efektyvu, nes pašto dėžutės įvairiose pasaulio vietose skiriasi

Sukurkite savo „Favicon“piktogramą 7 veiksmas
Sukurkite savo „Favicon“piktogramą 7 veiksmas

Žingsnis 7. Gaukite draugų ir kolegų nuomonę

Nors tai nėra neįtikėtinai intensyvi grafika, „Favicon“yra svarbi jūsų prekės ženklo dalis. Pvz., Pagalvokite apie savo mėgstamas svetaines, tokias kaip „Twitter“, „Gmail“, „Facebook“ar „wikiHow“, ir apie tai, kiek susiejate „favicon“su prekės ženklu. Jei neturite tinkamų dizaino bruožų arba nesuprantate, kokį dizainą turėtumėte turėti savo svetainėje, pasitarkite su draugais, kurie domisi dizainu ar dirba grafiniu dizainu.

  • Paklauskite savo draugų tinklo, ar kas nors gali nemokamai patarti dėl dizaino.
  • Didesnės įmonės turi vidinius grafikos dizainerius, kurie gali sukurti „favicon“įvaizdį.

2 metodas iš 3: „Favicon“sukūrimas

Sukurkite savo „Favicon“piktogramą 8 veiksmas
Sukurkite savo „Favicon“piktogramą 8 veiksmas

Žingsnis 1. Naudokite nuotraukų redagavimo programinę įrangą, kad sukurtumėte favikoną

Norėdami sukurti „favicon“vaizdą, galite naudoti nuotraukų redagavimo programinę įrangą, pvz., „Adobe Photoshop“ar „Illustrator“. Šios programinės įrangos programos taip pat leidžia keisti vaizdo dydį ir jį eksportuoti tinkamu formatu. Kai kuri programinė įranga leidžia jums sukurti savo favicon rankiniu būdu.

  • Taip pat yra specialių „favicon“redagavimo programų, kurias galite rasti internete.
  • Naudokite paieškos variklį ir įveskite „favicon redaktoriai“.
  • Padarykite drobės dydį 512x512 pikselių, nes šis skaičius suskirstomas į tinkamiausius favicon dydžius ir vis tiek yra pakankamai didelis, kad galėtumėte efektyviai redaguoti.
  • Kita populiari nuotraukų redagavimo programinė įranga apima „GIMP“, „PhotoScape“ir „Paint. NET“.
  • Naudodami šią programinę įrangą negalėsite tiesiogiai redaguoti.ico failų, tačiau galite naudoti.png,-j.webp" />
Sukurkite savo „Favicon“piktogramą 9 veiksmas
Sukurkite savo „Favicon“piktogramą 9 veiksmas

2 žingsnis. Pakeiskite favicon dydį ir išsaugokite

32x32 px yra „Windows“darbalaukio elementų dydis, o 16x16 px - naršyklės skirtuko favicons dydis. Sukūrus „favicon“didesniu formatu, svarbu sumažinti jo dydį, kad galėtumėte pamatyti, kaip jis atrodys žmonių naršyklėse. Jei jis neįskaitomas arba nėra estetiškai patrauklus, pradėkite nuo savo originalaus dizaino. Pagalvokite apie platformas, kuriose greičiausiai bus naudojama jūsų svetainė ar programa, tada sukurkite piktogramą, kuri apimtų visas jūsų bazes.

  • Svarbu pažymėti, kad skirtinga aparatinė ir programinė įranga naudoja skirtingus favicon dydžius.
  • Kai kurie kiti „favicon“dydžiai apima 57x57px standartiniam „iOS“pagrindiniam ekranui, 72x72px „iPad“, 96x96px „Google TV“, 128x128px „Chrome“internetinei parduotuvei ir 195x195px „Opera Speed Speed Dial“.
  • Jei norite aprėpti visas savo bazes, galite sukurti kiekvieno iš šių dydžių „favicon“versijas.
  • Išsaugokite atskiras „favicon“versijas, kad neprarastumėte atlikto darbo.
Sukurkite savo „Favicon“piktogramą 10 veiksmas
Sukurkite savo „Favicon“piktogramą 10 veiksmas

Žingsnis 3. Sujunkite failus naudodami keitiklį

Puikus dalykas.ico failuose yra tai, kad galite sujungti daugiau nei vieną failą, kad jį sukurtumėte. Tai naudinga, nes skirtingos naršyklės ir programinė įranga norės skirtingo dydžio piktogramos. Norėdami įsitikinti, kad jūsų „favicon“atrodo gerai visose skirtingose platformose, konvertuokite failus naudodami internetinį keitiklį. Įveskite „piktogramų keitiklį“į savo mėgstamą paieškos variklį, kad rastumėte nemokamų internetinių programų tai padaryti. Išsaugokite sujungtą failą kaip „favicon.ico“.

  • Taip pat galite naudoti tokią programą kaip GIMP, kurioje yra įmontuota funkcija, arba atsisiųsti papildinį pavadinimu ICO FORMAT į „Adobe Photoshop“.
  • Sukurkite naują aplanką, kad galėtumėte išsaugoti naujus piktogramas ar nebaigtus darbus.
  • Paieškos sistemoje įveskite „.ico converter“arba „favicon generator“, kad rastumėte įvairių įrankių, kuriuos galite naudoti.

3 metodas iš 3: „Favicon“diegimas

Sukurkite savo „Favicon“piktogramą 11 veiksmas
Sukurkite savo „Favicon“piktogramą 11 veiksmas

1 veiksmas. Įkelkite favicon, jei naudojate svetainės redaktorių

Daugelyje svetainių redaktorių yra integruota forma, leidžianti automatiškai įkelti „favicon“į svetainę. Jei naudojate svetainės redaktorių, kuriame yra ši funkcija, savo svetainės nustatymų meniu ieškokite parinkčių, kuriose sakoma „Įkelti„ Favicon “arba„ Add Favicon “. Pasirinkite failą favicon.ico ir įkelkite jį į savo svetainę.

Jei svetainės redaktoriuje nerandate vietos, kur įkelti favicon, turėsite tai padaryti rankiniu būdu

Sukurkite savo „Favicon“piktogramą 12 veiksmas
Sukurkite savo „Favicon“piktogramą 12 veiksmas

2 veiksmas. Įkelkite failą į savo svetainės šakninį katalogą

Jei jūsų svetainė palaiko failų perdavimo protokolą arba FTP, tuomet galite naudoti savo FTP klientą, norėdami įkelti naują failą favicon.icon į savo šakninį (rodyklės) katalogą. Jei ne, turėsite eiti į žiniatinklio prieglobos puslapį ir įkelti vaizdą rankiniu būdu. Nepamirškite pakeisti esamo favicon.ico failo nauju.

Sukurkite savo „Favicon“piktogramą 13 veiksmas
Sukurkite savo „Favicon“piktogramą 13 veiksmas

Žingsnis 3. Pridėkite failą prie antraštės

Raskite vietą, kur galite pasiekti savo svetainės PHP ir CSS failus. Eikite į savo svetainės failą header.php ir redaguokite. Pagal žymos tipą „

  • ". Tai turėtų sujungti jūsų svetainę su" favicon ".

    Kadangi naudojate PHP, tai reiškia, kad visos svetainės, kuriose naudojamas antraštės failas, dabar turės tą pačią piktogramą

    Sukurkite savo „Favicon“piktogramą 14 veiksmas
    Sukurkite savo „Favicon“piktogramą 14 veiksmas

    Žingsnis 4. Atnaujinkite naršyklę

    Įkėlę „favicon“galite atnaujinti naršyklę, kad šalia adreso juostos pamatytumėte naują vaizdą. Norėdami tiesiogiai pereiti prie atnaujinto favicon vaizdo, įveskite „https://www.yourdomain.com/favicon.ico“.

    • Jei jūsų faviconas iš pradžių nerodomas, gali tekti iš naujo nustatyti naršyklės talpyklą.
    • Norėdami išvalyti talpyklą, eikite į naršyklės nustatymus ir ištrinkite laikinus interneto failus, slapukus ir istoriją.

Rekomenduojamas: