ตัวสร้าง Favicon
เปลี่ยนรูปใดก็ได้ให้เป็น favicon.ico พร้อมชุดไอคอน PNG และไฟล์ manifest ครบชุด
เกี่ยวกับเครื่องมือนี้
ลากรูปเดียวลงมา — ควรเป็นโลโก้สี่เหลี่ยมจัตุรัสขนาด 512px ขึ้นไป — แล้วรับชุดฟาวิคอนครบชุด: ไฟล์ favicon.ico ที่บรรจุ 16, 32 และ 48 px สำหรับแท็บและบุ๊กมาร์ก, ไฟล์ PNG ตามขนาดมาตรฐานรวมถึงไอคอน Apple touch 180px และไอคอน PWA 192/512px, ไฟล์ site.webmanifest ตั้งต้น และแท็ก <link> ให้วางใน <head> ของคุณ ดาวน์โหลด ZIP ครั้งเดียวได้ครบ ตั้งชื่อตรงตามธรรมเนียมที่คาดหวังกัน
รายละเอียดที่บทสอนเรื่องฟาวิคอนมักทำผิดถูกจัดการไว้แล้ว: ไฟล์ ICO ฝังรายการที่บีบอัดแบบ PNG (รองรับทุกที่ตั้งแต่ Windows Vista และเล็กกว่าไอคอน BMP แบบเก่ามาก) ไอคอน Apple touch ถูกวางทับบนสีพื้นหลังที่คุณเลือก เพราะ iOS แทนความโปร่งใสด้วยสีดำ ส่วนไอคอน PWA คงช่องอัลฟาไว้ และภาพต้นฉบับที่ไม่เป็นสี่เหลี่ยมจัตุรัสจะถูกครอบตัดจากกึ่งกลางแทนที่จะถูกบีบ
การย่อโลโก้ลงเหลือ 16px เป็นการทำลายโดยธรรมชาติ — รายละเอียดเล็ก ๆ ไม่มีทางรอด แถวตัวอย่างจึงแสดงทุกขนาดที่ขนาดจริงของมัน ให้คุณตัดสินความอ่านออกได้ก่อนนำไปใช้ ทุกอย่างถูกเรนเดอร์บน canvas ในเครื่อง และคอนเทนเนอร์ ICO/ZIP ถูกประกอบทีละไบต์ภายในหน้านี้ โลโก้ของคุณจึงไม่ถูกอัปโหลดไปที่ใดเลย
คำถามที่พบบ่อย
- ในปี 2026 ต้องมีฟาวิคอนขนาดใดบ้างจริง ๆ?
- น้อยกว่าที่เรื่องเล่าปากต่อปากบอกไว้: ไฟล์ favicon.ico ที่มี 16/32/48 สำหรับระบบเก่าและแถบที่อยู่, ไฟล์ apple-touch-icon.png 180px หนึ่งไฟล์ และไฟล์ PNG 192/512px ที่อ้างถึงจาก web app manifest เบราว์เซอร์สมัยใหม่เลือกขนาดที่เหมาะที่สุดจากชุดนี้พอดี — ชุด 20 ไฟล์ที่ตัวสร้างบางตัวปล่อยออกมาเป็นเพียงความเชื่อที่ทำตาม ๆ กัน
- ทำไมโลโก้ของฉันอ่านไม่ออกที่ 16px?
- สิบหกพิกเซลเล็กอย่างโหดร้าย — โลโก้แบบตัวอักษร เส้นบาง และไล่ระดับสีละเอียดล้วนละลายหายไป ฟาวิคอนที่ดีย่อแบรนด์ให้เหลืออักขระหรือรูปทรงหนา ๆ เพียงตัวเดียวที่มีคอนทราสต์สูง หากตัวอย่าง 16px ที่นี่ดูเละ ให้ครอบตัดให้ชิดส่วนที่เป็นเอกลักษณ์ของโลโก้ หรือใช้เวอร์ชันที่ลดทอนรายละเอียดสำหรับขนาดเล็ก
- ยังต้องมีไฟล์ .ico อยู่ไหม หรือฟาวิคอน PNG พอแล้ว?
- เบราว์เซอร์สมัยใหม่ทุกตัวรับฟาวิคอน PNG ได้ แต่ /favicon.ico ยังคงเป็นเส้นทางที่ user agent, ตัวเก็บข้อมูลเว็บ และเครื่องมือรุ่นเก่าเรียกหาแบบอัตโนมัติ การให้ไฟล์ ICO จริงที่ตำแหน่งนั้นใช้เนื้อที่ไม่กี่กิโลไบต์และตัดปัญหา 404 กับพฤติกรรมสำรองแปลก ๆ ไปทั้งกลุ่ม — ควรมีไว้ควบคู่กับลิงก์ PNG ของคุณ
- ทำไมไอคอน Apple touch ต้องมีสีพื้นหลัง?
- iOS ไม่เรนเดอร์ความโปร่งใสในไอคอนบนหน้าจอโฮม — ช่องอัลฟาใด ๆ ใน PNG ของคุณจะถูกวางทับบนสีดำ การวางทับบนสีที่คุณเลือกไว้ล่วงหน้าทำให้ผลลัพธ์เป็นไปตามตั้งใจ เลือกพื้นหลังที่เข้ากับไอคอนของคุณ และจำไว้ว่า iOS มนมุมให้เอง ดังนั้นจงส่งรูปสี่เหลี่ยมจัตุรัสที่เต็มขอบมา