Utilia
Mga kategorya ▾
Wika: fil ▾

Favicon Generator – ICO, PNG at Apple Touch Icon

Gumawa ng favicon.ico, PNG icon, apple-touch-icon at site.webmanifest mula sa larawan o emoji, may HTML tag na handang i-paste. ZIP download, walang upload.

Pinagmulan

Pagkasya
site.webmanifest

Paano gumawa ng favicon

  1. Sa Pinagmulan, piliin ang Larawan o Text o emoji. - Larawan: mag-drop ng PNG, JPG, WebP o SVG. Pinakamainam ang parisukat na logo na hindi bababa sa 512 × 512 px. Piliin ang Buong larawan para magkasya ito sa loob ng icon, o ang Punuin at i-crop para matakpan ang parisukat. - Text o emoji: mag-type ng letra, initials o emoji, saka piliin ang Font, Bold at Kulay ng text.
  2. Itakda ang Kulay ng background, o lagyan ng tsek ang Transparent na background. Pumili ng Hugis (Parisukat, Bilugan o Bilog) at Padding (%) para mag-iwan ng espasyo sa paligid ng laman.
  3. Kung gusto, buksan ang site.webmanifest para ilagay ang Pangalan ng app (web manifest), Maikling pangalan, Kulay ng tema at ang URL ng folder ng mga icon (iwan ang / kung nasa ugat ng iyong site ang mga file).
  4. I-click ang Gumawa ng mga favicon. Lalabas ang mga icon sa totoong laki, katabi ng huwad na tab ng browser. Pagkatapos nito, agad na nag-a-update ang mga ito sa bawat pagbabago.
  5. I-click ang I-download ang ZIP, i-upload ang mga file sa iyong site, saka Kopyahin ang mga tag at i-paste sa loob ng <head> ng iyong mga page.

Ano ang laman ng ZIP

File Laki Ginagamit ng
favicon.ico 16, 32 at 48 px Tab ng browser, bookmark, lumang browser, Windows
favicon-16x16.png 16 × 16 Tab ng browser
favicon-32x32.png 32 × 32 Tab sa mga screen na mataas ang density, shortcut sa taskbar
apple-touch-icon.png 180 × 180 Home screen ng iPhone at iPad
android-chrome-192x192.png 192 × 192 Home screen ng Android (web manifest)
android-chrome-512x512.png 512 × 512 Splash screen sa pag-install (web manifest)
site.webmanifest — Pangalan, kulay at icon ng site na puwedeng i-install
favicon-tags.html — Ang mga HTML tag, para sa sanggunian

Tatlong PNG na larawan ang laman ng ICO file, isang format na nababasa ng Windows (mula Vista) at ng bawat kasalukuyang browser. Palaging may solidong background ang apple-touch-icon, dahil itim ang ipinapakita ng iOS sa mga transparent na pixel; kapag transparent ang background, puti ang gagamitin.

Ang mga HTML tag

Ganito ang itsura ng mga nabuong tag (kasama ang URL ng iyong folder):

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Kusa ring hinihingi ng mga browser ang /favicon.ico sa ugat ng iyong domain, kaya nakakatulong na nandoon ito kahit sa mga page na walang tag.

Mga tip sa disenyo

  • Gawing simple. Sa 16 × 16 px, nawawala ang detalye. Pinakamabasa ang isang letra, matapang na simbolo o ang pinakasimpleng bersyon ng iyong logo.
  • Suriin ang preview sa totoong laki. Ang 16 px na icon sa huwad na tab ang aktuwal na nakikita ng mga bisita.
  • Isipin ang dark mode. Maaaring mawala ang madilim na logo sa transparent na background sa madidilim na tema ng browser; nakakatulong ang may kulay na background o kaunting padding.
  • Magkakaiba ang itsura ng emoji sa bawat system, dahil kanya-kanyang istilo ang pagguhit ng emoji ng bawat platform. Pinananatili ng mga PNG file ang itsura sa iyong device.

Mga madalas itanong

Anong mga laki ang kailangan ng favicon?

Sa praktika: favicon.ico na may 16, 32 at 48 px, apple-touch-icon na 180 px, at mga PNG na 192 at 512 px para sa web manifest. Ginagawa ng tool na ito ang lahat ng iyon mula sa isang pinagmulan.

Puwede bang gumamit ng SVG logo?

Oo. Iginuguhit ang mga SVG file sa mataas na resolution bago gawin ang mga icon. Ipinapakita ang SVG bilang payak na larawan, kaya hindi kailanman tumatakbo ang mga script nito.

Paano gumawa ng emoji favicon?

Piliin ang Text o emoji, i-type o i-paste ang emoji, pumili ng background o iwanang transparent, at gumawa. Tunay na PNG at ICO ang resulta, kaya gumagana ito sa bawat browser.

Bakit hindi lumalabas ang bago kong favicon?

Mahigpit na kine-cache ng mga browser ang mga favicon. Mag-reload nang nalinis ang cache, buksan ang site sa private window, o magdagdag ng bersyon sa URL, gaya ng /favicon.ico?v=2.

Ina-upload ba ang aking larawan?

Hindi. Sa iyong browser ginagawa ang mga icon, ang ZIP at ang manifest; walang umaalis sa iyong device.

Mga kaugnay na tool