เครื่องมือแปลงรูปภาพเป็น Favicon
แปลงรูปภาพในรูปแบบ JPG, PNG, GIF เป็นไอคอน favicon ในรูปแบบ ICO
การตั้งค่าการสร้าง Favicon
ลากและวางรูปภาพที่นี่ หรือ
ผลลัพธ์การสร้าง
กรุณาอัพโหลดและสร้าง Favicon เพื่อดูผลลัพธ์
16×16
32×32
48×48
คำแนะนำการใช้งาน
เลือกรูปภาพ
ลากและวางไฟล์รูปภาพลงในพื้นที่อัพโหลดหรือกดปุ่มสำรวจเพื่อเลือกรูปภาพ。
ตั้งค่าพารามิเตอร์ Favicon
เลือกขนาดและรูปแบบผลลัพธ์สำหรับ Favicon，ปรับตัวเลือกการประมวลผลรูปภาพตามความต้องการ。
สร้าง Favicon
คลิกที่ปุ่ม "สร้าง Favicon" ระบบจะแปลงรูปภาพให้เป็นรูปแบบ Favicon。
ดาวน์โหลดผลลัพธ์
หลังจากสร้างเสร็จแล้ว คุณสามารถดูตัวอย่าง Favicon ในขนาดต่างๆ และดาวน์โหลดไฟล์ที่สร้างขึ้น。
ความรู้พื้นฐานเกี่ยวกับ Favicon
Favicon คืออะไร?
Favicon (Favorites Icon) เป็นไอคอนเว็บไซต์ที่แสดงในแท็บเบราว์เซอร์ แถบบุ๊กมาร์ก และประวัติ ซึ่งโดยปกติจะเป็นภาพเล็กขนาด 16×16 หรือ 32×32 พิกเซล มันเป็นส่วนสำคัญของการระบุแบรนด์ของเว็บไซต์ สามารถช่วยให้ผู้ใช้สามารถระบุเว็บไซต์ของคุณได้อย่างรวดเร็วในแท็บที่เปิดมากมาย。
รูปแบบทั่วไปของ Favicon
-
รูปแบบ .ico: รูปแบบ Favicon ที่โบราณที่สุดและได้รับการสนับสนุนอย่างกว้างขวาง สามารถเก็บรูปภาพหลายขนาดและความลึกของบิตได้
-
รูปแบบ .png: ได้รับการสนับสนุนอย่างกว้างขวางในเบราว์เซอร์สมัยใหม่ รองรับพื้นหลังโปร่งใสและการบีบอัด
-
รูปแบบ .svg: รูปแบบเวกเตอร์ แสดงผลชัดเจนที่หน้าจอความละเอียดสูง แต่ความรองรับของเบราว์เซอร์แตกต่างกัน
-
รูปแบบ .webp: รูปแบบใหม่กว่าที่มีประสิทธิภาพในการบีบอัดสูงกว่า แต่ไม่รองรับเบราว์เซอร์เก่า
ขนาดและข้อกำหนดที่แนะนำ
เพื่อให้แน่ใจว่าจะแสดงผลที่ดีที่สุดบนอุปกรณ์และเบราว์เซอร์ต่างๆ แนะนำให้สร้าง Favicon ที่มีขนาดดังต่อไปนี้：
นอกจากนี้ แนะนำให้ใช้รูปภาพสี่เหลี่ยมจัตุรัสและให้แน่ใจว่าองค์ประกอบภาพสำคัญอยู่ในพื้นที่ศูนย์กลาง เพื่อให้เข้ากับความต้องการในการตัดแต่งต่างๆ。
แนวทางปฏิบัติที่ดีที่สุดและเคล็ดลับ
- ใช้การออกแบบที่เรียบง่ายและชัดเจน หลีกเลี่ยงรายละเอียดมากเกินไปเนื่องจากขนาดของ Favicon นั้นเล็ก
- แน่ใจว่ามีความสามารถในการมองเห็นที่ดีบนพื้นหลังสีอ่อนและสีเข้ม
- ใช้พื้นหลังโปร่งใสเพื่อเข้ากับธีมเบราว์เซอร์ที่แตกต่างกัน
- ให้ไอคอนขนาดใหญ่กว่าสำหรับอุปกรณ์เคลื่อนที่ (เช่น Apple Touch Icon ขนาด 180×180 px)
- ล้างแคชเบราว์เซอร์หลังจากอัปเดต Favicon เพื่อดูผลลัพธ์ล่าสุด
วิธีการบูรณาการในเว็บไซต์
ในการเพิ่ม Favicon ลงในเว็บไซต์ของคุณ คุณต้องเพิ่มโค้ดต่อไปนี้ในส่วนที่เขียนว่า<head>ของเอกสาร HTML：
<!-- Favicon มาตรฐาน --> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <!-- Favicon รูปแบบ ICO (สำหรับเบราว์เซอร์แบบดั้งเดิม) --> <link rel="icon" type="image/x-icon" href="/favicon.ico"> <!-- Apple Touch Icon (สำหรับอุปกรณ์ iOS) --> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <!-- ไฟล์ manifest แอปพลิเคชันเว็บ (PWA) --> <link rel="manifest" href="/site.webmanifest">
ตรวจสอบให้แน่ใจว่ามีการวางไฟล์ไอคอนไว้ที่ไดเร็กทอรีรากของเว็บไซต์หรือเส้นทางที่ระบุ และอัปเดตแอตทริบิวต์ href เพื่อตรงกับตำแหน่งไฟล์จริง。
推荐工具
เครื่องมือรู้จำข้อความ OCR รูปภาพ - แยกข้อความจากรูปภาพออนไลน์
เครื่องมือรู้จำข้อความ OCR รูปภาพออนไลน์ฟรี รองรับการแยกข้อความจากรูปภาพในรูปแบบ JPG, PNG และอื่น ๆ และสามารถรู้จำหลายภาษา เช่น ภาษาจีนและภาษาอังกฤษ
เครื่องมือแยก GIF - แปลงไฟล์ GIF เป็นรูปภาพเฟรมหลาย ๆ ภาพ
เครื่องมือแยก GIF ออนไลน์ฟรี แปลงไฟล์อนิเมชั่น GIF เป็นรูปภาพเฟรมหลาย ๆ ภาพ รองรับดาวน์โหลดเฟรมทั้งหมด ทำงานแบบออฟไลน์เต็มรูปแบบ ข้อมูล 100% ปลอดภัย
เครื่องมือแปลงรูปภาพเป็น Favicon - สร้างไอคอนเว็บไซต์ออนไลน์
เครื่องมือแปลงรูปภาพเป็น Favicon ออนไลน์ฟรี รองรับแปลงรูปภาพรูปแบบ JPG, PNG, GIF และอื่นๆ เป็นไอคอน favicon รูปแบบ ICO พร้อมปรับแต่งขนาดและรูปแบบได้
เครื่องสร้างโค้ด QR - สร้างโค้ด QR ออนไลน์
เครื่องมือสร้างโค้ด QR ออนไลน์ - แพลตฟอร์มสร้างโค้ด QR ที่มีประสิทธิภาพ สามารถแปลงเนื้อหา เช่น ข้อความ、ลิงก์เว็บไซต์、ข้อมูลติดต่อ เป็นโค้ด QR ได้ด้วยการคลิกเดียว
เครื่องมือปรับขนาดภาพ - ปรับขนาดภาพจำนวนมากออนไลน์
เครื่องมือปรับขนาดภาพออนไลน์ฟรี รองรับการอัปโหลดภาพหลายภาพเป็นชุดและปรับขนาด พร้อมพารามิเตอร์ที่สามารถปรับแต่งได้ เช่น ความกว้าง ความสูง อัตราส่วนการขยาย/ลดขนาด ฯลฯ