โลโก้ที่อ่านชัดบนหัวเว็บอาจเล็กจนมองไม่ออกเมื่ออยู่บนแท็บเบราว์เซอร์ เริ่มจากสัญลักษณ์ที่เรียบง่าย แล้วตรวจในขนาดเล็กก่อนแปลงเป็น ICO คู่มือนี้ช่วยเตรียมไฟล์ ส่วนการนำขึ้นเว็บต้องทำในระบบที่คุณใช้อยู่
เลือกโลโก้สำหรับพื้นที่เล็ก
เราแนะนำให้ใช้สัญลักษณ์หลักหรืออักษรสั้น ๆ แทนชื่อร้านพร้อมคำบรรยายยาว ตรวจว่าสีและเส้นยังแยกออกเมื่อย่อดูเล็ก ๆ และเว้นระยะรอบวัตถุพอให้ไม่ติดขอบ
หากต้นฉบับมีพื้นที่ว่างมาก ใช้ แต่งรูปออนไลน์ เตรียมกรอบภาพก่อน ถ้าต้องการพื้นหลังโปร่งใส ให้เริ่มจาก PNG ที่โปร่งใสจริง การเปลี่ยนนามสกุลไฟล์ไม่ได้ลบพื้นสีขาวออก อ่านเพิ่มเติมใน PNG กับ JPG และพื้นหลังโปร่งใส
แปลงเป็น ICO ทีละขั้น
- เปิด แปลงรูปภาพ แล้วเลือกโลโก้ PNG
- เลือก ICO จากตัวเลือกรูปแบบปลายทาง
- กดแปลงและดาวน์โหลดไฟล์ เก็บ PNG ต้นฉบับไว้สำหรับแก้ไขครั้งต่อไป
- ตรวจไฟล์ที่ได้ ก่อนนำไปใช้กับเว็บไซต์
ตัวแปลงสร้างภาพหลายขนาดในไฟล์ ICO เดียว โดยมี 16, 32 และ 48 พิกเซล และเพิ่ม 64, 128 หรือ 256 เมื่อขนาดด้านยาวของต้นฉบับถึงค่านั้น เช่น ต้นฉบับ 256 × 256 จะได้ครบทั้งหกขนาด นี่เป็นพฤติกรรมของเครื่องมือนี้ ไม่ใช่ข้อกำหนดว่าเว็บไซต์ทุกแห่งต้องใช้ครบทุกขนาด
ภาพแนวนอนจะได้ผลอย่างไร
เครื่องมือรักษาสัดส่วนแล้วจัดภาพไว้กึ่งกลางกรอบสี่เหลี่ยม ไม่ตัดหรือยืดโลโก้ให้เต็มกรอบ ดังนั้นโลโก้แนวนอนยาวจะเหลือพื้นที่ว่างด้านบนและล่าง และข้อความอาจเล็กมาก
| ต้นฉบับ | แนวทางของเรา |
|---|---|
| สัญลักษณ์เกือบเป็นสี่เหลี่ยม | ลองแปลงแล้วดูที่ขนาดเล็ก |
| ชื่อร้านยาวแนวนอน | เตรียมสัญลักษณ์ย่อแยกสำหรับไอคอน |
| โลโก้เล็กหรือไม่คมชัด | กลับไปใช้ต้นฉบับที่ชัดกว่า แทนการหวังให้ ICO เพิ่มรายละเอียด |
ตั้งค่าที่เว็บไซต์แล้วตรวจอีกครั้ง
MDN อธิบายว่าเว็บไซต์ใช้ความสัมพันธ์ icon เพื่อระบุไอคอนของเอกสาร หากระบบเว็บไซต์มีช่อง Site icon หรือ Favicon ให้นำไฟล์ไปตั้งค่าตามรูปแบบและขนาดที่ระบบนั้นรับ บางระบบขอ PNG จึงไม่จำเป็นต้องแปลงเป็น ICO เสมอไป
FileMyLove สร้างไฟล์เท่านั้น ไม่เชื่อมต่อหรือแก้การตั้งค่าเว็บไซต์ให้ หลังติดตั้งให้เปิดหน้าเว็บจริงและตรวจว่ารูปที่แสดงถูกต้อง หากยังเห็นรูปเดิม ให้ตรวจว่าเว็บไซต์อ้างไฟล์ใหม่และไม่ได้กำลังใช้ภาพที่แคชไว้ก่อนแปลงซ้ำ
