Paano gumawa ng favicon.

Buksan ang Favicon / ICO Generator at piliin ang Image. Mag-upload ng PNG, JPG, JPEG, WebP o GIF, o piliin ang Try a sample. Ang halimbawang ginamit ay favicon-orbit.png, isang 512 × 512 pixel na violet orbit mark na may mga transparent na sulok. Ang input ay 202,491 bytes.

Para sa isang brand na walang tapos na logo, piliin ang Text sa pahina ng tool. Maglagay ng isa o dalawang titik at piliin ang Continue. Nag-aalok ang editor ng Modern sans, Classic serif, at Monospace na mga font, kasama ang magkahiwalay na kulay ng teksto at background. Hanggang tatlong karakter ang tinatanggap, ngunit ang mga sobrang karakter ay maaaring maging mahirap kilalanin sa maliliit na laki.

Panatilihin ang orihinal na artwork. Ang generator ay lumilikha ng mga bagong icon file at hindi ino-overwrite ang source. Ang GIF input ay nagiging isang still icon sa halip na isang animated na favicon.

Para sa isang monogram, ang Font menu ay nagsisimula sa tatlong kasamang istilo. Piliin ang Use system fonts sa isang suportadong desktop browser at payagan ang access para idagdag ang mga font na naka-install sa iyong device. Gamitin ang mga nakaraang chevron at susunod na chevron para ihambing ang mga katabing font, o pumili ng pamilya at suriin ang live preview, lalo na sa 16 pixels. Ang mga font ay nananatili sa iyong device; ang mga kasamang istilo ay gumagana nang walang pahintulot.

Ipinapakita ng editor ang mga light at dark na tab ng browser kasama ang mga preview sa mga karaniwang laki ng icon. Suriin muna ang 16-pixel na halimbawa; ito ang pinakamahigpit na pagsubok kung mananatiling makikilala ang marka. Ang Apple Touch preview ay kumakatawan sa isang 180-pixel na export at ipinapakita nang mas maliit sa workspace.

Sa isang telepono, buksan ang Settings. Iwanan ang Create from na nakatakda sa Uploaded image at ang Image fit na nakatakda sa Show the whole image. Para sa sample na ito, itakda ang Space around content sa 0 at i-enable ang Transparent background. Ang source ay naglalaman na ng sarili nitong bilog na violet na hugis at malinaw na mga margin, kaya hindi na nito kailangan ng karagdagang may kulay na background.

Sa ibang source, pinapanatili ng Show the whole image ang mga gilid nito, habang ang Fill the icon ay maaaring mag-crop sa mga ito. Ang Rounded square, Square, at Circle ay tumutukoy sa panlabas na hugis. Pinapanatili ng Transparent background ang mga malinaw na bahagi ngunit hindi nito maalis ang isang opaque na background na iginuhit na sa isang litrato. Suriin ang pinakamaliit na preview pagkatapos ng bawat pagbabago sa framing.

Sa ilalim ng Download, piliin ang Website icon package (ZIP) para sa halimbawang ito. Iwanan ang Website name bilang My website para sa sample, o palitan ito ng tunay na pangalan ng brand para sa sarili mong proyekto. Ang pangalang ito ay ginagamit sa site.webmanifest; hindi ito idinaragdag bilang teksto sa ibabaw ng imahe.

Piliin ang Start. Ang browser ay bubuo ng pitong-frame na favicon.ico na may mga square na imahe sa 16, 24, 32, 48, 64, 128 at 256 pixels. Lilikha rin ito ng PNG na mga icon sa 16, 32, 48, 180, 192 at 512 pixels, isang manifest at mga tagubilin sa pag-install. Ang resulta ay isang ZIP sa halip na hiwalay na download button para sa bawat icon.

Kung kailangan mo lang ng klasikong favicon.ico, piliin ang Multi-size ICO sa halip. Kapaki-pakinabang ito kapag ang isang website platform ay tumatanggap ng ICO na upload at hindi nangangailangan ng hiwalay na package.

Ang Download ay nagse-save ng website-icons.zip. Ang aktwal na halimbawa ay naglalaman ng siyam na file at may sukat na 304,351 bytes. Ipinapakita ng paghahambing sa itaas ang 512-pixel na source sa tabi ng tunay na 256-pixel na frame na kinuha mula sa na-export na ICO, sa halip na isang simulated na screenshot ng browser.

I-extract ang ZIP, i-upload ang mga icon file sa root ng iyong website at basahin ang INSTALL.txt. Kasama nito ang HTML link tags para sa ICO, PNG icon, Apple Touch icon at web manifest. Kung ilalagay mo ang mga file sa isang subfolder, i-update ang parehong HTML paths at ang mga icon path sa loob ng site.webmanifest.

Suriin ang iyong site sa isang bagong tab ng browser at sa mga device na mahalaga sa iyo. Maaaring mag-cache ng mga favicon ang mga browser, kaya ang lumang icon ay hindi agad patunay na nabigo ang pag-install. Panatilihin ang source image at na-download na package bago i-refresh ang editor, dahil ang pag-refresh ay babalik sa pangunahing pahina ng tool.