ขนาด Favicon ที่ดีที่สุดสำหรับเว็บไซต์

favicon ถูกปรับขนาดเป็นพิกเซลจริงจำนวนมาก: 16×16 ในแท็บ, 32×32 บนแถบบุ๊กมาร์ก Retina, 180×180 บนหน้าจอหลักของ iPhone, 512×512 บนหน้าจอเริ่มต้น PWA ภาพเดียวไม่สามารถให้บริการทั้งหมดได้ดี

การขยายขนาดแหล่งสัญญาณเล็กๆ จะทำให้เกิดภาพเบลอ การลดขนาดรายละเอียด 1024×1024 โดยไม่มีการทดสอบจะสูญเสียเส้นละเอียด การแก้ไขคือชุดการส่งออกที่สร้างขึ้นตามวัตถุประสงค์ชุดเล็กๆ หรือ .ico หลายขนาดหนึ่งชุดที่ฝังเฟรมเดสก์ท็อปทั่วไปไว้

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

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

โดยทั่วไปแท็บเดสก์ท็อปจะแสดงไอคอนพิกเซลขนาด 16×16 CSS ซึ่งจับคู่กับพิกเซลของอุปกรณ์ขนาด 16×16 หรือ 32×32 ขึ้นอยู่กับความหนาแน่นของจอแสดงผล

แถบบุ๊กมาร์กและแท็บที่ปักหมุดมักใช้ขนาด 32×32 หรือ 48×48 Chromium อาจเลือกเฟรมที่ฝังไว้ที่ใกล้ที่สุดจาก favicon.ico โดยอัตโนมัติ

ขนาดแท็บทั่วไปทั้งสามขนาด (16, 32, 48) ใส่ได้พอดีใน .ico หลายขนาดขนาดเดียว นั่นคือสาเหตุที่คอนเทนเนอร์ .ico ยังคงเป็นรูปแบบการนำส่งเดสก์ท็อปที่มีประสิทธิภาพสูงสุด

Windows เมนูเริ่ม หมุดแถบงาน และทางลัด File Explorer อาจขอ 24×24, 32×32, 48×48, 64×64, 128×128 หรือ 256×256 ขึ้นอยู่กับบริบทและขนาดการแสดงผล

Microsoft เอกสาร 16, 24, 32, 48, 64, 128 และ 256 เป็นชุดที่ใช้งานได้จริงสำหรับแอป Windows Web favicons ได้รับประโยชน์จากการรวมกลุ่มอย่างน้อย 16 ถึง 256 ใน favicon.ico

macOS ชอบ .icns สำหรับแอปแบบเนทีฟ แต่มีความสุขที่จะใช้ .ico และ PNG สำหรับทางลัดของเว็บ iOS ละเว้น .ico สำหรับไอคอนบนหน้าจอหลัก และต้องการเฉพาะ 180×180 PNG ผ่านทาง apple-touch-icon

ไฟล์ Manifest ของเว็บแอปจำเป็นต้องมีไอคอนที่มีวัตถุประสงค์ใดๆ และอาจมาสก์ก็ได้ ขนาดทั่วไปคือ 192×192 และ 512×512 PNG

Android Chrome ใช้ไอคอนรายการสำหรับการติดตั้ง UI และหน้าจอสแปลช แหล่งสัญญาณขนาด 512 × 512 ลดขนาดลงอย่างหมดจด รายการขนาด 192 × 192 เท่านั้นดูนุ่มนวลบนโทรศัพท์ระดับไฮเอนด์

iOS ไม่อ่านไอคอนรายการสำหรับตำแหน่งบนหน้าจอหลัก คุณต้องประกาศ <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

16×16 — แท็บเบราว์เซอร์ (ความหนาแน่น 1×) 32×32 — แท็บและบุ๊กมาร์กบนจอแสดงผล Retina 48×48 — บางบริบทของ Windows UI และการใช้บุ๊กมาร์กแบบเดิม

64×64 และ 128×128 — ปุ่มลัด Windows ในขนาดที่สูงกว่า 256×256 — Windows ปักหมุดไทล์และแสดงตัวอย่าง DPI สูง

180×180 — ไอคอนแอปเปิ้ลทัช (iOS / iPadOS) 192×192 และ 512×512 — ไอคอน PWA ใน manifest สำหรับ Android และข้อความแจ้งการติดตั้ง

บล็อกส่วนตัว: favicon.ico กับ 16/32/48 เท่านั้น ยอมรับได้หากคุณไม่สนใจการขัดเงาหน้าจอหลัก iOS

ไซต์การตลาดของบริษัท: ชุด .ico บวกไอคอน apple-touch-touch 180×180 บวก 32×32 PNG <link> สำหรับแท็บ Retina ที่ชัดเจน

PWA ที่สามารถติดตั้งได้: .ico แบบเต็ม, ไอคอน apple-touch, รายการ 192 + 512, ตัวเลือก SVG สำหรับ Chrome UI ที่ปรับขนาดได้

แอปเดสก์ท็อป Electron: Windows .ico พร้อม 16–256; macOS .icns แยกต่างหากหากคุณเผยแพร่นอกเบราว์เซอร์

หลายขนาด favicon.ico (16, 32, 48, 64, 128, 256) ที่ /favicon.ico

apple-touch-icon.png ที่ 180×180 สำหรับหน้าจอหลัก iOS

หนึ่ง 512×512 PNG ใน site.webmanifest สำหรับบริบทที่ใช้งานการติดตั้ง Android

ทั้งสามนั้นครอบคลุมประมาณ 95% ของคำขอไอคอนในโลกแห่งความเป็นจริง เพิ่ม SVG เมื่อคุณต้องการปรับขนาดไม่สิ้นสุดและจัดสไตล์โหมดมืดในแท็บสมัยใหม่

ฉันจำเป็นต้องมี 16×16 PNG หรือไม่หากอยู่ภายใน .ico ไม่ เว้นแต่ว่าคุณต้องการ <link rel="icon" sizes="16x16"> ที่ชัดเจนสำหรับการดีบัก

ยังต้องใช้ 120×120 อยู่หรือเปล่า? นั่นคือขนาด iOS เก่า สมัยใหม่ Safari คาดว่าจะมี 180×180

แล้ว 64×64 favicon ล่ะ? มีประโยชน์ภายใน .ico สำหรับ Windows; ไม่ค่อยจำเป็นสำหรับ PNG แบบสแตนด์อโลน

ฉันสามารถข้าม 256×256 ได้หรือไม่ เฉพาะในกรณีที่คุณไม่สนใจการแสดงตัวอย่างทางลัด DPI สูงของ Windows ทีมส่วนใหญ่รวมไว้ด้วย

ไอคอน iOS มีมุมโค้งมนและมีลักษณะครอบตัด นั่นคือการมาสก์ iOS — ออกแบบโดยมีช่องว่างภายในที่ปลอดภัย ไม่ใช่จุดบกพร่องในไฟล์ของคุณ

การติดตั้ง PWA แสดงไอคอนทั่วไป: ไอคอนรายการหายไปหรือต่ำกว่าขนาดขั้นต่ำ 192×192 ตรวจสอบ JSON ด้วย Chrome DevTools → Application

ไอคอนแท็บแบบนุ่มนวลบน Retina Mac: ตรวจสอบให้แน่ใจว่า favicon.ico มีเฟรมขนาด 32×32 ไม่ใช่เพียง 16×16 เท่านั้น

ดาวน์โหลด .ico ขนาดใหญ่: คุณฝัง 256×256 BMP ที่ไม่มีการบีบอัด สร้างใหม่ด้วยการบีบอัด PNG ภายในคอนเทนเนอร์

พิกเซล CSS ไม่ใช่พิกเซลจริง ช่องแท็บ 16×16 บนจอแสดงผล 2× มักจะโหลดบิตแมป 32×32 เพื่อความคมชัด

นั่นคือเหตุผลที่ favicon.ico ที่มีทั้ง 16 และ 32 เฟรมมีประสิทธิภาพเหนือกว่า 16×16 PNG เดี่ยวบน Retina MacBooks และแล็ปท็อป DPI Windows สูง

Android PWA แสดงไอคอนรายการบนหน้าจอเริ่มต้นที่ความละเอียดของอุปกรณ์เต็มรูปแบบ - แหล่งที่มา 192×192 ที่ขยายไปจนถึงโทรศัพท์ 1440p ดูนุ่มนวล 512×512 ลดขนาดลงอย่างหมดจด

iOS ใช้มาสก์และรัศมีมุมของตัวเองกับเนื้อหาไอคอน Apple-touch การออกแบบที่มีช่องว่างภายในที่ปลอดภัย ขอบที่สำคัญจึงไม่ถูกตัดด้วยวงกลม

เมื่อทำการทดสอบ ให้จับภาพหน้าจอแท็บที่การซูมเบราว์เซอร์ 100% และที่ขนาดระบบปฏิบัติการ 200% หากทั้งสองดูคมชัด แสดงว่าเมทริกซ์ขนาดของคุณน่าจะถูกต้อง

ดาวน์โหลด favicon.ico และเปิดในเครื่องมือที่แสดงรายการเฟรมที่ฝังไว้ ยืนยันว่ามี 16, 32, 48 และเฟรมขนาดสูงอย่างน้อยหนึ่งเฟรม

ดึงข้อมูล apple-touch-icon.png และตรวจสอบขนาดในตัวตรวจสอบรูปภาพใดๆ — คาดว่าจะมีขนาด 180×180 ไม่ใช่ 120×120 จากเทมเพลตที่ล้าสมัย

เปิด site.webmanifest และยืนยันไอคอน[] รวมถึง 192×192 และ 512×512 พร้อมพาธและประเภทรูปภาพ/png ที่ถูกต้อง

โหลดไซต์ของคุณใน Chrome DevTools → Application → Manifest รายการที่หายไปหรือไม่ถูกต้องจะแสดงคำเตือนก่อนที่ผู้ใช้จะเห็นกล่องโต้ตอบการติดตั้งที่เสียหาย

เก็บสเปรดชีตที่แมปแต่ละไฟล์ให้กับผู้บริโภค (แท็บ iOS, PWA, Windows) ในอนาคต คุณจะไม่ต้องวิศวกรรมย้อนกลับโฟลเดอร์สินทรัพย์ในระหว่างการรีแบรนด์

คลาสอุปกรณ์ใหม่ปรากฏขึ้นอย่างช้าๆ ในดินแดน favicon ไอคอนรายการ 512 × 512 ในปัจจุบันครอบคลุม UI แบบพับได้และการติดตั้งแท็บเล็ตได้ดีกว่า 192 เพียงอย่างเดียว

หลีกเลี่ยงขนาดที่แปลกใหม่ (96×96, 120×120) เว้นแต่ว่าเอกสารแพลตฟอร์มเฉพาะจะยังคงกำหนดไว้ — สิ่งเหล่านี้เพิ่มภาระในการเขียนโดยไม่เกิดประโยชน์ในวงกว้าง

จัดเก็บเวกเตอร์หลักหรือแรสเตอร์ขนาด 1024×1024 ไว้ใน repo การออกแบบของคุณ แม้ว่าคุณจะไม่เคยจัดส่งเลยก็ตาม แพลตฟอร์มในอนาคตอาจขอไอคอนรายการที่มีขนาดใหญ่ขึ้น

สร้างใหม่โดยอัตโนมัติจากต้นแบบ ดังนั้นเมื่อขนาดใหม่ที่แนะนำปรากฏขึ้น คุณจะเรียกใช้สคริปต์อีกครั้งแทนการส่งออกด้วยมือใน Photoshop