ขนาด Favicon ที่ดีที่สุดในปี 2026
ไม่มีขนาด favicon ที่ดีที่สุดเพียงขนาดเดียว — มีชุดที่ดีที่สุดอยู่ พื้นผิวที่แตกต่างกันร้องขอความละเอียดที่แตกต่างกัน: แท็บเบราว์เซอร์ บุ๊กมาร์ก Windows explorer หน้าจอหลัก iOS และข้อความแจ้งการติดตั้ง Android PWA แต่ละรายการต้องมีขนาดพิกเซลที่แตกต่างกัน เริ่มต้นจากแหล่งขนาด 512×512 และใช้ favicon generator คุณสามารถสร้างทุกขนาดที่ต้องการได้ในรอบเดียว ดูคำแนะนำ favicon sizes explained สำหรับแผนที่แบบพื้นผิวต่อพื้นผิวของทุกความละเอียด
แท็บเบราว์เซอร์บนจอแสดงผลความหนาแน่นมาตรฐานใช้ 16×16 พิกเซล นี่คือขนาด favicon ที่เล็กที่สุดและเป็นขนาดที่ผู้ใช้เห็นบ่อยที่สุด — โดยจะอยู่ในแท็บเล็กๆ เหนือเนื้อหาของหน้าตลอดเวลา ไอคอน 16×16 ที่สามารถอ่านได้ง่ายต้องใช้รูปร่างหนา คอนทราสต์สูง และไม่มีรายละเอียดปลีกย่อย เส้นบาง ข้อความขนาดเล็ก และโลโก้ที่สลับซับซ้อนจะกลายเป็นจุดเล็กๆ ที่อ่านไม่ออกในขนาดนี้
ขนาด 32×32 พิกเซลเป็นมิติไอคอน Fav ที่สำคัญที่สุดสำหรับเบราว์เซอร์สมัยใหม่ ใช้สำหรับแท็บเบราว์เซอร์บนจอแสดงผล Retina/HiDPI (แสดงผลที่ความหนาแน่น 2x จากขนาดลอจิคัล 16px) สำหรับแถบบุ๊กมาร์ก และสำหรับไอคอนคำแนะนำแถบที่อยู่ Chrome ขอ 32×32 อย่างเข้มงวดที่สุด และ Google Search ใช้ไอคอนอย่างน้อย 32×32 สำหรับไอคอน Fav ของผลการค้นหา
ขนาดพิกเซล 48×48 ทำหน้าที่ Windows Explorer ในมุมมอง 'ไอคอนขนาดกลาง' และเครื่องมือค้นหาบางตัวใช้สำหรับภาพขนาดย่อของผลลัพธ์ คำแนะนำอย่างเป็นทางการของ Google สำหรับการมีสิทธิ์ไอคอนไอคอนการค้นหาคือขั้นต่ำ 48×48 พิกเซล อัตราส่วนภาพสี่เหลี่ยมจัตุรัส และการเข้าถึงแบบสาธารณะผ่าน HTTP รวมขนาด 48×48 ไว้ในไฟล์ .ico หลายขนาดของคุณเสมอเพื่อให้เป็นไปตามข้อกำหนดนี้
ขนาด 64×64 พิกเซลมีประโยชน์ใน Windows Explorer ในมุมมองไอคอนขนาดใหญ่และสำหรับสภาพแวดล้อมตัวเรียกใช้งานแอปบางตัว การรวมไว้ในไฟล์ .ico ของคุณจะเพิ่มขนาดไฟล์ที่เล็กที่สุดและรับประกันความครอบคลุมสำหรับพื้นผิวใดๆ ที่ขอขนาดระหว่าง 48 ถึง 128 พิกเซล ตัวสร้าง .ico หลายขนาดส่วนใหญ่จะรวม 64 ไว้ตามค่าเริ่มต้น
ขนาด 128×128 และ 256×256 พิกเซลถูกใช้ภายในไฟล์ .ico สำหรับไทล์เมนูเริ่ม Windows และทางลัดที่มีความละเอียดสูง ที่ 256×256 คุณควรใช้การบีบอัด PNG ภายใน .ico แทนการเข้ารหัส BMP — รายการ BMP ที่ไม่มีการบีบอัด 256×256 เพียงอย่างเดียวจะเพิ่มประมาณ 256 KB ลงในไฟล์ .ico ในขณะที่ PNG ที่บีบอัดจะย่อขนาดลงเหลือน้อยกว่า 30 KB
ขนาด 180×180 พิกเซลคือมิติ apple-touch-icon ที่ใช้โดย iOS เมื่อผู้ใช้แตะ "เพิ่มไปยังหน้าจอหลัก" บน Safari iOS จะดึงข้อมูล `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>` และใช้รูปภาพนั้นเป็นไอคอนบนหน้าจอหลัก หากไม่มีสิ่งนี้ iOS จะกลับไปใช้ภาพหน้าจอคุณภาพต่ำของหน้าเว็บของคุณ นี่เป็นขนาดที่มีลำดับความสำคัญสูงสุดเพียงขนาดเดียวสำหรับไซต์ที่เน้นอุปกรณ์เคลื่อนที่เป็นอันดับแรก
จำเป็นต้องมีขนาด 192×192 พิกเซลในรายการแอปพลิเคชันเว็บ (site.webmanifest) สำหรับพร้อมท์การติดตั้ง PWA ของ Android Chrome เมื่อผู้ใช้เพิ่มไซต์ของคุณลงในหน้าจอหลักของ Android ของตน Chrome จะอ่านไฟล์ Manifest และใช้ไอคอน 192×192 สำหรับเครื่องเรียกใช้งานแอปและหน้าต่างแจ้งเตือน ไอคอนจะต้องเป็นรูปสี่เหลี่ยมจัตุรัส รูปแบบ PNG และสามารถเข้าถึงได้จาก URL ที่ประกาศไว้
ขนาด 512×512 พิกเซลเป็นไอคอนรายการที่จำเป็นอื่นๆ ซึ่งใช้สำหรับหน้าจอเริ่มต้น PWA ที่ปรากฏในขณะที่แอปกำลังโหลดหลังจากเปิดหน้าจอหลัก และสำหรับตัวอย่างการติดตั้งระบบปฏิบัติการ Chrome นอกจากนี้ยังเป็นขนาดรูปภาพต้นฉบับที่แนะนำเมื่อสร้างขนาดอื่นๆ ทั้งหมด โดยเริ่มต้นที่ 512×512 ช่วยให้มั่นใจได้ว่าตัวแปรที่สุ่มตัวอย่างทุกตัวจะยังคงมีขอบที่คมชัด
การตั้งค่าไอคอน Fav ขั้นต่ำที่ใช้งานได้ซึ่งครอบคลุมผู้ใช้แทบทุกคนคือ: favicon.ico หลายขนาดที่มีเฟรม 16, 32, 48 และ 64 พิกเซล บวกกับ 180×180 apple-touch-icon.png และ site.webmanifest ที่มีรายการ 192×192 และ 512×512 PNG ชุดค่าผสมนี้รองรับเบราว์เซอร์มาตรฐาน บุ๊กมาร์ก การติดตั้งหน้าจอหลัก iOS และการติดตั้ง Android PWA
การเพิ่ม favicon SVG ควบคู่ไปกับ .ico และ PNG จะทำให้ไอคอนของคุณรองรับอนาคต SVG เรนเดอร์ที่ความหนาแน่นเท่าใดก็ได้ — ไฟล์เดียวรองรับจอภาพ 96dpi, จอแสดงผล 4K และอะไรก็ได้ที่อยู่ระหว่างนั้น — และสามารถเปลี่ยนสีได้ตามความต้องการโทนสีของผู้ใช้ Chrome, Edge, Firefox และ Safari 15+ ทั้งหมดรองรับไอคอน Fav ของ SVG ในปี 2026 ทำให้เป็นส่วนเสริมที่ปลอดภัย
ข้อผิดพลาดทั่วไปในการกำหนดขนาด favicon ได้แก่: การใช้เพียง 32×32 PNG โดยไม่มี .ico (ใช้งานไม่ได้ในเบราว์เซอร์รุ่นเก่าและทางลัด Windows) การข้าม 180 apple-touch-icon (ใช้งานไม่ได้ในการติดตั้ง iOS) และละเว้น 512×512 จากรายการ (พร้อมท์การติดตั้ง Android จะแสดงไอคอนทั่วไป) favicon generator สร้างชุดที่สมบูรณ์โดยอัตโนมัติจากอิมเมจต้นฉบับเดียว ซึ่งช่วยขจัดช่องว่างเหล่านี้ทั้งหมด
ผลกระทบ SEO ของขนาด favicon นั้นเป็นทางอ้อมแต่มีอยู่จริง Google Search จะแสดงไอคอน Fav ถัดจากผลการค้นหาและใช้ข้อกำหนดขนาดขั้นต่ำ 48×48 พิกเซล เว็บไซต์ที่ไม่มีไอคอน Fav ในขนาดที่เหมาะสมและเข้าถึงได้แบบสาธารณะอาจเห็นไอคอนลูกโลกทั่วไปในผลการค้นหาแทนที่จะเป็นเครื่องหมายแบรนด์ ซึ่งเป็นสัญญาณความแตกต่างเล็กน้อยแต่เห็นได้ชัดเจนสำหรับการคลิกจากการค้นหาทั่วไป
เพื่อความสมบูรณ์ของไอคอนระดับ PWA ให้เพิ่มไอคอนที่ปกปิดได้ในรายการเว็บของคุณ ไอคอนที่มาสก์ได้จะมีช่องว่างภายในโซนปลอดภัยประมาณ 10% ในทุกด้าน เพื่อให้มั่นใจว่าเมื่อ Android ใช้มาสก์ทรงกลมหรือวงกลมกับไอคอน โลโก้หลักจะไม่ถูกตัดออก สร้างเวอร์ชันที่ปกปิดได้แยกต่างหากโดยใช้ตัวเลือกการส่งออกที่ปกปิดได้ของตัวสร้าง และประกาศด้วย `'purpose': 'maskable'` ในอาร์เรย์ไอคอนรายการ
เมื่อเลือกอิมเมจต้นฉบับสำหรับการสร้างไอคอน Fav ให้จัดลำดับความสำคัญของ SVG มากกว่า PNG และ PNG มากกว่า JPG SVG ให้เอาต์พุตที่คมชัดที่สุดในทุกขนาด PNG-32 (พร้อมอัลฟ่า) จะรักษาความโปร่งใส JPG ขาดการสนับสนุนที่โปร่งใสและทำให้เกิดการบีบอัดข้อมูลที่ปรากฏมีขนาดเล็ก ดูคู่มือ best favicon format สำหรับการเปรียบเทียบรูปแบบเต็ม
วิธีการทำงาน
- 1
เตรียมแหล่งสี่เหลี่ยมขนาด 512×512
ส่งออกโลโก้ของคุณเป็น 512×512 PNG โดยมีพื้นหลังโปร่งใส หรือเป็น SVG ที่มีสี่เหลี่ยมจัตุรัส viewBox ลดความซับซ้อนของรายละเอียดเล็กๆ น้อยๆ ที่จะมองไม่เห็นที่ขนาด 16×16
- 2
สร้างชุดขนาดที่สมบูรณ์
อัปโหลดไปที่ [favicon generator](tool:favicon-generator) สร้าง: favicon.ico (16/32/48/64), favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png และ site.webmanifest
- 3
ปรับใช้ไฟล์ทั้งหมดไปที่รูทไซต์ของคุณ
คัดลอกทุกไฟล์จากแพ็คเกจตัวสร้างไปยัง /public หรือไดเรกทอรีรากของไซต์ ไฟล์ทั้งหมดต้องสามารถเข้าถึงได้ตามเส้นทางที่เกี่ยวข้อง (เช่น https://yourdomain.com/favicon.ico)
- 4
เพิ่มแท็กลิงก์ HTML
วางข้อมูลโค้ด HTML ที่สร้างขึ้นลงใน `<head>` ของคุณ บรรทัดทั้งหกประกอบด้วย: .ico fallback, ตัวแปร SVG, apple-touch-icon และลิงก์รายการ
- 5
ตรวจสอบทุกขนาดกับผู้ทดสอบ
ใช้ [favicon tester](utility:favicon-tester) เพื่อตรวจสอบว่าทุก URL แก้ไขได้อย่างถูกต้อง และไอคอนแสดงผลคมชัดที่ 16, 32, 48 และ 512 พิกเซล
ลองเลย
สร้างทุกขนาด favicon ในคราวเดียว
เครื่องมือสร้าง Faviconคำถามที่พบบ่อย
ขนาด favicon ที่สำคัญที่สุดขนาดเดียวคืออะไร?+
32×32 พิกเซล นี่คือสิ่งที่ Chrome และเบราว์เซอร์สมัยใหม่ส่วนใหญ่ขอแท็บบนจอแสดงผลมาตรฐานและจอเรตินา จัดส่งทั้งในรูปแบบ .ico หลายขนาดและเป็น PNG แบบสแตนด์อโลนพร้อมแท็กลิงก์ที่ตรงกัน
ฉันจำเป็นต้องมี favicon ขนาด 512×512 จริงๆ หรือไม่+
ใช่ ด้วยเหตุผลสองประการ ขั้นแรก จำเป็นต้องมีในรายการแอปพลิเคชันเว็บสำหรับข้อความแจ้งการติดตั้งและหน้าจอเริ่มต้นของ Android PWA ประการที่สอง เป็นความละเอียดของแหล่งที่มาในอุดมคติสำหรับการสร้างขนาดที่เล็กลงทั้งหมดโดยไม่สูญเสียคุณภาพ
Google Search ใช้ไอคอน Fav ขนาดใด+
Google กำหนดให้มีขนาดอย่างน้อย 48×48 พิกเซล อัตราส่วนสี่เหลี่ยมจัตุรัส และ URL ที่สาธารณะเข้าถึงได้ รวม 48×48 ไว้ในไฟล์ .ico ของคุณ และเชื่อมโยงกับแท็ก PNG แบบสแตนด์อโลนเพื่อความครอบคลุมที่ดีที่สุด ไอคอน Fav ที่ถูกต้องช่วยให้แบรนด์ของคุณปรากฏในตัวอย่างผลการค้นหาที่หลากหลาย
apple-touch-icon เหมือนกับ favicon หรือไม่+
ไม่ favicon (favicon.ico) ถูกใช้โดยเบราว์เซอร์สำหรับแท็บและบุ๊กมาร์ก apple-touch-icon เป็น 180×180 PNG แยกต่างหาก ซึ่งใช้โดย iOS โดยเฉพาะสำหรับไอคอนบนหน้าจอหลัก คุณต้องมีทั้งสองไฟล์เพื่อให้ครอบคลุมโดยสมบูรณ์
ฉันสามารถใช้รูปภาพขนาดใหญ่รูปเดียวและข้ามการสร้างขนาดที่เล็กลงได้หรือไม่+
เฉพาะในกรณีที่เว็บไซต์ของคุณไม่แสดงไอคอน Fav ในแท็บ เบราว์เซอร์ต้องมีขนาด 16 หรือ 32 พิกเซลสำหรับแท็บ การเชื่อมโยงเฉพาะ 512×512 PNG จะบังคับให้เบราว์เซอร์ลดขนาดตัวอย่างแบบเรียลไทม์ ซึ่งอาจทำให้เกิดปัญหาด้านประสิทธิภาพของเลย์เอาต์และการแสดงผลที่ไม่สอดคล้องกันของเบราว์เซอร์ สร้าง .ico หลายขนาดที่เหมาะสมเสมอ
ฉันควรจัดลำดับความสำคัญขนาดใดสำหรับไซต์ใหม่ที่เปิดตัวตอนนี้+
ตามลำดับ: 32×32 (แท็บ), 180×180 (iOS), 192×192 (Android PWA), 512×512 (สแปลช/แหล่งที่มา) [favicon generator](tool:favicon-generator) สร้างทั้งสี่รายการ รวมถึง .ico, SVG และรายการในการดาวน์โหลดครั้งเดียว
ขนาดไอคอน Fav ส่งผลต่อความเร็วในการโหลดหน้าหรือไม่+
น้อยที่สุด. favicon.ico หลายขนาดที่ได้รับการบีบอัดอย่างดี โดยทั่วไปจะมีขนาด 10-30 KB เบราว์เซอร์ดึงข้อมูลเพียงครั้งเดียวและแคชตามต้นทาง การใช้ขนาดที่ถูกต้องจะป้องกันไม่ให้เบราว์เซอร์โหลดรูปภาพขนาดใหญ่พิเศษและลดขนาดรูปภาพเหล่านั้นลงในขณะเรนเดอร์ ซึ่งมีต้นทุน CPU เพียงเล็กน้อยแต่มีอยู่จริง