ทำตามตัวอย่างการใช้งานนี้ จากนั้นปรับการตั้งค่าเดียวกันกับรูปภาพของคุณเอง เปิด เครื่องมือสร้าง Favicon / ICO.
เลือกโลโก้ที่ชัดเจนหรือเริ่มต้นด้วยตัวอักษรย่อ
เปิด Favicon / ICO Generator และเลือก Image อัปโหลด PNG, JPG, JPEG, WebP หรือ GIF หรือเลือก Try a sample ตัวอย่างที่ใช้คือ favicon-orbit.png ซึ่งเป็นเครื่องหมายวงโคจรสีม่วงขนาด 512 × 512 พิกเซลที่มีมุมโปร่งใส อินพุตคือ 202,491 ไบต์
สำหรับแบรนด์ที่ยังไม่มีโลโก้สำเร็จรูป ให้เลือก ข้อความ บนหน้าเครื่องมือ ป้อนตัวอักษรหนึ่งหรือสองตัวแล้วเลือก ดำเนินการต่อ ตัวแก้ไขมีแบบอักษร Modern sans, Classic serif และ Monospace รวมถึงสีข้อความและสีพื้นหลังแยกต่างหาก รองรับอักขระสูงสุดสามตัว แต่อักขระเพิ่มเติมอาจจดจำได้ยากในขนาดเล็ก
เก็บงานศิลปะต้นฉบับไว้ ตัวสร้างจะสร้างไฟล์ไอคอนใหม่และไม่เขียนทับแหล่งที่มา อินพุต GIF จะกลายเป็นไอคอนนิ่งแทนที่จะเป็น Favicon แบบเคลื่อนไหว
สำหรับอักษรย่อ เมนู Font จะเริ่มต้นด้วยสไตล์ที่รวมมาให้สามแบบ เลือก ใช้แบบอักษรของระบบ บนเบราว์เซอร์เดสก์ท็อปที่รองรับและอนุญาตการเข้าถึงเพื่อเพิ่มแบบอักษรที่ติดตั้งบนอุปกรณ์ของคุณ ใช้ลูกศรย้อนกลับและถัดไปเพื่อเปรียบเทียบแบบอักษรที่อยู่ติดกัน หรือเลือกตระกูลแบบอักษรและตรวจสอบตัวอย่างสด โดยเฉพาะที่ 16 พิกเซล แบบอักษรจะอยู่ในอุปกรณ์ของคุณ สไตล์ที่รวมมาให้ทำงานได้โดยไม่ต้องขออนุญาต
ใช้ภาพเงาที่เรียบง่าย ภาพถ่ายที่มีรายละเอียดอาจดูน่าสนใจที่ 512 พิกเซล แต่จะกลายเป็นจุดที่ไม่ชัดเจนที่ 16 พิกเซล
ปรับแต่งการจัดเฟรมและตรวจสอบตัวอย่างขนาดเล็ก
ตัวแก้ไขจะแสดงแท็บเบราว์เซอร์สีอ่อนและสีเข้มพร้อมตัวอย่างที่ขนาดไอคอนทั่วไป ตรวจสอบตัวอย่างขนาด 16 พิกเซลก่อน เป็นการทดสอบที่เข้มงวดที่สุดว่าสัญลักษณ์ยังคงจดจำได้หรือไม่ ตัวอย่าง Apple Touch แสดงถึงการส่งออกขนาด 180 พิกเซลและแสดงขนาดเล็กลงในพื้นที่ทำงาน
บนโทรศัพท์ ให้เปิด Settings ปล่อยให้ Create from ตั้งค่าเป็น Uploaded image และ Image fit ตั้งค่าเป็น แสดงภาพทั้งหมด สำหรับตัวอย่างนี้ ให้ตั้งค่า Space around content เป็น 0 และเปิดใช้งาน พื้นหลังโปร่งใส แหล่งที่มามีรูปร่างสีม่วงโค้งมนและขอบที่ชัดเจนอยู่แล้ว จึงไม่จำเป็นต้องมีพื้นหลังสีเพิ่มเติม
ด้วยแหล่งที่มาที่แตกต่างกัน แสดงภาพทั้งหมด จะคงขอบไว้ ในขณะที่ Fill the icon อาจครอบตัดขอบเหล่านั้น Rounded square, Square และ Circle กำหนดรูปร่างภายนอก พื้นหลังโปร่งใส จะรักษาพื้นที่ที่ชัดเจนไว้ แต่ไม่สามารถลบพื้นหลังทึบที่วาดไว้ในรูปภาพได้ ตรวจสอบตัวอย่างที่เล็กที่สุดหลังจากการเปลี่ยนการจัดเฟรมทุกครั้ง
โลโก้ที่มีมุมโปร่งใสอาจมีกรอบที่สองที่ไม่ต้องการหากคุณเพิ่มพื้นหลังทึบแยกต่างหาก ตรวจสอบตัวเลือกพื้นหลังทั้งสองแบบ
ตัวอย่างในคู่มือนี้
ลองใช้ตัวอย่าง: favicon-orbit.png, 512 × 512 พิกเซล รูปภาพที่อัปโหลด; แสดงรูปภาพทั้งหมด; สี่เหลี่ยมมุมมน; พื้นที่รอบเนื้อหา 0%; เปิดใช้งานพื้นหลังโปร่งใส; แพ็กเกจไอคอนเว็บไซต์ (ZIP); ชื่อเว็บไซต์ My website
- รูปภาพต้นฉบับ
- 512 × 512 PNG · 202,491 ไบต์
- ICO เฟรม
- 16, 24, 32, 48, 64, 128 และ 256 พิกเซล
- แพ็กเกจ
- 9 ไฟล์ · 304,351 ไบต์
- ผลลัพธ์ที่แสดง
- เฟรม ICO จริงขนาด 256 × 256
เลือก ICO หลายขนาดหรือแพ็กเกจเว็บไซต์
ภายใต้หัวข้อ Download ให้เลือก Website icon package (ZIP) สำหรับตัวอย่างนี้ ให้คงค่า Website name ไว้ที่ My website สำหรับตัวอย่าง หรือเปลี่ยนเป็นชื่อแบรนด์จริงสำหรับโปรเจกต์ของคุณ ชื่อนี้จะถูกใช้ใน site.webmanifest โดยจะไม่ถูกเพิ่มเป็นข้อความทับบนรูปภาพ
เลือก Start เบราว์เซอร์จะสร้าง favicon.ico แบบเจ็ดเฟรมที่มีรูปภาพสี่เหลี่ยมจัตุรัสที่ขนาด 16, 24, 32, 48, 64, 128 และ 256 พิกเซล นอกจากนี้ยังสร้างไอคอน PNG ที่ขนาด 16, 32, 48, 180, 192 และ 512 พิกเซล พร้อมไฟล์ manifest และคำแนะนำในการติดตั้ง ผลลัพธ์ที่ได้จะเป็นไฟล์ ZIP ไฟล์เดียว แทนที่จะเป็นปุ่มดาวน์โหลดแยกสำหรับไอคอนแต่ละตัว
หากคุณต้องการเพียง favicon.ico แบบคลาสสิก ให้เลือก Multi-size ICO แทน วิธีนี้มีประโยชน์เมื่อแพลตฟอร์มเว็บไซต์รองรับการอัปโหลด ICO และไม่จำเป็นต้องใช้แพ็กเกจแยกต่างหาก
แพ็กเกจนี้เป็นชุดของไฟล์ไอคอนเว็บไซต์ ซึ่งไม่ได้เปลี่ยนเว็บไซต์ให้เป็น Progressive Web App โดยอัตโนมัติ
ดาวน์โหลด ติดตั้ง และตรวจสอบไฟล์ไอคอน
การดาวน์โหลดจะบันทึกไฟล์ website-icons.zip ตัวอย่างการใช้งานจริงประกอบด้วยไฟล์เก้าไฟล์และมีขนาด 304,351 ไบต์ การเปรียบเทียบด้านบนแสดงแหล่งที่มาขนาด 512 พิกเซลข้างๆ เฟรมขนาด 256 พิกเซลจริงที่ดึงมาจาก ICO ที่ส่งออก แทนที่จะเป็นภาพหน้าจอจำลองจากเบราว์เซอร์
แตกไฟล์ ZIP อัปโหลดไฟล์ไอคอนไปยังรูทของเว็บไซต์ของคุณ และอ่าน INSTALL.txt ซึ่งประกอบด้วยแท็กลิงก์ HTML สำหรับ ICO, ไอคอน PNG, Apple Touch icon และ web manifest หากคุณวางไฟล์ไว้ในโฟลเดอร์ย่อย ให้อัปเดตทั้งเส้นทาง HTML และเส้นทางไอคอนภายใน site.webmanifest
ตรวจสอบเว็บไซต์ของคุณในแท็บเบราว์เซอร์ใหม่และบนอุปกรณ์ที่คุณต้องการ เบราว์เซอร์อาจแคช favicon ไว้ ดังนั้นไอคอนเก่าไม่ได้พิสูจน์ว่าการติดตั้งล้มเหลว ให้เก็บรูปภาพต้นฉบับและแพ็กเกจที่ดาวน์โหลดไว้ก่อนที่จะรีเฟรชตัวแก้ไข เพราะการรีเฟรชจะกลับไปที่หน้าหลักของเครื่องมือ
เลือกตำแหน่งไอคอนหลักหนึ่งตำแหน่งและรักษาเส้นทาง HTML ให้สอดคล้องกัน เครื่องมือสร้างจะสร้างไฟล์ต่างๆ ส่วนการเผยแพร่ยังคงเป็นส่วนหนึ่งของขั้นตอนการทำงานของเว็บไซต์คุณ
คำถามที่พบบ่อย
ฉันสามารถสร้าง favicon โดยไม่ต้องอัปโหลดโลโก้ได้หรือไม่
ได้ เลือกข้อความ ป้อนตัวอักษรย่อของคุณ จากนั้นเลือกแบบอักษร สี รูปร่าง และระยะห่างในตัวแก้ไข
มีขนาดใดบ้างภายในไฟล์ ICO
ICO ประกอบด้วยเฟรมขนาด PNG จำนวนเจ็ดเฟรม ได้แก่ 16, 24, 32, 48, 64, 128 และ 256 พิกเซลแบบจัตุรัส เบราว์เซอร์จะเลือกเฟรมที่เหมาะสม
มีอะไรบ้างในไฟล์ ZIP ของเว็บไซต์
ประกอบด้วย favicon.ico, ไอคอน PNG หกรายการสำหรับเบราว์เซอร์, Apple และ Android, site.webmanifest และ INSTALL.txt พร้อมแท็กลิงก์ HTML
favicon ของฉันสามารถมีพื้นหลังโปร่งใสได้หรือไม่
ได้ เปิดใช้งานพื้นหลังโปร่งใส ซึ่งจะคงพื้นที่โปร่งใสรอบๆ แหล่งข้อมูลไว้ โดยจะไม่ลบพื้นหลังทึบออกจากภาพถ่าย
ภาพถูกอัปโหลดเพื่อทำการแปลงหรือไม่
ไม่ เครื่องมือนี้สร้างและบรรจุไฟล์ไอคอนในเบราว์เซอร์ของคุณ โปรดเก็บไฟล์ที่ดาวน์โหลดไว้เนื่องจากตัวแก้ไขไม่ใช่ที่เก็บโครงการถาวร
ฉันสามารถใช้แบบอักษรที่ติดตั้งบนคอมพิวเตอร์ของฉันได้หรือไม่
ได้ เมื่อเบราว์เซอร์ของคุณรองรับการเข้าถึงแบบอักษรในเครื่อง เลือกข้อความ / ตัวอักษรย่อ เลือกใช้แบบอักษรของระบบ และอนุญาตสิทธิ์เบราว์เซอร์ ตระกูลแบบอักษรที่มีอยู่ของคุณจะปรากฏในรายการแบบอักษร รูปแบบที่รวมไว้นั้นยังคงใช้งานได้หากปฏิเสธสิทธิ์หรือการเข้าถึงแบบอักษรในเครื่องไม่พร้อมใช้งาน
มอบลายเซ็นขนาดเล็กที่ชัดเจนให้กับเว็บไซต์ถัดไปของคุณ
ลองใช้ตัวอย่างหรือใช้ไฟล์ของคุณเอง และตรวจสอบผลลัพธ์ก่อนแชร์
