ออกแบบ

สร้าง Favicon

จากภาพหรือตัวอักษรเดียว ได้ชุดไอคอนเว็บครบ (ICO+PNG)

สร้างแพ็ค favicon ที่สมบูรณ์

อัปโหลดโลโก้หรือพิมพ์ตัวอักษร/อีโมจิ เลือกรูปทรงพื้นหลังและสี และดาวน์โหลด ZIP หนึ่งไฟล์ที่มี favicon.ico, ขนาด PNG ทั้งหมด (16 → 512), Apple touch icon, site.webmanifest ที่พร้อมใช้งาน และแท็ก HTML — ทุกอย่างเรนเดอร์ในเบราว์เซอร์ของคุณ.

Favicon Generator เปลี่ยนแหล่งเดียว — โลโก้ รูปภาพ หรือเพียงตัวอักษรหนาหรืออิโมจิ — เป็นไอคอนแพ็คที่เว็บไซต์สมัยใหม่ต้องการ: favicon.ico สำหรับเบราว์เซอร์รุ่นเก่าและแถบที่อยู่, ขนาด PNG ตั้งแต่ 16 ถึง 512, ไอคอน Apple touch ขนาด 180px สำหรับหน้าจอหลัก iOS, ไอคอน Android Chrome, site.webmanifest ที่พร้อมใช้งาน, และแท็ก HTML ที่แน่นอนสำหรับวางใน <head> คลิกเดียว ไฟล์ ZIP เดียว เสร็จ

ตัวอย่างสดแสดงไอคอนของคุณในขนาดจริง — รวมถึงแท็บเบราว์เซอร์จำลอง — เพราะความจริงอันโหดร้ายของ favicons คือต้องอยู่รอดที่ขนาด 16×16 พิกเซล โหมดตัวอักษรมีอยู่ด้วยเหตุนี้: ตัวอักษรเริ่มต้นตัวหนาบนสี่เหลี่ยมสีโค้งมนเป็นสิ่งที่อ่านง่ายที่สุดที่คุณสามารถใส่ในแท็บ ทุกอย่างถูกเรนเดอร์และบีบอัดในเบราว์เซอร์ของคุณ; งานศิลป์ของคุณไม่เคยออกจากอุปกรณ์ของคุณ.

คำถามที่พบบ่อย

เว็บไซต์ในปี 2026 จริงๆ แล้วต้องใช้ไฟล์อะไรบ้าง?

ไฟล์ favicon.ico (16/32/48 ในไฟล์เดียว), favicon PNG ขนาด 16/32/48, apple-touch-icon.png ขนาด 180px, ไอคอน Android Chrome ขนาด 192 และ 512, และ site.webmanifest ที่อ้างอิงไฟล์เหล่านั้น ซึ่งเป็นสิ่งที่อยู่ใน ZIP พร้อมกับแท็ก HTML

ควรวางไฟล์ไว้ที่ไหน?

อัปโหลดทุกอย่างไปยังรากของเว็บไซต์ของคุณ (เพื่อให้ /favicon.ico แก้ไขได้) จากนั้นวางแท็กที่ให้ไว้ใน <head> ของหน้าเพจของคุณ ไฟล์ html-snippet.txt ใน ZIP มีแท็กพร้อมแล้ว.

ทำไมโลโก้สวยๆ ของฉันถึงดูเป็นจุดรบกวนที่ขนาด 16px?

รายละเอียดไม่คงอยู่เมื่อพื้นที่ทั้งหมด 256 พิกเซล เพิ่มพื้นที่ว่าง หรือเปลี่ยนเป็นโหมดตัวอักษร — ตัวอักษรหนาเดี่ยวบนพื้นหลังทึบยังคงอ่านได้ในที่ที่โลโก้เต็มรูปแบบไม่สามารถ

ไฟล์ ICO คืออะไร และทำไมถึงมีสามขนาด?

ICO เป็นรูปแบบคอนเทนเนอร์: เบราว์เซอร์เลือกขนาดที่เหมาะสมที่สุดจากภายใน (16 สำหรับแท็บ, 32 สำหรับทาสก์บาร์, 48 สำหรับทางลัด) ตัวสร้างจะฝังทั้งสามขนาดเป็นภาพสีเต็มรูปแบบพร้อมความโปร่งใส

พื้นหลังโปร่งใสยังคงอยู่หรือไม่?

ใช่ — เลือกรูปทรง 'โปร่งใส' เพื่อคงช่องอัลฟาของต้นฉบับในทุก PNG และ ICO พื้นหลังที่มีรูปทรง (สี่เหลี่ยม/มน/วงกลม) มีไว้สำหรับต้นฉบับที่ต้องการพื้นหลังทึบ

Apple touch icon ใช้ทำอะไร?

เมื่อมีคนเพิ่มเว็บไซต์ของคุณที่หน้าจอโฮมของ iOS รูปภาพขนาด 180×180 นั้นจะกลายเป็นไอคอนแอป iOS จะปัดมุมให้เอง ดังนั้นดีไซน์สี่เหลี่ยมเต็มพื้นที่จึงเหมาะสมที่สุด

ฉันสามารถใช้อีโมจิเป็น favicon ของฉันได้หรือไม่?

ใช่ — สลับไปที่โหมดตัวอักษรและพิมพ์อีโมจิใดๆ ก็ได้ มันจะแสดงด้วยฟอนต์อีโมจิของระบบบนรูปทรงและสีที่คุณเลือก เป็นตัวเลือกที่ถูกต้องและน่าจดจำสำหรับเว็บไซต์ส่วนตัว

โลโก้ของฉันถูกอัปโหลดหรือไม่?

ไม่ การเรนเดอร์ การเข้ารหัส ICO และการบีบอัด ZIP ทั้งหมดเกิดขึ้นภายในเบราว์เซอร์ของคุณ — เครื่องมือทำงานแบบออฟไลน์เมื่อโหลดเสร็จแล้ว