ตัวสร้าง favicon
เบราว์เซอร์คาดหวังไอคอนหลายขนาด: favicon.ico 16×16 คลาสสิก ไอคอนแท็บ 32×32 apple-touch-icon 180×180 และไอคอน PWA 192×192 อัปโหลดโลโก้สี่เหลี่ยมแล้วดาวน์โหลดชุดครบ — สร้างในเครื่องโดยไม่ส่งแอสเซ็ตแบรนด์ไปเซิร์ฟเวอร์
วิธีสร้าง favicon
1. อัปโหลด PNG หรือ JPG สี่เหลี่ยม (แนะนำ 512×512 หรือใหญ่กว่า)
2. พรีวิวขนาดที่สร้าง
3. ดาวน์โหลดแพ็กไอคอนหรือไฟล์เดี่ยว
4. เพิ่มแท็ก link ใน head ของ HTML และวางไฟล์ใน /public หรือรากไซต์
ตัวอย่างการตั้ง favicon
ไซต์สแตติกใหม่
สร้าง favicon.ico บวก PNG 32×32 และเพิ่มแท็ก link rel="icon" มาตรฐานใน layout.html
แมนิเฟสต์ PWA
ส่งออก PNG 192×192 และ 512×512 สำหรับอาร์เรย์ icons ใน manifest.json
สลับรีแบรนด์
แทนที่โลโก้มาสเตอร์หนึ่งแล้วสร้างทุกขนาดใหม่เพื่อให้แท็บและทางลัดหน้าจอหลักตรงกัน
เมื่อไหร่ควรใช้ตัวสร้าง favicon
• เมื่อเปิดไซต์และต้องการขนาดไอคอนมาตรฐานทั้งหมดพร้อมกัน
• เมื่อมีโลโก้แรสเตอร์แต่ไม่มีไฟล์ .ico หลายขนาด
• เมื่อต้องการสร้างในเครื่องโดยไม่ต้องอัปโหลดแอสเซ็ตแบรนด์
เช็กลิสต์แท็ก link ของ HTML
รวม rel="icon" สำหรับขนาด PNG, rel="apple-touch-icon" สำหรับ iOS และ manifest.json ตามต้องการสำหรับ PWA วางไฟล์ที่เส้นทางที่คาดเดาได้ (/favicon.ico ยังช่วยครอว์เลอร์เก่า)
คำถามที่พบบ่อย
รูปต้นทางควรขนาดเท่าไหร่?
อย่างน้อย 512×512 พิกเซลสี่เหลี่ยม มาสเตอร์ใหญ่ย่อลงได้ดีกว่าการขยายโลโก้เล็ก
favicon ICO กับ PNG?
เบราว์เซอร์สมัยใหม่รับ PNG .ico รวมหลายขนาดสำหรับแท็บ Windows รุ่นเก่า
ขนาด apple-touch-icon?
180×180 พิกเซลสำหรับทางลัดหน้าจอหลัก iOS — ใช้ PNG โดยไม่มีความโปร่งใสเพื่อผลที่ดีที่สุด
พื้นหลังโปร่งใส?
ใช้ได้สำหรับแท็บ PNG ไอคอนหน้าจอหลัก iOS อาจได้พื้นขาว — ทดสอบบนอุปกรณ์
แหล่ง SVG?
แปลง SVG เป็น PNG ก่อนที่ความละเอียดสูง แล้วสร้าง favicon