เครื่องมือสร้างฟาวิคอนและไอคอนแอป (PNG, ICO, manifest)

สร้างชุดฟาวิคอนและไอคอนแอปครบชุดจากรูปโลโก้หรือตัวอักษรหนึ่งถึงสองตัว ได้ทุกขนาดตั้งแต่ 16 ถึง 512 px พร้อม favicon.ico, apple-touch-icon และ manifest ในการดาวน์โหลดครั้งเดียว สำหรับเว็บไซต์ใหม่หรือแอปที่เพิ่มไว้บนหน้าจอหลัก

วิธีใช้

1. ที่ "สร้างจาก" เลือก "ตัวอักษร" หรือ "รูปภาพ" พิมพ์หนึ่งหรือสองตัวอักษรในช่อง "ตัวอักษร" หรือวางไฟล์รูปภาพ หรือกด "โหลดตัวอย่าง"
2. ปรับ "รูปทรงพื้นหลัง" "สีพื้นหลัง" และ "ระยะขอบใน" ตัวอย่างจะอัปเดตทันที รูปภาพยังใช้ "พื้นหลังโปร่งใส" ได้ด้วย
3. "ชื่อแอปหรือเว็บไซต์" และ "ชื่อย่อ" จะถูกใส่ใน site.webmanifest สำหรับ Android ให้เปิด "สร้างไอคอนแบบ maskable ด้วย"
4. กด "บันทึกเป็น zip" อัปโหลดไฟล์ไปที่รูทของเว็บไซต์ แล้วคัดลอก "โค้ดสำหรับ HTML head" ไปใส่ในองค์ประกอบ head

หลักการทำงาน

• วาดต้นฉบับขนาด 512 px ก่อน แล้วย่อลงทีละครึ่งจนได้ PNG ขนาด 16, 32, 48, 180, 192 และ 512 px เพื่อให้เส้นบางยังคมชัดในขนาดเล็ก
• favicon.ico บรรจุ PNG ขนาด 16, 32 และ 48 px ไว้ในคอนเทนเนอร์ ICO เบราว์เซอร์รุ่นใหม่อ่านข้อมูล PNG ใน ICO ได้โดยตรง
• ไอคอนแบบ maskable เก็บเนื้อหาไว้ในพื้นที่ปลอดภัยตรงกลาง 80% ทำให้ Android ตัดเป็นวงกลมหรือสี่เหลี่ยมมุมมนได้โดยไม่ตัดเนื้อหาออก
• รูปภาพและข้อความถูกประมวลผลในเบราว์เซอร์นี้เท่านั้นและไม่ถูกอัปโหลด การตั้งค่าจะเก็บไว้ในเบราว์เซอร์นี้สำหรับครั้งถัดไป

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

ฟาวิคอนควรมีขนาดเท่าไร

แท็บเบราว์เซอร์ใช้ 16 และ 32 px ทางลัดใช้ 48 px หน้าจอหลัก iPhone ใช้ 180 px ส่วน Android หรือ PWA ใช้ 192 และ 512 px หน้านี้สร้างทั้งหกขนาดพร้อมกัน

ยังต้องมีไฟล์ .ico อยู่ไหม

มีประโยชน์กับเบราว์เซอร์รุ่นเก่าและไคลเอนต์ที่ขอ /favicon.ico โดยอัตโนมัติ ลิงก์ PNG ก็ถูกใส่ไว้ด้วย เบราว์เซอร์รุ่นใหม่จึงเลือกใช้ไฟล์ PNG ก่อน

ไอคอนตัวอักษรใช้ฟอนต์อะไร

ฟอนต์ระบบที่ติดตั้งในอุปกรณ์ของคุณ ตามตระกูลที่เลือก อุปกรณ์อื่นอาจวาดตระกูลเดียวกันด้วยฟอนต์ที่ต่างกัน

ไอคอนมีพื้นหลังโปร่งใสได้ไหม

ได้สำหรับรูปภาพ เปิด "พื้นหลังโปร่งใส" แล้วพื้นหลังของ PNG จะว่าง ส่วนไอคอนตัวอักษรจะมีสีพื้นหลังเสมอ