สร้าง Favicon อย่างครบวงจร

Favicon เป็นองค์ประกอบที่จำเป็นสำหรับเว็บไซต์สมัยใหม่ แทนที่จะใช้เพียงแค่ไฟล์ไอคอนขนาด 16x16 แบบดั้งเดิม มาตรฐานในปัจจุบันนั้นต้องการชุดไฟล์ที่ครอบคลุม: ไฟล์ favicon.svg ที่ปรับขนาดได้อย่างอิสระสำหรับเบราว์เซอร์สมัยใหม่ apple-touch-icon.png สำหรับอุปกรณ์ iOS ไอคอนขนาด 192px/512px สำหรับ Android/PWAs และไฟล์ favicon.ico เพื่อรองรับเบราว์เซอร์รุ่นเก่า

Favicon Generator นี้ช่วยให้คุณสร้างชุดไฟล์ที่ทันสมัยเหล่านี้ทั้งหมดจากรูปภาพ ข้อความ หรืออีโมจิใดๆ ก็ได้อย่างรวดเร็ว การประมวลผลรูปภาพและการสร้างไฟล์ทั้งหมดจะดำเนินการอย่างปลอดภัยบนเบราว์เซอร์ของคุณ — โดยจะไม่มีข้อมูลใดๆ ถูกอัปโหลดไปยังเซิร์ฟเวอร์ของเรา

Favicon

ไอคอนขนาดเล็กที่เชื่อมโยงกับเว็บไซต์ใดเว็บไซต์หนึ่ง ช่วยให้ผู้ใช้สามารถระบุหน้าเว็บของคุณได้อย่างง่ายดายบนแถบแท็บเบราว์เซอร์ที่มีแท็บจำนวนมาก หรือในรายการบุ๊กมาร์ก

รูปแบบ .ico

รูปแบบรูปภาพแบบดั้งเดิมที่ใช้สำหรับ Favicon ข้อดีหลักคือสามารถเก็บความละเอียดที่หลากหลาย (เช่น 16x16, 32x32) ไว้ภายในไฟล์เดียว

Apple Touch Icon

ไอคอนที่ปรากฏเมื่อผู้ใช้ปักหมุดเว็บไซต์ของคุณไว้บนหน้าจอหลักของอุปกรณ์ iOS (iPhone/iPad) ขนาดมาตรฐานคือรูปภาพ PNG 180x180

SVG Favicon

ไอคอนที่อิงตามกราฟิกเวกเตอร์ (สามารถขยายได้อย่างอิสระ) ซึ่งจะคงความคมชัดในทุกขนาด และสามารถใช้ CSS แบบฝังเพื่อเปลี่ยนสีแบบไดนามิก ขึ้นอยู่กับว่าระบบของผู้ใช้อยู่ในโหมดมืดหรือโหมดสว่าง

Web App Manifest

ไฟล์ JSON ที่ให้ข้อมูลเกี่ยวกับเว็บแอปพลิเคชัน บอกเบราว์เซอร์ว่าจะทำงานอย่างไรเมื่อติดตั้งบนคอมพิวเตอร์หรืออุปกรณ์มือถือ (PWA) ของผู้ใช้ ซึ่งกำหนดชื่อแอป สีหลัก และไอคอนต่างๆ

Q.รูปภาพที่อัปโหลดจะถูกเก็บไว้บนเซิร์ฟเวอร์หรือไม่?

ไม่ถูกจัดเก็บ การประมวลผลและการสร้าง Favicon ทั้งหมดเกิดขึ้นภายในเบราว์เซอร์ของคุณ ข้อมูลจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ภายนอกใดๆ ทั้งสิ้น

Q.ควรใช้ Favicon ขนาดใดในปัจจุบัน?

แนวทางปฏิบัติที่ดีที่สุดในปัจจุบันคือการเตรียมไฟล์ favicon.ico สำหรับเบราว์เซอร์รุ่นเก่า favicon.svg สำหรับเบราว์เซอร์สมัยใหม่ apple-touch-icon.png (180px) สำหรับ iOS และไอคอนขนาด 192px/512px สำหรับ Android/PWA

Q.สามารถทำให้พื้นหลังโปร่งใสได้หรือไม่?

ได้ หากรูปภาพต้นฉบับของคุณเป็นไฟล์ PNG หรือ SVG ที่มีพื้นหลังโปร่งใส ให้เลือก 'พื้นหลังโปร่งใส' คุณยังสามารถสร้าง Favicon ที่มีพื้นหลังโปร่งใสจากข้อความหรืออีโมจิได้อีกด้วย

Q.ฟีเจอร์พื้นหลังโหมดมืด (Dark mode) สำหรับ SVG คืออะไร?

ฟีเจอร์นี้จะเปลี่ยนสีพื้นหลังหรือการออกแบบของ Favicon โดยอัตโนมัติเมื่อผู้ใช้ตั้งค่า OS/เบราว์เซอร์เป็นโหมดมืด โดยการฝัง CSS media queries ไว้ในไฟล์ SVG

Q.Favicon ที่สร้างจากข้อความหรืออีโมจิสามารถใช้งานเชิงพาณิชย์ได้ฟรีหรือไม่?

ใช่ Favicon ที่สร้างที่นี่สามารถใช้งานเชิงพาณิชย์ได้ฟรี อย่างไรก็ตาม โปรดทราบว่าอีโมจิของระบบจะแสดงผลแตกต่างกันไปขึ้นอยู่กับแบบอักษรและระบบปฏิบัติการของผู้ใช้