May logo ka na. Ang kailangan mo ay ang logong iyon na ginawang tumpok ng maliliit na icon file na inaasahan ng browser — isang favicon.ico, ilang PNG sa partikular na sukat, web manifest, at ang HTML para pagdikitin ang lahat. Mekanikal ang conversion na iyon, at kaya mo itong gawin sa mga isang minuto nang walang ini-install.
Ang hadlang ay hindi bawat logo ay maganda pumapaliit. Kaya sasakupin nito ang parehong mabilis na daan at kung paano ayusin ang logong nagiging maputik sa 16 pixels.
Ang maikling bersyon
- Kunin ang iyong logo bilang parisukat na imahe — mas mainam ang 512×512 o mas malaki, sa transparent o solidong background.
- I-drop ito sa Favicon Generator.
- I-download ang nabuong set at i-drop ang mga file sa root ng iyong site.
- I-paste ang ibinigay na HTML snippet sa iyong
<head>.
Iyon ang buong trabaho. Naglalabas ang generator ng favicon.ico, mga PNG sa 16, 32, 48, 180, 192, at 512, isang webmanifest, at ang eksaktong <link> na tag — kaya hindi ka mano-manong nagko-crop ng anim na imahe o naghuhula sa manifest syntax.
Ihanda muna ang iyong logo — dito napapanalunan o natatalo ang kalidad
Ang favicon ay naninirahan sa 16×16 sa browser tab. Kahit anong detalyeng hindi makakaligtas sa laking iyon ay sayang. Gumugol ng dalawang minuto dito at magmumukhang malinaw ang resulta kahit saan.
Gawin itong parisukat. Parisukat ang favicon. Ang malapad, horizontal na logo ay ma-le-letterbox o madidiin. I-crop sa pinaka-nakikilalang elemento — kadalasan ang marka o iisang inisyal — at isentro ito sa parisukat na frame.
Alisin ang wordmark. Hindi mababasa ang buong pangalan ng iyong kompanya sa laki ng tab. Ang "Acme Corporation" ay nagiging kulay-abong mantsa. Panatilihin ang simbolo, o isang letra, at hayaang dalhin ng title ng tab ang pangalan.
Tsekan ang contrast laban sa parehong tema. Ang mga browser tab ay may light at dark. Ang dark-navy na icon ay nawawala sa madilim na tab; ang maputlang icon ay nawawala sa maliwanag. Kung ang iyong marka ay isang patag na kulay, siguraduhing nababasa ang kulay na iyon sa dalawa. Ang banayad na outline o maliit na solidong background chip ay makakatulong.
Mag-iwan ng espasyong makahinga. Magdagdag ng kaunting padding sa loob ng parisukat para hindi nadidiin ang icon sa mga gilid. Magmumukhang mas balanse ito sa bawat slot.
Magsimula sa malaki. Ang 512×512 (o mas malaki) na source ay nagbibigay sa generator ng malinis na detalyeng papaliitin. Ang pagpapalaki ng maliit na logo muna ay nagluluto lang ng blur.
Transparent o solidong background?
Parehong gumagana — depende ito sa itsurang gusto mo.
- Transparent ay pinapayagan ang background ng tab o home-screen na sumilip. Malinis at makabago, at umaangkop ito sa light/dark na kapaligiran. Pinakamainam kapag natatanging hugis ang iyong marka.
- Solidong background chip (may-kulay na bilog na parisukat sa likod ng marka) ay ginagarantiya na nababasa ang icon anuman ang nasa likod. Ito ang ginagawa ng karamihan ng app icon, at ito ang mas ligtas na pili kung ang iyong logo ay manipis o mababa ang contrast.
Kung nagdadalawang-isip, ang solidong chip sa iyong brand color ang matibay na opsyon — hindi ito kailanman nawawala sa tugmang background.
Pagkatapos mong mag-download: saan napupunta ang mga file
Binibigyan ka ng generator ng set ng file at snippet. Dalawang panuntunan sa paglalagay ang sumasaklaw dito:
favicon.iconapupunta sa root ng iyong site (/favicon.ico). Hinahanap ito ng mga browser at Windows doon ayon sa pangalan kahit walang<link>na tag.- Lahat ng iba ay maaaring manirahan saan mo gusto hangga't tumutugma ang mga path sa HTML snippet. Karamihan ng tao ay idi-drop lahat sa root at idi-paste ang snippet nang buo.
Tapos ang <head> snippet na lang — icon links, ang apple-touch-icon, at ang manifest reference. I-paste, i-deploy, hard-refresh, at dapat makita mo na ang iyong logo sa tab.
Bakit gawin ito sa browser?
Dahil hindi kailanman umaalis sa iyong makina ang iyong logo. Ang buong proseso — pagbasa ng imahe, pag-resize sa bawat sukat, pag-pack ng .ico, pagsulat ng manifest — ay nangyayari nang lokal sa iyong browser gamit ang Canvas. Walang ina-upload sa server, walang sign-up o watermark, at pagkatapos ng iyong unang pagbisita, gumagana ang tool offline. Para sa brand asset na baka hindi mo pa nailathala, ang pagpapanatili nito sa labas ng third-party na server ay ang makabuluhang default.
Kapag parisukat, high-contrast, at nababasa nang maliit ang iyong logo, ang paggawa ng buong set ang madaling bahagi.