Ang tamang favicon set ay higit pa sa isang file: gusto ng mga browser ng multi-size na .ico, gusto ng iOS ng 180px na apple-touch-icon, gusto ng Android ng 192 at 512px na PNG plus web manifest. Ini-render ng tool na ito silang lahat mula sa isang larawan at ini-pack sa isang ZIP, kasama ang eksaktong HTML tag na ipe-paste sa iyong <head>.
Ipinapakita ng preview ang iyong icon sa totoong 16, 32 at 48px para masuri mong nananatili itong nakikilala sa maliliit na sukat bago mo ipadala.
Paano gamitin
- Idagdag ang iyong logoAng mga parisukat na larawan ay pinakamahusay; ang iba ay iniko-crop mula sa gitna.
- Suriin ang maliliit na sukatAng 16px na preview ang talagang makikita ng karamihan sa isang tab.
- I-download ang ZIPfavicon.ico, anim na PNG, site.webmanifest at html-snippet.txt na handang i-paste.
Isang image pasok, buong favicon set labas
Ihulog ang iisang logo o icon at bumubuo ang generator na ito ng kumpletong set na kailangan ng modernong site: isang multi-size na favicon.ico na nagbabalot ng 16, 32, at 48 pixel na bersyon, standalone na PNG sa 16, 32, 48, 180 para sa Apple touch icon, at 192 at 512 para sa Android at PWA install, kasama ang isang site.webmanifest. Bumababa lahat bilang isang ZIP para mailagay mo ito diretso sa root ng iyong proyekto.
Nakukuha mo rin ang ready-to-paste na HTML head snippet na may tamang link at meta tag na naka-wire na. Kopyahin ito sa iyong template, i-upload ang mga file, at lalabas ang favicon sa mga browser tab, bookmark, at home-screen shortcut nang hindi ka sumusulat ng markup nang mano-mano.
Matatalim na icon sa bawat laki
Napakaliit ng mga favicon, kaya nagre-render ang generator ng true-size na preview sa 16, 32, at 48 pixel, eksakto kung paano ipapakita ng browser tab. Iyon ang nagpapahintulot sa iyong mahuli ang logong nagiging luta sa 16px bago mo ito i-ship. Kung hindi square ang iyong source image, isinesentro-crop ito ng tool para manatiling balanse ang icon sa halip na maipit.
Tumatakbo ang buong proseso sa browser mula sa iyong orihinal na image, ibig sabihin makakagawa ka ng favicon PNG at ICO mula sa high-resolution na logo nang walang upload o account.
Para saan ito ginagamit ng mga tao
Paglunsad ng bagong site — Bumuo ng favicon.ico at bawat PNG na laki sa isang pass para mukhang tapos ang mga tab at bookmark mula sa unang araw.
Pagdaragdag ng PWA install icon — I-export ang 192 at 512 na PNG kasama ang site.webmanifest para mag-install ang iyong app na may tamang home-screen icon.
Apple touch icon — Gumawa ng 180x180 na apple-touch-icon para magpakita ng matalim na tile ang mga iOS bookmark at home screen.
Rebranding ng umiiral na site — Palitan ang isang bagong logo sa generator at palitan ang buong icon set nang sabay.
Client handoff — Ibigay ang isang ZIP ng ico, PNG, manifest, at head snippet para ilagay lang ito ng developer.
Pagsusuri ng legibility sa maliit na laki — Gamitin ang true-size na 16px preview para tiyakin na nababasa pa rin bilang icon ang detalyadong logo.
Hindi square na logo — Ilagay ang malapad na wordmark at hayaan ang center-crop na gawin itong balanseng square na favicon.
Static site o framework project — Kopyahin ang na-generate na head tag sa iyong Next, Astro, o plain na HTML template at i-ship.
Gumawa ng buong favicon set mula sa isang larawan — sa browser, sa isang dagok
Ang favicon ay mukhang isang 16×16 pixel na isipin-na-lang, at sa loob ng maraming taon ganoon nga ito. Tahimik itong ginawang maliit na produksyon ng mga modernong browser at platform. Para gawin ito nang tama ngayon, kailangan mo ng favicon.ico, isang hanay ng PNG mula 16px hanggang 512px, isang Apple touch icon para sa iOS home screens, isang site.webmanifest para ma-install ang site bilang app, at ang tamang block ng <link> at <meta> tag sa HTML <head> mo. Palampasin ang isang laki at malabo ang tab icon mo sa retina screen; palampasin ang manifest at babalik ang "add to home screen" icon sa screenshot; magkamali sa tag block at babalewalain ng ilang platform ang buong bagay.
Marami iyong nakakainis na output para sa gawaing ginagawa mo isang beses kada proyekto tapos nakakalimutan mo na ang detalye. Kinukuha ng IMG.DIY ang isang source image at ginagawa ang buong set — ang .ico, bawat PNG size, ang web manifest, at isang copy-paste na HTML snippet — na nire-resize nang buo sa browser mo sa Canvas. Binabasa nang lokal ang logo mo at rine-render sa bawat target size sa device; walang ina-upload. Para sa brand mark o logo ng hindi pa nailalabas na produkto na mas gugustuhin mong hindi i-post sa third-party na server bago i-launch, sulit ang lokal na garantiyang iyon, at wala itong halaga.
Dahil tumatakbo sa client-side ang buong pipeline, gumagana rin ito offline kapag naka-cache na ang PWA, kaya maaari kang mag-regenerate ng icon sa naka-lock na work machine o walang koneksyon. Libre, walang account, walang watermark na naka-bake sa mga icon mo.
Ano ang pinagkaiba nito
- Ang buong set, hindi lang .ico. ICO, PNG mula 16 hanggang 512, Apple touch icon, at
site.webmanifestsa isang download. - Kasama ang copy-paste na HTML. Ang eksaktong
<link>/<meta>block na ilalagay sa<head>mo, para tunay na marehistro ang icon sa buong browser. - Walang ina-upload. Nire-resize nang lokal ang logo mo — kapaki-pakinabang kapag kumpidensyal o pre-launch ang marka.
- Isang dagok, walang wizard. Magbigay ng isang larawan, kumuha ng lahat; walang multi-step na daloy na humihingi ng platform choices na kailangan mo pang saliksikin.
- Offline at malinis. Naka-cache na PWA, walang sign-up, walang watermark sa anumang nabuong icon.
IMG.DIY kumpara sa ibang favicon generator
| Aspeto | favicon.io | realfavicongenerator.net | Manwal (design app + code) | IMG.DIY |
|---|---|---|---|---|
| Ina-upload ang file | Oo, sa server nila | Oo, sa server nila | Hindi, lokal | Hindi, nananatili sa browser |
| Buong set (.ico + PNG + manifest) | Oo | Oo, napakadetalyado | Ikaw ang bubuo | Oo |
| Ibinibigay ang HTML snippet | Oo | Oo, detalyado | Ikaw ang susulat | Oo |
| Hakbang hanggang resulta | Kaunti | Mas marami (maraming opsyon) | Marami | Isang dagok |
| Gumagana offline | Hindi | Hindi | Oo | Oo, pagkatapos ng unang bisita |
| Presyo | Libre | Libreng tier; may bayad na opsyon | Halaga ng app + oras mo | Libre |
| Kailangan ng account | Hindi | Hindi | Hindi | Hindi |
Maging tapat tungkol sa kompetisyon: napakahusay ng realfavicongenerator at tunay na mas masusi — nagpe-preview ito ng icon mo sa tunay na platform, hinahawakan ang edge case tulad ng Safari pinned-tab mask at theming, at pinapayagan kang i-tune ang itsura kada platform. Kung gusto mo ang antas na iyon ng kontrol at hindi mo problema ang pag-upload ng larawan mo, magandang pagpipilian ito. Mabilis at simple ang favicon.io at gumagawa rin ng maayos na set. Ang pagkakaiba ng IMG.DIY ay ang kombinasyon ng buong output na walang upload at isang dagok: nakukuha mo ang parehong praktikal na deliverable — ico, PNG, manifest, at ang HTML para ikabit sila — nang hindi umaalis sa browser ang logo mo at nang hindi dumadaan sa configuration wizard. Para sa "may logo ako, bigyan mo ako ng lahat ng kailangang i-paste, at huwag ipadala ang file ko kahit saan," iyon ang akma.
Bakit IMG.DIY
Kumpletong set
ICO + 16/32/48/180/192/512 PNG + manifest.
Copy-paste HTML
Ang eksaktong link tag na kasama bilang text file.
True-size preview
Tingnan ang icon sa totoong 16/32/48px muna.
Pribado
Ang iyong logo ay hindi kailanman umaalis sa browser.