ตัวแสดงตัวอย่าง Favicon
ดูตัวอย่างว่า favicon ของคุณจะแสดงผลอย่างไรในแท็บเบราว์เซอร์ บุ๊กมาร์ก และอุปกรณ์มือถือ ทดสอบความคมชัดของ favicon อัปโหลดของคุณเอง
Loading tool...
ตัวแสดงตัวอย่าง Favicon คืออะไร?
Favicon Previewer แสดงให้เห็นว่า favicon ของคุณจะปรากฏอย่างไรบนเบราว์เซอร์ แท็บ บุ๊กมาร์ก และอุปกรณ์ต่างๆ ก่อนที่จะนำไปใช้บนเว็บไซต์
ประโยชน์หลัก
- ดูตัวอย่างหลายแพลตฟอร์ม
- ทดสอบขนาด
- เช็คความมองเห็น
- อัปโหลดได้
กรณีการใช้งาน
- •สร้างแบรนด์เว็บไซต์
- •ทดสอบไอคอน
- •ยืนยันการออกแบบ
- •เช็คข้ามเบราว์เซอร์
วิธีดูตัวอย่าง Favicon
- อัปโหลด Favicon: อัปโหลดรูป favicon (ICO, PNG หรือ SVG)
- ดูตัวอย่างทุกขนาด: ดูว่าแสดงผลอย่างไรที่ 16x16, 32x32 และขนาดมาตรฐานอื่นๆ
- ทดสอบบริบท: ดูว่าปรากฏอย่างไรในแท็บเบราว์เซอร์ บุ๊กมาร์ก และบนพื้นหลังต่างๆ
คุณสมบัติหลัก
- ดูตัวอย่างที่ 16x16, 32x32 และขนาดใหญ่กว่า
- จำลองการแสดงผลในแท็บเบราว์เซอร์
- ดูตัวอย่างบุ๊กมาร์ก/รายการโปรด
- ทดสอบบนพื้นหลังสว่างและมืด
- รองรับรูปแบบ ICO, PNG และ SVG
- ดูตัวอย่างไอคอนบนอุปกรณ์มือถือ
คำถามที่พบบ่อย
ขนาด favicon ควรเป็นเท่าไหร่?
ควรมีหลายขนาด: 16x16 และ 32x32 สำหรับเบราว์เซอร์, 180x180 สำหรับ Apple Touch Icon และ 192x192/512x512 สำหรับ PWA SVG ใช้ได้ทุกขนาด
ไฟล์รูปแบบใดดีที่สุด?
ICO รองรับเบราว์เซอร์กว้างที่สุด PNG ทันสมัยและรองรับโปร่งใส SVG ปรับขนาดได้ เว็บส่วนใหญ่ใช้หลายรูปแบบ
ทำไม favicon ดูเบลอ?
น่าจะใช้รูปความละเอียดต่ำที่ถูกขยาย ตรวจสอบว่ารูปต้นฉบับอย่างน้อย 512x512 มีการออกแบบที่เรียบง่ายและยังจำได้ที่ 16x16
ทดสอบ dark mode ได้อย่างไร?
เครื่องมือนี้แสดง favicon บนพื้นหลังทั้งสว่างและมืด สำหรับ dark mode จริง ใช้ SVG กับ CSS media queries สำหรับ prefers-color-scheme