ขนาด favicon: ต้องมีไฟล์อะไรบ้าง กี่พิกเซล

ทำไม favicon ถึงมีหลายไฟล์

Favicon คือไอคอนเล็กของเว็บไซต์ ปรากฏบนแท็บเบราว์เซอร์ รายการบุ๊กมาร์ก ผลค้นหา และหน้าจอหลักของมือถือ มันคือหน้าตาของเว็บ ถ้าไม่มีเว็บจะดูไม่เสร็จสมบูรณ์

ปัญหาคือแต่ละตำแหน่งต้องการขนาดและรูปแบบต่างกัน favicon จึงไม่ใช่ไฟล์เดียว แต่เป็นชุดไฟล์หลายขนาด

ชุดไฟล์ที่ต้องมี

• •favicon.ico — รวม 16, 32, 48px ไว้ในไฟล์เดียว ใช้กับแถบที่อยู่ แท็บ และบุ๊กมาร์ก เป็นมาตรฐานเก่าแก่ที่สุดและยังจำเป็นอยู่
• •PNG 16px และ 32px — เวอร์ชันคมชัดที่เบราว์เซอร์รุ่นใหม่ใช้บนแท็บ
• •apple-touch-icon 180px — ใช้เมื่อเพิ่มเว็บลงหน้าจอหลักของ iPhone หรือ iPad
• •PNG 192px และ 512px — สำหรับหน้าจอหลัก Android และการติดตั้ง PWA ลงทะเบียนใน site.webmanifest

เตรียมภาพต้นฉบับอย่างไร

วิธีที่ถูกคือเริ่มจากภาพสี่เหลี่ยมจัตุรัสขนาดใหญ่ (512px ขึ้นไป) แล้วย่อลง การขยายภาพเล็กมีแต่จะทำให้เบลอ

ไอคอนต้องดูออกแม้ที่ 16px ยิ่งเรียบง่ายยิ่งดี สัญลักษณ์เดียวดีกว่าโลโก้ที่มีตัวหนังสือเยอะ เว้นขอบเล็กน้อยจะได้ไม่ดูอึดอัดเมื่อย่อ และพื้นหลังโปร่งใสเข้าได้ทั้งธีมสว่างและมืด

ใส่ใน HTML อย่างไร

อัปโหลดไฟล์ไปที่โฟลเดอร์รากของเว็บ แล้วประกาศด้วยแท็ก link ใน head: rel="icon" สำหรับ ICO และ PNG, rel="apple-touch-icon" สำหรับไอคอน 180px และ rel="manifest" สำหรับ site.webmanifest

เผื่อไว้: เบราว์เซอร์ส่วนใหญ่หา favicon.ico ที่วางไว้ที่รากเว็บเจอเองแม้ไม่มีแท็ก แต่ถ้าอยากให้ PNG แต่ละขนาดและไอคอนหน้าจอหลักทำงานครบ ให้ใส่แท็กด้วย

อย่าประกอบชุดเองทีละไฟล์

การย่อภาพทีละขนาดแล้วแพ็กเป็น ICO เองนั้นเสียเวลา วางภาพเพียงหนึ่งภาพในตัวสร้าง favicon ของ Image Converter NOW ก็ได้ favicon.ico, PNG ทุกขนาด, site.webmanifest และแท็ก HTML พร้อมวาง รวมใน ZIP เดียว

ทุกอย่างประมวลผลในเบราว์เซอร์ — โลโก้ของคุณไม่ถูกอัปโหลดขึ้นเซิร์ฟเวอร์