แปลง PNG เป็น ICO เพื่อ Favicon ที่คมชัด
Favicon คือภาพเล็กๆ ที่ให้เอกลักษณ์ภาพแก่เว็บไซต์ คุณเห็นมันในแท็บเบราว์เซอร์ข้างชื่อเพจ ในรายการบุ๊กมาร์ก ในดรอปดาวน์แถบที่อยู่ของประวัติการท่องเว็บ และบางครั้งข้างผลการค้นหา มันเล็ก แต่ทำงานมาก Favicon ที่จำได้ช่วยให้ผู้ใช้ค้นหาแท็บของคุณท่ามกลางแท็บอื่นๆ นับสิบ และเป็นสัญญาณว่าเว็บไซต์สมบูรณ์และได้รับการดูแล ฟอร์แมตคลาสสิกสำหรับไอคอนเล็กๆ นั้นคือ ICO และวิธีที่ง่ายที่สุดในการสร้างคือเริ่มจาก PNG สี่เหลี่ยมจัตุรัสที่สะอาดแล้วแปลงมัน
เครื่องมือนี้รับภาพ PNG และเปลี่ยนเป็น ICO Favicon ภายในเบราว์เซอร์ของคุณ การแปลงทำงานในเครื่องโดยใช้อุปกรณ์ของคุณเอง ดังนั้นภาพที่คุณเลือกจะไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ นั่นสำคัญเมื่อไอคอนของคุณเป็นโลโก้หรือ Asset ของแบรนด์ที่คุณไม่อยากส่งให้บุคคลที่สาม เมื่อไฟล์พร้อม คุณเพียงแค่ดาวน์โหลด
ฟอร์แมต ICO คืออะไรและทำไมจึงเก็บหลายขนาด
ICO เป็นฟอร์แมต Container ไอคอนที่มีต้นกำเนิดใน Microsoft Windows ซึ่งเก็บไอคอนที่ใช้สำหรับโปรแกรม ทางลัด และโฟลเดอร์ คุณลักษณะที่โดดเด่น และเหตุผลที่มันกลายเป็นมาตรฐานสำหรับ Favicon เว็บ คือไฟล์ ICO ไฟล์เดียวสามารถเก็บภาพเดียวกันในหลายความละเอียดพร้อมกัน แทนที่จะเป็น Bitmap ที่แน่นอนเพียงอย่างเดียว ไฟล์จะบรรจุชุดภาพสี่เหลี่ยมจัตุรัสขนาดเล็กและให้เบราว์เซอร์หรือระบบปฏิบัติการเลือกขนาดที่เหมาะกับสถานที่ที่ต้องวาดไอคอน
นั่นมีประโยชน์จริงๆ แท็บเบราว์เซอร์ต้องการไอคอนเล็ก แถบบุ๊กมาร์กอาจใช้อันที่ใหญ่กว่าเล็กน้อย และทางลัดที่ปักหมุดบนเดสก์ท็อปสามารถขอสิ่งที่ใหญ่กว่านั้น ด้วย ICO หลายขนาด แต่ละบริบทจะเลือกเวอร์ชันที่เหมาะ ดังนั้นไอคอนของคุณยังคมชัดแทนที่จะถูกขยายจาก Bitmap เล็กๆ เดียวแล้วดูเบลอ ICO ยังรักษาความโปร่งใส ซึ่งทำให้มุมของโลโก้กลมหรือไม่สม่ำเสมอสะอาดบนสีแท็บใดก็ได้
ขนาด Favicon ที่แนะนำ
สำหรับ Favicon เว็บไซต์ ขนาดสามอย่างที่ควรรวมคือ 16x16, 32x32 และ 48x48 พิกเซล เวอร์ชัน 16 พิกเซลคือสิ่งที่เบราว์เซอร์ส่วนใหญ่แสดงในแท็บและแถบที่อยู่ เวอร์ชัน 32 พิกเซลใช้บนจอแสดงผลความละเอียดสูงและในมุมมองบุ๊กมาร์กและประวัติบางแบบ จึงทำให้ทุกอย่างคมชัดบนหน้าจอสมัยใหม่ เวอร์ชัน 48 พิกเซลครอบคลุมบริบทที่ใหญ่กว่า เช่น ทางลัดไซต์ Windows เนื่องจากทั้งหมดอยู่ในไฟล์ ICO เดียว คุณส่ง Asset เดียวและให้แต่ละพื้นที่เลือกสิ่งที่ต้องการ
เริ่มจาก PNG สี่เหลี่ยมจัตุรัสเพื่อไม่ให้อะไรยืด หากภาพต้นฉบับของคุณเป็นสี่เหลี่ยมผืนผ้าหรือใหญ่เกินไป ให้ครอบตัดหรือปรับขนาดเป็นสี่เหลี่ยมจัตุรัสสะอาดก่อนด้วย โปรแกรมปรับขนาดภาพ ของเรา แล้วจึงทำการแปลง การออกแบบที่เรียบง่ายและมีความคมชัดสูงอ่านได้ดีกว่าที่ 16 พิกเซลมากกว่าภาพประกอบละเอียด ดังนั้นเน้นรูปทรงตัวหนาแทนข้อความบาง
วิธีเพิ่ม Favicon ให้กับเว็บไซต์ของคุณ
เมื่อคุณได้ไฟล์ ICO แล้ว อัปโหลดไปยังเว็บไซต์ของคุณ โดยปกติเป็น favicon.ico ที่ Root ของไซต์ เบราว์เซอร์หลายตัวจะพบมันที่นั่นโดยอัตโนมัติ แต่เป็นแนวปฏิบัติที่ดีในการประกาศมันอย่างชัดเจนใน Head ของ HTML เพื่อไม่ให้ต้องเดา เพิ่ม Link Tag แบบนี้:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
วางบรรทัดนั้นในส่วน <head> ของเพจ Attribute rel="icon" บอกเบราว์เซอร์ว่า Resource นี้คือไอคอนเพจ และ href ชี้ไปที่ที่คุณเก็บไฟล์ หากคุณใช้ Path แบบ Root-relative เหมือนด้านบน การประกาศเดียวกันจะใช้งานได้ทุกเพจในไซต์ หลังจาก Deploy คุณอาจต้อง Hard Refresh หรือล้าง Cache ก่อนที่ไอคอนใหม่จะปรากฏ เนื่องจากเบราว์เซอร์เก็บ Favicon ไว้อย่างดื้อรั้น
การแปลงที่เป็นส่วนตัวในเบราว์เซอร์ของคุณ
ทุกอย่างเกิดขึ้นบนอุปกรณ์ของคุณ PNG ที่คุณเลือกจะถูกอ่าน ถอดรหัส และเข้ารหัสใหม่เป็น ICO ในเครื่อง และไม่มีอะไรออกจากเครื่องของคุณระหว่างกระบวนการ ไม่มีบัญชี ไม่มีคิว และไม่มีการเก็บข้อมูลบนเซิร์ฟเวอร์ ทำให้สะดวกแม้สำหรับโลโก้ที่ยังไม่เปิดตัวหรืองานลูกค้าภายใต้ข้อตกลง สำหรับวิธีเพิ่มเติมในการเตรียมและจัดระเบียบกราฟิก ดู เครื่องมือภาพ ทั้งชุดของเรา
คำถามที่พบบ่อย
ภาพของฉันถูกอัปโหลดที่ไหนหรือไม่?
ไม่ PNG ถูกแปลงเป็น ICO ทั้งหมดในเบราว์เซอร์ของคุณบนอุปกรณ์ของคุณเอง ไม่มีการส่งไปยังเซิร์ฟเวอร์และไม่มีการเก็บอะไร ดังนั้นภาพของคุณยังคงเป็นส่วนตัว
Favicon ของฉันควรรวมขนาดอะไรบ้าง?
ขนาดที่มีประโยชน์มากที่สุดคือ 16x16, 32x32 และ 48x48 พิกเซล ภาพ 16 พิกเซลแสดงในแท็บเบราว์เซอร์ ในขณะที่ขนาดที่ใหญ่กว่าทำให้ไอคอนคมชัดบนจอแสดงผลความละเอียดสูงและทางลัดเดสก์ท็อป
ทำไมต้องใช้ ICO แทน PNG?
ICO เป็นฟอร์แมต Favicon ที่ยาวนานและสามารถเก็บหลายขนาดในไฟล์เดียว เบราว์เซอร์และระบบปฏิบัติการเลือกความละเอียดที่เหมาะกับแต่ละบริบท ดังนั้นไอคอนยังคมชัดแทนที่จะถูกขยายจาก Bitmap เดียว
ICO รักษาความโปร่งใสจาก PNG ของฉันหรือไม่?
ใช่ ฟอร์แมต ICO รองรับความโปร่งใส ดังนั้นพื้นที่โปร่งใสของ PNG ของคุณจะถูกรักษาไว้และไอคอนจะผสานกับสีแท็บหรือพื้นหลังใดก็ได้อย่างสะอาด
ฉันจะเพิ่ม Favicon ให้กับเว็บไซต์ของฉันได้อย่างไร?
อัปโหลดไฟล์ ICO ไปยังไซต์ของคุณ โดยปกติเป็น favicon.ico ที่ Root และเพิ่ม Link Tag ใน Head ของ HTML เช่น link rel icon type image x-icon href slash favicon.ico จากนั้นล้าง Cache เบราว์เซอร์เพื่อดูมัน
ภาพต้นฉบับของฉันไม่เป็นสี่เหลี่ยมจัตุรัส ควรทำอย่างไร?
ครอบตัดหรือปรับขนาดให้เป็นสี่เหลี่ยมจัตุรัสก่อนเพื่อไม่ให้ยืด คุณสามารถใช้โปรแกรมปรับขนาดภาพของเราเพื่อสร้างสี่เหลี่ยมจัตุรัสสะอาด แล้วแปลงเป็น ICO เพื่อให้ได้ Favicon ที่ดูดีที่สุด