Favicon Generator

Gawing favicon.ico at lahat ng laki ng icon na kailangan ng iyong site ang isang PNG, JPG o SVG, na nakaimbak sa isang ZIP.

Imaheng hindi parisukat

Nananatiling nakikita ang buong imahe, nakasentro na may padding sa paligid nito.

Background

Ang transparent ay angkop sa mga browser tab; para sa mga icon sa home-screen ng iPhone, mas ligtas ang may kulay na background.

Ang iyong icon pack

Lalabas po rito ang iyong favicon at icon pack.

Handa na po. Magdagdag ng PNG, JPG o SVG upang magsimula.

Ang iyong imahe ay ginagawang mga icon sa loob mismo ng iyong browser. Walang ina-upload sa BroBroGo.

FAQ

Anong mga file ang kasama sa icon pack?

May favicon.ico na naglalaman ng mga bersyong 16, 32, at 48 pixel, mga PNG icon na may 16, 32, 180, 192, at 512 pixel, at isang site.webmanifest na naglilista ng malalaking icon. Kung magsisimula po sa isang SVG, kasama rin ang mismong vector. Isang ZIP ang naglalaman ng lahat.

Anong laki po dapat ang aking source image?

Mainam po ang SVG — ang bawat icon ay iginuguhit mula sa vector, kaya kahit 16 pixel ay nananatiling matalas. Para sa PNG o JPG, magsimula po sa hindi bababa sa 512 × 512; ang mas maliliit na imahe ay pinalalaki at maaaring magmukhang malabo.

Dapat po bang transparent o may kulay ang background?

Maayos naman po tingnan ang mga icon ng tab kapag transparent. Gayunpaman, ginagawang itim ng mga home screen ng iPhone at iPad ang mga transparent na bahagi — kung may posibilidad na idagdag ng mga tao ang iyong site sa kanilang home screen, pumili po ng kulay ng background.

Ano po ang mangyayari sa imahe na hindi parisukat?

Parisukat po ang mga icon, ngunit hindi kailanman uunatin ang iyong imahe. Bilang default, nakasentro ito na may padding sa paligid; lumipat po sa "Punuin (i-crop)" upang gupitin na lamang ang mga lumalampas na gilid.

Saan po inilalagay ang mga file sa aking site?

I-upload po ang mga ito sa root folder ng iyong site, upang ang favicon.ico ay ma-access bilang /favicon.ico, pagkatapos ay i-paste ang mga nabuong linya sa <head> ng iyong mga pahina. Awtomatikong pipiliin ng mga browser ang tamang laki.

Isinulat at sinuri ng editorial team ng BroBroGo.Huling na-update:

Ang pagbuo ng mga favicon at site icon ay isang mahalagang bahagi ng pagkakakilanlan at branding ng isang website sa internet. Ang mga icon na ito ay lumilitaw sa mga browser tab, bookmark list, kasaysayan ng pag-browse, at maging sa mga home screen ng mga mobile device. Ang Favicon Generator ay isang tool na idinisenyo upang gawing isang kumpletong pakete ng mga icon ang isang solong imahe.

Sa pamamagitan ng tool na ito, ang isang PNG, JPG, o SVG na imahe ay maaaring i-convert upang maging angkop sa iba't ibang platform tulad ng mga desktop browser, Apple iOS devices, at mga Progressive Web App (PWA). Ang buong proseso ng pag-convert ay direktang nagaganap sa loob mismo ng iyong browser, at walang anumang inia-upload sa BroBroGo.

Mga Uri ng Icon at ang Kanilang mga Sukat

Ang bawat device at browser ay may kani-kaniyang kinakailangang sukat ng icon upang matiyak na malinaw ang hitsura nito sa screen. Ang tool na ito ay awtomatikong naglalabas ng mga sumusunod na file sa loob ng isang ZIP archive:

  • favicon.ico: Ang klasikong format na ito ay naglalaman ng tatlong magkakaibang resolusyon sa loob ng isang file: 16, 32, at 48 pixel. Ito ang pangunahing ginagamit ng mga tradisyonal na browser tab.
  • Mga PNG Icon: Ang mga file na ito ay ginagawa sa mga sukat na 16, 32, 180, 192, at 512 pixel. Ang 16 at 32 pixel ay para sa mga tab icon, ang 180 pixel ay para sa Apple touch icon (iPhone at iPad), at ang 192 at 512 pixel ay para sa Android at mga naka-install na web app.
  • Vector (SVG): Kung ang iyong pinagmulang file ay isang SVG, isasama ang mismong vector file sa pakete upang matiyak ang talas ng icon sa anumang laki.
  • site.webmanifest: Isang maliit na text file na naglilista ng malalaking icon upang malaman ng mga katutubong device at PWA kung paano at saan kukunin ang mga tamang sukat ng icon.

Pagpili ng Pinakamahusay na Source Image

Upang makuha ang pinakamataas na kalidad ng mga icon, mahalagang sundin ang mga rekomendasyon para sa pinagmulang imahe:

  1. Format ng File: Ang tool ay sumusuporta lamang sa mga format na PNG, JPG, at SVG. Kung hindi suportado ang file, ipapakita nito ang error na "Mga imaheng PNG, JPG at SVG lamang po ang sinusuportahan.".
  2. Sukat at Resolusyon: Para sa mga raster image tulad ng PNG o JPG, inirerekomenda ang sukat na hindi bababa sa 512 × 512 pixel. Kung mas maliit ang gagamitin, ipapakita ng tool ang babalang "Maliit na source ({w} × {h} px): maaaring magmukhang malabo ang malalaking icon. Ang 512 × 512 o mas malaki — o isang SVG — ang nagbibigay ng pinakamahusay na resulta.". Ang mga maliliit na imahe ay kailangang i-upscale kaya maaaring maging malabo ang kinalabasan nito.
  3. Limitasyon sa Laki ng File: Ang pinakamalaking sukat ng file na maaaring iproseso ay 50 MB. Kapag lumampas dito, lalabas ang error na "Ang file na ito ay lampas sa 50 MB. Pakisuyong gumamit ng mas maliit na source image.".

Pag-aayos ng mga Imaheng Hindi Parisukat at Pagpili ng Background

Ang lahat ng nabubuong icon ay palaging nasa anyong parisukat. Kung ang iyong orihinal na imahe ay hindi parisukat, may dalawang opsyon ang tool upang iakma ito:

  • Ikasya (pad): Ito ang default na setting kung saan ang buong imahe ay nananatiling nakikita at nakasentro, habang nilalagyan ng padding o espasyo ang paligid nito upang mabuo ang parisukat.
  • Punuin (i-crop): Pinupuno ng imahe ang buong parisukat na espasyo, at ang mga lumalampas na gilid ay pinuputol o tinatabas.

Tungkol naman sa background, ang default na setting ay transparent. Ang transparent na background ay angkop para sa mga browser tab. Gayunpaman, ang mga home screen ng iPhone at iPad ay awtomatikong ginagawang itim ang mga transparent na bahagi ng icon. Kung nais mong maging ligtas para sa mga iOS device, maaari kang pumili ng partikular na kulay ng background sa pamamagitan ng color selector ng tool.

Paano I-install at Ipatupad ang mga Icon sa Iyong Website

Matapos ma-generate ang mga icon, sundin ang mga hakbang na ito upang mailagay ang mga ito sa iyong website:

  1. I-download ang nabuong ZIP file sa pamamagitan ng pag-click sa "I-download ang ZIP".
  2. I-extract ang nilalaman ng ZIP file at i-upload ang lahat ng mga file sa root folder ng iyong website (halimbawa, /favicon.ico at /site.webmanifest).
  3. Kopyahin ang HTML code snippet na ibinigay ng tool sa ilalim ng "Idagdag sa iyong <head>".
  4. I-paste ang code na ito sa loob ng <head> na bahagi ng bawat HTML page ng iyong website.

Awtomatikong babasahin ng mga browser at device ang mga linyang ito upang piliin ang tamang sukat ng icon na angkop sa kanila.

Image ResizerBaguhin ang laki ng mga imahe sa pamamagitan ng mga pixel, porsyento o mga nakahandang preset — isang imahe o buong batch.Image CropperI-crop, i-rotate at i-flip ang imahe sa anumang hugis — malayang parihaba, naka-lock na ratio, o malinis na bilog.Pampaliit ng LarawanPaliitin ang mga JPEG, PNG at WebP sa iyong browser, nang hindi binabago ang laki ng pixel.Image WatermarkMag-stamp ng teksto o logo na watermark sa isang larawan o sa buong batch.Image Format ConverterMag-convert ng mga imaheng JPG, PNG, WebP, HEIC, at AVIF sa iyong browser.Base64 Image ConverterI-drag ang larawan dito para makuha ang Base64 data URI nito, o mag-paste ng Base64 para i-preview at i-download ang larawan.AI Alt Text GeneratorGawing malinaw at SEO-friendly na alt text ang anumang imahe — i-edit ang mga salita, pagkatapos ay kopyahin ito.Color ConverterMag-convert ng mga kulay sa pagitan ng HEX, RGB, HSL, HSV, CMYK, at LAB — i-edit ang kahit anong field at ang iba ay mag-a-update habang nagpapatuloy ka.