ขนาด Favicon: ขนาดไหนที่คุณต้องใช้จริงๆ ในปี 2025

ค้นหา "favicon size" แล้วคุณจะได้เห็นตัวเลขที่ขัดแย้งกันมากมาย: 16x16, 32x32, 48x48, 64, 180, 192, 256, 512 รายชื่อส่วนใหญ่เหล่านั้นเขียนขึ้นเมื่อสิบปีที่แล้วและไม่เคยอัปเดต ในทางปฏิบัติ เว็บไซต์สมัยใหม่ต้องการไฟล์ประมาณสี่ไฟล์ และคุณสามารถทำทั้งหมดได้ในครั้งเดียวด้วย favicon generator ซึ่งทำงานทั้งหมดในเบราว์เซอร์ของคุณ ดังนั้นโลโก้ของคุณจึงไม่ออกจากเครื่องของคุณ

ต่อไปนี้คือสิ่งที่ขนาดแต่ละขนาดใช้สำหรับ และสิ่งที่คุณสามารถข้ามได้อย่างปลอดภัย

ขนาดที่ยังคงสำคัญ

16x16 และ 32x32 — แท็บเบราว์เซอร์และบุ๊กมาร์ก

นี่คือ favicon แบบคลาสสิก 16x16 คือสิ่งที่คุณเห็นในแถบแท็บที่เต็มไปด้วย 32x32 ใช้บนหน้าจอ high-DPI แถบบุ๊กมาร์ก และ UI แถบที่อยู่บางส่วน แอตทริบิวต์ทั้งสองมักจะรวมกันในไฟล์ favicon.ico เดียว ซึ่งสามารถแนบความละเอียดหลายระดับได้พร้อมกัน Windows ยังดึง 48x48 จากไฟล์ .ico เดียวกันสำหรับทางลัดเดสก์ทอป ดังนั้นการรวมไฟล์นั้นจึงไม่ต้องเสียค่าใจมากนัก

180x180 — Apple touch icon

เมื่อใครสักคนแตะ "Add to Home Screen" บน iPhone หรือ iPad Safari จะมองหา apple-touch-icon.png ที่ 180x180 หากไม่มี iOS จะหน้าจอชัตเตอร์หน้าของคุณและใช้แทน ซึ่งดูเลวร้าย PNG เดียวนี้ครอบคลุมทุกอุปกรณ์ iOS ปัจจุบันเพราะระบบจะลดขนาดลงตามต้องการ

192x192 และ 512x512 — Android และ PWAs

Android Chrome และเว็บแอปที่ติดตั้งได้อ่านไอคอนจาก site.webmanifest ของคุณ 192 คือไอคอนโฮมสกรีน 512 ใช้สำหรับหน้าจอสเปลช และรายชื่อแอป หากคุณต้องการให้เว็บไซต์ของคุณติดตั้งได้ในวันใดวันหนึ่ง คุณต้องใช้ทั้งสองอย่าง

SVG — ตัวเลือก แต่ดี

Firefox และ Chrome ทั้งคู่รองรับ favicon SVG ซึ่งยังคงคมชัดในที่ใดก็ได้และสามารถตอบสนองต่อโหมดมืดด้วย media query ภายในไฟล์ได้ มันเป็นโบนัส ไม่ใช่การแทนที่ Safari และเบราว์เซอร์เก่ายังคงต้องการเวอร์ชัน raster

สิ่งที่คุณสามารถข้าม

64x64, 96x96, 128x128, ชุดภาพ Windows tile ทั้งหมด และโหลกำหนดไฟล์ apple-touch-icon-76x76 ลักษณะนั้นสิ่งเหล่านี้ได้รับความจำเป็นสำหรับอุปกรณ์ที่หายไปในส่วนใหญ่แล้ว การจัดส่งไฟล์ไอคอนยี่สิบไฟล์จะทำให้ repo ของคุณบวมและไม่ได้รับเกนอะไรที่วัดได้

HTML

วางไฟล์ไว้ในรูทของเว็บไซต์และเพิ่มสิ่งนี้ไปยัง <head>:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

และในแมนิเฟสต์:

"icons": [
  { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
  { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]

การออกแบบสำหรับ 16 พิกเซล

ส่วนที่ยากไม่ใช่การส่งออก แต่คือโลโก้เต็มรูปแบบกลายเป็นโคลนที่ 16x16 สิ่งบางอย่างที่ช่วย:

• ใช้ส่วนย่อย ไม่ใช่โลโก้ทั้งหมด ตัวอักษรหนึ่ง อักษรสัญลักษณ์หนึ่ง รูปทรงหนึ่ง Wordmarks อ่านไม่ได้ที่ขนาดแท็บ
• เริ่มต้นสี่เหลี่ยมจัตุรัส หากแหล่งที่มาของคุณเป็นโลโก้ที่กว้าง ตัดเป็นสี่เหลี่ยมจัตุรัส ก่อนเพื่อให้เครื่องกำเนิดไฟฟ้าไม่ได้ตัดมันด้วยช่องว่างว่าง
• รักษาความเปรียบต่อให้สูง เส้นบาง ๆ หายไป รูปทรงแข็งอยู่รอด
• ตัดสินใจเลือกพื้นหลัง PNG ที่มีความโปร่งใส ปรับตัวให้เข้ากับโครมเบราว์เซอร์สว่างและมืด หากเครื่องหมายของคุณมีสีเข้ม ให้พิจารณาให้มันเป็นกระเบื้องสีทึบแทน คุณสามารถ ลบพื้นหลัง จากภาพหน้าจอโลโก้ได้ในเวลาไม่กี่วินาทีหากคุณมีเพียง JPG แบบเรียบเท่านั้น
• จำพื้นที่ปลอดภัย Android มาสกไอคอนเป็นวงกลมและสควิร์คเคิลส ดังนั้นให้ช่องว่างประมาณ 10% รอบขอบของงาน 512 ของคุณ

หากคุณจับคู่พื้นหลังของ favicon กับสีแบรนด์ของเว็บไซต์ของคุณ image color picker จะดึง hex ที่แน่นอนจากภาพหน้าจอที่มีอยู่ ซึ่งมีประโยชน์สำหรับแท็ก theme-color meta ด้วย

สร้างชุดทั้งหมดพร้อมกัน

ไม่ต้องอัปโหลดอะไร: วาง PNG หรือ SVG สี่เหลี่ยมจัตุรัสลงใน free browser-based favicon generator และมันจะสร้าง .ico ไอคอน Apple touch และ PNG 192/512 ในเครื่อง ในแท็บของคุณเอง ไม่มีอะไรถูกส่งไปยังเซิร์ฟเวอร์ ไม่มีการลงชื่อสมัครสมาชิก และไม่มีสำเนาของโลโก้ที่ยังไม่เปิดตัวของคุณสิ้นสุดในถังเก็บข้อมูลของบุคคลอื่น

จากนั้นซูมเบราว์เซอร์ของคุณออก มองไปที่แท็บ และถามคำถามเดียวที่สำคัญ: คุณบอกได้ไหมว่ามันคืออะไร?