Favicon generator para sa website

Lahat ng icon na kailangan ng iyong website, mula sa iyong logo at handang i-upload.

Iba pang tool: JPEG to JPG I-compress ang JPG I-compress ang PNG I-compress ang WebP I-resize ang larawan I-crop ang larawan Pagsamahin ang mga larawan Pagsamahin ang PDF I-compress ang PDF Hatiin ang PDF I-extract ang mga larawan sa PDF I-rotate ang PDF

Piliin ang iyong PNG, JPG, WebP o SVG na larawan

Isang file lang, hanggang 20 MB.

Pagkasya sa parisukat

Ipagkasya Buong larawan Punuin I-crop ang mga gilid

Parisukat ang mga icon. Kung hindi parisukat ang larawan mo, piliin kung ipapakita ito nang buo (may transparent na margin) o pupunuin nito ang parisukat.

Kulay ng background

Para sa Apple icon, na hindi puwedeng transparent, at bilang theme color sa Android.

Awtomatikong binubura ang iyong mga file pagkatapos ng conversion, at hindi lalampas sa isang oras matapos i-upload. Paano namin pinangangalagaan ang iyong mga file

Gumawa ng kumpletong favicon para sa iyong website mula sa iyong logo: ang icon sa tab ng browser, ang mga icon sa home screen ng iPhone at Android, ang manifest at ang HTML code na nagli-link sa mga ito. Mag-upload ng PNG, JPG, WebP o SVG at i-download ang ZIP na naglalaman ng lahat, walang account at walang watermark.

Paano gumawa ng favicon

Piliin ang iyong logo o icon sa PNG, JPG, WebP o SVG; mas mainam kung parisukat at hindi bababa sa 512 pixel.
Piliin kung ipapakita nang buo ang larawan o pupunuin ang parisukat, at ang kulay ng background ng Apple icon.
I-click ang “Gumawa ng favicon” at i-download ang ZIP.
I-upload ang mga file sa root folder ng iyong website, at i-paste ang code ng head.html sa head tag ng iyong mga pahina.

Ang laman ng package

File	Para saan
`favicon.ico`	Ang klasikong icon ng tab, na may 16, 32 at 48 pixel sa iisang file. Hinahanap ito ng mga browser kahit hindi mo i-link.
`favicon-16x16.png` at `favicon-32x32.png`	Mga icon para sa tab at bookmark ng mga modernong browser.
`apple-touch-icon.png`	Ang 180-pixel na icon na ginagamit ng iPhone at iPad kapag idinagdag ang iyong website sa home screen.
`android-chrome-192x192.png` at `android-chrome-512x512.png`	Mga icon para sa Android at mga web app na puwedeng i-install.
`site.webmanifest`	Ang manifest na nagsasaad ng mga Android icon at kulay ng iyong website.
`head.html`	Ang mga tag na nagli-link sa mga icon mula sa iyong mga pahina.

Paano ito i-install sa iyong website

I-unzip ang file at i-upload ang lahat ng file, maliban sa head.html, sa root folder ng iyong website (kung nasaan ang home page).
Kopyahin ang mga tag na ito, na nasa head.html din, sa head tag ng iyong mga pahina:

<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Kung gusto mo, isulat ang pangalan ng iyong website sa name at short_name ng site.webmanifest.

Sine-save ng mga browser ang favicon sa cache: kung hindi mo agad makita ang bago, i-reload nang buo ang pahina o maghintay nang kaunti.

Ipagkasya o punuin

Parisukat ang lahat ng icon. Kung hindi parisukat ang larawan mo, puwede mo itong ipagkasya para lumabas nang buo na may transparent na margin, o hayaan itong punuin ang parisukat at putulin ang sobra sa gilid. Para sa pahigang logo na may text, kadalasang mas maganda kung ang simbolo lang ng logo ang gamitin, na naka-crop nang parisukat.

Hindi puwedeng transparent ang Apple icon: pupunuin ng iOS ng itim ang background. Kaya ginagawa namin ito gamit ang kulay ng background na pipiliin mo, na ginagamit din bilang kulay ng iyong website sa Android. Napapanatili ng ibang icon ang transparency.

Payo para sa magandang resulta

Magsimula sa malaking larawan, hindi bababa sa 512 × 512 pixel, o mas mabuti pa, SVG: mula rito kinukuwenta ang maliliit na icon.
Panatilihing simple: sa 16 pixel, hindi mababasa ang text o makikita ang pinong detalye. Mas maganda ang simbolo o inisyal na magkakaiba ang kulay.

Kung .ico file lang ang kailangan mo, puwede mong i-convert ang iyong PNG sa ICO.

Mga limitasyon

Isang larawan lang nang sabay, hanggang 20 MB at 100 megapixel.
Hindi namin binabago ang iyong website: ikaw ang mag-a-upload ng mga file at magdadagdag ng mga tag, o ipagawa ito sa namamahala nito.

Mga madalas itanong

Gaano kalaki dapat ang larawan para gumawa ng favicon?

Kapag mas malaki, mas mabuti: hindi bababa sa 512 × 512 pixel, o SVG. Mula rito kinukuwenta ang lahat ng icon, mula 512 hanggang 16 pixel.

Saan ko ia-upload ang mga favicon file?

Sa root folder ng iyong website, ang parehong folder ng home page. Pagkatapos, i-paste ang mga tag ng head.html sa head tag ng iyong mga pahina.

Bakit hindi ko makita ang bagong favicon sa aking browser?

Dahil sine-save ng mga browser ang favicon sa cache. I-reload nang buo ang pahina, buksan ito sa private window, o maghintay nang kaunti hanggang mag-update.

Bakit may kulay ang background ng Apple icon?

Dahil hindi sinusuportahan ng iOS ang transparency sa mga icon ng home screen at pupunuin nito ng itim ang background. Ginagawa namin ito gamit ang kulay ng background na pipiliin mo para maganda ang hitsura.

Puwede ko bang gawin ang favicon ng aking website sa WordPress?

May sariling opsyon ang WordPress, ang “Site Icon” (sa Appearance › Customize › Site Identity o, depende sa bersyon at theme, sa general settings): mag-upload ka ng parisukat na larawan at awtomatikong gagawin ang mga laki. Para sa mga website kung saan nakakapag-upload ka ng file at nakakapag-edit ng code ang package ng tool na ito.