ไฟล์ favicon ที่เว็บไซต์ต้องมี และขนาดของแต่ละไฟล์

เว็บไซต์ต้องมีไฟล์ไอคอนไม่กี่ไฟล์ และส่วนใหญ่ที่ต้องตัดสินใจคือเรื่องขนาด วางไฟล์ favicon.ico ที่มีภาพขนาด 16, 32 และ 48 พิกเซล ไว้ที่รากของเว็บไซต์ สำหรับแท็บเบราว์เซอร์และ Windows เพิ่มไอคอน Apple touch ขนาด 180 พิกเซล สำหรับหน้าจอหลักของ iPhone และ iPad และไอคอน PNG ขนาด 192 และ 512 พิกเซล ที่ระบุไว้ในไฟล์ web app manifest เครื่องมือ สร้างไอคอนเว็บไซต์ (favicon) จะสร้างไฟล์ทั้งหมดจากโลโก้เพียงภาพเดียว และเขียนบรรทัด HTML ให้คุณนำไปวางในหน้าเว็บได้เลย

ไฟล์และขนาดของแต่ละไฟล์

ไฟล์ ZIP ที่เครื่องมือดาวน์โหลดให้มีไฟล์ทั้งหมดเจ็ดไฟล์ ไฟล์ favicon.ico สร้างจากภาพ PNG สามภาพ ขนาด 16, 32 และ 48 พิกเซล เก็บรวมอยู่ในไฟล์เดียว ไอคอนแต่ละขนาดเป็นโลโก้เดียวกันที่วาดให้เล็กลง เครื่องมือทำงานจากเวอร์ชันรูปภาพขนาด 512 พิกเซลของคุณ แล้วสร้างแต่ละขนาดจากภาพนั้น

บรรทัด HTML

เครื่องมือเขียนบรรทัดสี่บรรทัดสำหรับส่วนหัว (head) ของหน้าเว็บ:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

บรรทัดแรกชี้ไปยัง favicon.ico และระบุขนาดเป็น 48 คูณ 48 บรรทัดที่สองคือไฟล์ PNG ขนาด 32 พิกเซล บรรทัดที่สามระบุไอคอน Apple touch และบรรทัดที่สี่ชี้ไปยัง manifest ซึ่งมีรายการไอคอนขนาด 192 และ 512 พิกเซล ไฟล์ PNG ขนาด 16 พิกเซลอยู่ใน ZIP แต่ไม่ได้อยู่ในบรรทัดเหล่านี้ เบราว์เซอร์ยังค้นหา /favicon.ico ได้เองด้วย ดังนั้นไฟล์ยังถูกพบแม้บรรทัดแรกหายไป ให้คงเส้นทางไว้ตามที่เขียน เว้นแต่ไฟล์ของคุณจะอยู่ในตำแหน่งอื่น

ทำไมขนาดเล็กต้องใช้รูปทรงเรียบง่าย

ไอคอนขนาด 16 คูณ 16 พิกเซลมีทั้งหมด 256 พิกเซล ไอคอนขนาด 48 พิกเซลมี 2,304 พิกเซล และภาต้นฉบับขนาด 512 พิกเซลมี 262,144 พิกเซล รายละเอียดส่วนใหญ่ของโลโก้จะหายไปเมื่อย่อถึง 16 พิกเซล ทำให้เส้นบางหรือคำเล็กๆ กลายเป็นภาพเบลอ ควรใช้เครื่องหมายเรียบง่าย หรือตัวอักษรหนึ่งถึงสองตัวที่มีความต่างของสีชัดเจน

ตัวเลือกตัวอักษรรับอักขระหนึ่งถึงสองตัว และวาดให้ใหญ่อยู่กลางไอคอน หากกว้างเกินไปก็จะย่อให้พอดี รูปทรงมีให้เลือกสามแบบคือ Square, Rounded และ Circle ส่วนตัวอย่างจะแสดงผลลัพธ์ขนาด 16, 32, 48, 180 และ 512 พิกเซลเคียงกัน พร้อมแท็บพื้นสว่างและพื้นมืด เพื่อให้คุณประเมินขนาดเล็กได้ก่อนดาวน์โหลด ตัวอย่างจะอัปเดตทันทีเมื่อคุณเปลี่ยนรูปทรง ระยะขอบ หรือพื้นหลัง จึงลองแต่ละการตั้งค่าได้ก่อน

ระยะขอบ พื้นหลัง และไอคอน Apple

ระยะขอบมีสามค่าคือ No padding, Small และ Large โดย Small เว้นพื้นที่ว่าง 10 เปอร์เซ็นต์ที่แต่ละด้าน และ Large เว้น 20 เปอร์เซ็นต์ ในโหมดรูปภาพ No padding จะครอปรูปให้เหลือเฉพาะสี่เหลี่ยมจัตุรัสตรงกลาง ทำให้ปลายของโลโก้ที่กว้างหายไป ค่าที่มีระยะขอบจะจัดให้ทั้งภาพอยู่ในกรอบสี่เหลี่ยมแทน

ตัวเลือกพื้นหลังมี Transparent, White และ Custom โดยค่าเริ่มต้นคือ Transparent ไอคอน Apple touch จะทึบแสงเสมอ ในโหมดรูปภาพ ส่วนโปร่งใสจะใช้พื้นหลังที่เลือก หรือสีขาวหากพื้นหลังเป็น Transparent ในโหมดตัวอักษรจะใช้สีพื้นหลังของตัวอักษร ส่วนโปร่งใสในไอคอน Apple touch อาจแสดงเป็นสีดำบน iPhone และ iPad เครื่องมือจึงเติมสีให้ส่วนนั้น ไอคอนขนาดอื่นยังคงความโปร่งใสตามที่คุณเลือก ทำไม PNG โปร่งใสถึงกลายเป็นพื้นหลังดำ อธิบายสาเหตุไว้

favicon เป็นรูปสี่เหลี่ยมจัตุรัส ดังนั้นโลโก้ที่กว้างต้องทำกรอบจัตุรัสก่อน เครื่องมือทำรูปสี่เหลี่ยมจัตุรัส จะจัดทั้งภาพให้อยู่ในกรอบอัตราส่วน 1:1 พร้อมขอบเบลอ ขาว ดำ หรือกำหนดเองได้ จึงไม่มีส่วนใดถูกตัดออก ปรับขนาดรูปภาพ กำหนดพิกเซลที่แน่นอนได้ เมื่อเปิด Keep proportions และกรอกทั้งสองด้าน ภาพจะพอดีในกรอบโดยไม่บิดเบี้ยว อัตราส่วนภาพถ่ายอธิบายไว้แล้ว ครอบคลุมรูปทรงที่พบบ่อย

การเปลี่ยนแปลงที่ใช้เวลาแสดงผล

เบราว์เซอร์เก็บ favicon ไว้ในแคช ไฟล์ที่เปลี่ยนแต่ใช้ที่อยู่เดิมอาจยังแสดงไอคอนเก่าอยู่ช่วงหนึ่ง การรีโหลดธรรมดามักไม่พอ ให้เปิดที่อยู่ของไอคอนโดยตรงเพื่อยืนยันว่าไฟล์ใหม่ถูกอัปโหลดขึ้นเซิร์ฟเวอร์แล้ว จากนั้นรีโหลดหน้าเว็บโดยข้ามแคช หากยังเห็นไอคอนเก่า ให้ตั้งชื่อไฟล์ใหม่ให้ต่างออกไป แล้วแก้ลิงก์ให้ชี้ไปยังไฟล์นั้น

วิธีใช้งานกับ fixmint

1. เลือก Image แล้วลากโลโก้มาวางในกล่อง หรือเลือก Letter แล้วพิมพ์อักขระหนึ่งถึงสองตัว
2. ตั้ง Padding เป็น None, Small หรือ Large และตั้ง Background เป็น Transparent, White หรือ Custom colour
3. ตรวจไอคอนขนาด 16, 32 และ 48 px บนแท็บพื้นสว่างและพื้นมืด รวมถึงตัวอย่างขนาด 180 และ 512 px
4. กด Download ZIP เพื่อรับไฟล์ทั้งเจ็ดไฟล์ หรือกด Download favicon.ico เพื่อรับเฉพาะไฟล์นั้น
5. กด Copy HTML แล้ววางบรรทัดจาก HTML for your head ลงในส่วนหัวของทุกหน้า

กรณีพิเศษ

• รูปของคุณอยู่บนอุปกรณ์ของคุณเท่านั้น เครื่องมือสร้างไอคอนในเบราว์เซอร์ของคุณ และไม่มีการอัปโหลดใดๆ
• ตัวอักษรสองตัว ระบบรับอักขระสองตัวได้ และจะวาดให้เล็กลงเพื่อให้พอดีกัน ซึ่งทำให้อ่านยากกว่าตัวอักษรตัวเดียวเมื่ออยู่ขนาด 16 พิกเซล
• ชื่อไฟล์ ให้ใช้ชื่อเดียวกับที่ HTML อ้างถึง เพราะลิงก์ชี้ไปยังชื่อเหล่านั้น
• ไฟล์ที่อ่านไม่ได้ หากไม่สามารถแปลงรูปภาพเป็นไอคอนได้ เครื่องมือจะแสดงข้อความ "Could not make the icons from this input. Try another image." และล้างผลลัพธ์ ลองใช้ไฟล์อื่น หรือบันทึกรูปใหม่ในรูปแบบที่พบบ่อย