Fara í aðalefni

Búa til heilan favicon-pakka úr einni mynd

Eftir Converty Team

Lærðu hvernig á að búa til heilan favicon-pakka úr einni mynd með favicon.ico, PNG-stærðum, Apple touch icon, Android-táknum og site.webmanifest.

Búa til heilan favicon-pakka úr einni mynd

Favicon-vinna lítur oft út fyrir að vera smáatriði þar til hún tefur útgáfu. Merkið er til, en ekki réttar stærðir. Upprunamyndin er til, en ekki favicon.ico, Apple touch icon eða Android-tilbúin tákn. Manifest vantar eða notar gömul heiti. Þá verður lítil lokavinna að handvirkum útflutningslista.

Converty Favicon-smiðurinn tekur eina ferkantaða upprunamynd og býr til favicon-pakka með algengum vef- og app icon úttökum, þar á meðal grunn site.webmanifest.

Byrjaðu með einfaldri, ferkantaðri mynd

Besti uppruninn er skýr ferkantuð mynd með nógum jaðri. Favicon birtist mjög lítið í sumum samhengi, þannig að flókin mynd, mjó leturgerð eða merki sem nær alveg að brún getur orðið ólæsilegt.

Ef brandið virkar í einföldu formi, notaðu það. Ef upprunamyndin er of smágerð, lagaðu hana áður en þú býrð til pakkann. Favicon-smiður getur búið til stærðirnar, en hann getur ekki gert óskýrt merki að góðu litlu tákni.

Hvað inniheldur pakkinn?

Favicon-pakki þarf yfirleitt meira en eina skrá:

  • favicon.ico fyrir eldri og almenn vafrasamhengi.
  • PNG-tákn í algengum stærðum.
  • Apple touch icon fyrir iOS-yfirborð.
  • Android-tilbúin tákn fyrir uppsetjanleg vefapp.
  • Grunn site.webmanifest sem vísar í viðeigandi tákn.

Þetta er endurtekningin sem er auðvelt að gera rangt handvirkt. Að búa pakkann til í einu skrefi minnkar líkur á að útgáfan fari í loftið með gömlum eða vöntuðum browser assetum.

Hvar passar þetta í launch-vinnu?

Favicon-gerð er sjaldan meginverkefnið. Hún er lokaskref í stærri útgáfu: nýtt brand, ný vara, ný landing page eða uppfærð skjöl. Þess vegna er best að klára hana á sama tíma og önnur smá launch-verkefni, svo sem slug, Markdown og myndir.

Hvernig efnisteymi undirbúa slugga, Markdown og favicon fyrir nýja útgáfu setur favicon-vinnuna í það samhengi.

Hagnýtt ferli

  1. Undirbúðu skýra ferkantaða upprunamynd.
  2. Opnaðu Favicon-smiðinn.
  3. Hladdu upp myndinni og veldu hvort þú viljir hringlaga tákn þar sem það hentar.
  4. Sæktu ZIP-pakkann.
  5. Settu skrárnar í public/static möppu vefsins og tengdu site.webmanifest þar sem við á.

Ef þú þarft að klára önnur vefasset fyrir sömu útgáfu, notaðu WebP-breytinn fyrir myndir og Markdown-staðfestinn fyrir texta áður en þú birtir.

Favicon á að vera lokaskref, ekki seinasta óvissan

Góður favicon-pakki gerir vefinn heilsteyptari í vafraflipa, shortcuts og uppsetjanlegum yfirborðum. Opnaðu Favicon-smiðinn þegar merkið er tilbúið og láttu útflutninginn vera stuttan, endurtekningarhæfan hluta af útgáfunni.

Þér gæti líka líkað