วิธีสร้าง Favicon
favicon สมัยใหม่เป็นมากกว่ารูปภาพขนาด 16×16 ต่อไปนี้คือขั้นตอนการทำงานทั้งหมดสำหรับการตั้งค่าที่ดูคมชัดในทุกเบราว์เซอร์ ระบบปฏิบัติการ และอุปกรณ์
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
favicon คืออะไร?
favicon คือไอคอนขนาดเล็กที่เบราว์เซอร์แสดงในแท็บ แถบบุ๊กมาร์ก และรายการประวัติ บนมือถือจะเป็นไอคอนบนหน้าจอหลัก บน Windows จะเป็นไอคอนทางลัด
ไซต์สมัยใหม่มีความละเอียดและรูปแบบที่หลากหลาย ดังนั้นทุกจุดที่แสดงจึงได้รับการเรนเดอร์ที่คมชัด
เตรียมภาพต้นฉบับของคุณ
Start from a square image that's at least 512×512 — ideally an SVG with a square viewBox. สิ่งเล็กๆ น้อยๆ จะเบลอเมื่อลดขนาดลง
หลีกเลี่ยงเส้นบางๆ และข้อความเล็กๆ พวกมันหายไปที่ 16×16
สร้าง .ico หลายขนาด
มัด 16, 32, 48, 64, 128 และ 256 ภายใน favicon.ico เดียว เบราว์เซอร์จะเลือกขนาดที่เหมาะสมโดยอัตโนมัติ
เครื่องมือสร้าง favicon ของเราดำเนินการฝั่งไคลเอ็นต์นี้ภายในเวลาไม่ถึงวินาที
เพิ่มแท็ก HTML
วาง favicon.ico ลงในรูทเว็บไซต์ของคุณ จากนั้นเพิ่ม SVG, apple-touch-icon และไอคอนรายการใน <head> เพื่อให้การตั้งค่าเสร็จสมบูรณ์
ตรวจสอบในทุกเบราว์เซอร์
รีเฟรชแคชใน Chrome, Safari, Firefox และ Edge ตรวจสอบแถบบุ๊กมาร์ก แท็บ และการติดตั้งหน้าจอหลัก
คำถามที่พบบ่อย
What is a favicon?
A favicon is the small icon shown in browser tabs, bookmarks, and mobile home screens. Modern sites ship multiple sizes and formats for crisp rendering everywhere.
What size should my favicon source image be?
Start from a square image at least 512×512 pixels. SVG with a square viewBox works best for sharp downscaling.
Do I need both favicon.ico and PNG files?
Yes — ship a multi-size favicon.ico for universal fallback plus PNGs (180×180 and 192/512) for Apple, Android, and PWAs.
Where do I put favicon files on my website?
Place favicon.ico in your site root and add <link rel="icon"> tags in <head> for SVG and PNG variants.