อธิบายขนาด Favicon
เบราว์เซอร์ ระบบปฏิบัติการ และการติดตั้งอุปกรณ์เคลื่อนที่จะแจ้งให้แต่ละคำขอมีความละเอียดไอคอน Fav ที่แตกต่างกัน การทำความเข้าใจว่าทำไมแต่ละขนาดจึงช่วยให้คุณจัดส่งชุดขั้นต่ำที่ใช้งานได้โดยไม่ทิ้งพื้นที่ใดๆ ไว้โดยไม่รักษา คู่มือนี้แมปทุกขนาดพิกเซลทั่วไปตามวัตถุประสงค์ และอธิบายว่าแหล่งที่มาขนาด 512×512 เพียงแหล่งเดียวที่ประมวลผลผ่าน favicon generator ครอบคลุมทั้งหมดได้อย่างไร สำหรับคำแนะนำที่เป็นประโยชน์ โปรดดูที่ best favicon size guide ด้วย
For a longer walkthrough with FAQ and troubleshooting, see our step-by-step tutorial.
ไอคอนประจำเว็บไซต์ขนาด 16×16 พิกเซลเป็นมาตรฐานเว็บดั้งเดิม ใช้ในแท็บเบราว์เซอร์บนจอแสดงผลมาตรฐาน (96dpi) ในแถบเครื่องมือบุ๊กมาร์กบนเบราว์เซอร์เดสก์ท็อปทั้งหมด และในรายการประวัติเบราว์เซอร์บางรายการ เนื่องจาก 16×16 เป็นแคนวาสที่คับแคบมาก การออกแบบไอคอน Fav ของคุณจะต้องถูกตัดออกให้อยู่ในรูปแบบที่ง่ายที่สุด: รูปทรงเดียว ตัวอักษร หรือเครื่องหมายนามธรรม สิ่งที่ซับซ้อนกว่านี้จะอ่านไม่ออก
ขนาดพิกเซล 32×32 จะเพิ่มเป็นสองเท่าของ 16×16 และให้บริการแท็บเบราว์เซอร์เรติน่า/HiDPI ที่ความหนาแน่น 2 เท่า ไอคอนบุ๊กมาร์กที่ DPI สูง และไอคอนคำแนะนำแถบที่อยู่ใน Chrome เบราว์เซอร์สมัยใหม่ขอ 32×32 บ่อยกว่า 16×16 มาก เนื่องจากจอแสดงผลที่มีความหนาแน่นสูงกลายเป็นอุปกรณ์ส่วนใหญ่ หากคุณจัดส่งได้เพียงขนาดเดียว 32×32 จะเป็นตัวเลือกที่มีประสิทธิภาพมากที่สุด
ขนาดพิกเซล 48×48 คือขนาดมุมมอง "ไอคอนขนาดกลาง" ของ Windows Explorer และเป็นขนาดขั้นต่ำที่ Google Search กำหนดสำหรับการมีสิทธิ์ไอคอน Fav ในตัวอย่างผลการค้นหา ไซต์ที่มีไอคอน Fav ไม่ตรงตามขนาดขั้นต่ำ 48×48 จะปรากฏพร้อมกับไอคอนลูกโลกทั่วไปถัดจาก URL ในผลการค้นหาของ Google แทนที่จะเป็นเครื่องหมายแบรนด์ รวม 48×48 ไว้ในชุด .ico ของคุณเสมอ
ขนาด 64×64 พิกเซลใช้ในมุมมองไอคอนขนาดใหญ่ Windows Explorer และในสภาพแวดล้อมเดสก์ท็อป Linux บางตัว การรวมไว้ในไฟล์ .ico หลายขนาดของคุณจะเพิ่มค่าใช้จ่ายเล็กน้อย แต่รับประกันการเรนเดอร์ที่สะอาดในตัวจัดการไฟล์และสภาพแวดล้อมเชลล์ เครื่องมือสร้าง favicon จำนวนมากมี 64 เป็นค่าเริ่มต้นโดยเป็นส่วนหนึ่งของชุด .ico มาตรฐาน
ขนาด 128 × 128 พิกเซลให้บริการไทล์แอป Windows Store และภาพขนาดย่อของแถบงานที่มีความหนาแน่นสูง โดยปกติแล้วจะไม่ค่อยจำเป็นสำหรับไอคอนประจำเว็บ แต่มีความสำคัญหากเว็บไซต์ของคุณจัดแพ็กเกจเป็น PWA หรือหากผู้ใช้ปักหมุดเป็นแอป Windows การรวมไว้ใน .ico ด้วยการบีบอัด PNG ทำให้ขนาดไฟล์เหมาะสม
ขนาด 256×256 พิกเซลเป็นเฟรม .ico มาตรฐานที่ใหญ่ที่สุด ใช้สำหรับทางลัดบนเดสก์ท็อป Windows ผลการค้นหาเมนูเริ่ม Windows และบริบทที่ติดตั้งแอปบางส่วน ที่ความละเอียดนี้ คุณจะต้องใช้การบีบอัด PNG ภายในคอนเทนเนอร์ .ico แทนที่จะเป็น BMP — รูปภาพ BMP 256×256 ที่ไม่มีการบีบอัดจะเพิ่ม 256 KB ให้กับไฟล์ .ico โดยไม่จำเป็น
ขนาด 180×180 พิกเซลมีเฉพาะสำหรับ iOS apple-touch-icon เมื่อผู้ใช้ iPhone หรือ iPad แตะ "เพิ่มไปยังหน้าจอหลัก" Safari จะดึงภาพที่ประกาศใน `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>` ขนาดนี้ครอบคลุม iPhone รุ่นปัจจุบันทั้งหมด (iPhone 6 Plus และใหม่กว่าใช้ 180×180 ที่ความหนาแน่น 3 เท่า ส่วนรุ่นเก่าใช้ 120×120 และ 152×152 ไฟล์ 180 ไฟล์เดียวครอบคลุมทุกขนาดได้อย่างสวยงาม)
ขนาดพิกเซล 192×192 เป็นไอคอนขั้นต่ำที่จำเป็นในรายการแอปพลิเคชันเว็บ (site.webmanifest) สำหรับพร้อมท์การติดตั้ง PWA ของ Android Chrome เมื่อผู้ใช้เพิ่ม PWA ลงในหน้าจอหลัก Android ของตน Chrome จะแสดงไอคอน 192×192 ในตัวเรียกใช้งาน และไอคอนแอปในตัวสลับแอปล่าสุด หากไม่มีขนาดนี้ในไฟล์ Manifest พรอมต์การติดตั้ง PWA จะแสดงไอคอนทั่วไปหรือไม่สามารถทริกเกอร์ได้เลย
ขนาด 512×512 พิกเซลเป็นไอคอนรายการที่สองที่จำเป็น Chrome ใช้สำหรับหน้าจอเริ่มต้น PWA ที่แสดงในขณะที่แอปกำลังโหลดหลังจากเปิดหน้าจอหลัก และสำหรับการแสดงตัวอย่างกล่องโต้ตอบการติดตั้งบนเดสก์ท็อป Chrome OS นอกจากนี้ยังเป็นขนาดแหล่งที่มาในอุดมคติสำหรับการสร้างตัวแปรที่มีขนาดเล็กทั้งหมด โดยเริ่มต้นที่ 512×512 ช่วยให้มั่นใจได้ว่าเอาต์พุตที่สุ่มตัวอย่างทุกรายการจะยังคงมีขอบที่คมชัดและสีที่แม่นยำ
ขนาดระหว่าง 512×512 และขนาดใหญ่มาก 1024×1024 ส่วนใหญ่จะใช้สำหรับไอคอนแอปแบบเนทีฟบน macOS และ iOS App Store ที่ส่งเข้ามา ไม่ใช่สำหรับไอคอน Favic ของเว็บ อย่างไรก็ตาม หากคุณวางแผนที่จะแปลงตัวตนบนเว็บของคุณให้เป็นแอพแบบเนทีฟโดยใช้ wrapper (Electron, Capacitor, Tauri) คุณจะต้องใช้ 1024×1024 สำหรับกระบวนการตรวจสอบของ App Store เก็บไฟล์หลักนี้ไว้ข้างแพ็คเกจ favicon ของคุณ
ไอคอน Fav ของ SVG ไม่ขึ้นกับความละเอียด และครอบคลุมทุกความหนาแน่นด้วยไฟล์เดียว เบราว์เซอร์ที่รองรับ favicons SVG (Chrome 80+, Edge 80+, Firefox 41+, Safari 15+) จะเลือกใช้ SVG มากกว่าขนาดแรสเตอร์ใดๆ เนื่องจากแสดงผลได้อย่างสมบูรณ์แบบที่ 1x, 2x, 3x หรือ DPI แบบกำหนดเองใดๆ ข้อเสียคือไม่ใช่ทุกบริบทที่รองรับ SVG — ทางลัด Windows โปรแกรมอ่าน RSS และเครื่องมือรุ่นเก่ายังคงต้องใช้ .ico ทางเลือก
ความสัมพันธ์ระหว่างขนาดและคอนเทนเนอร์ .ico เป็นสิ่งสำคัญที่ต้องทำความเข้าใจ ไฟล์ .ico ไม่ใช่ภาพเดียว แต่เป็นไฟล์เก็บถาวรแบบหลายภาพ แต่ละเฟรมที่อยู่ภายในจะเป็นภาพแรสเตอร์แยกกันในขนาดที่แตกต่างกัน เบราว์เซอร์จะอ่านไดเร็กทอรี ICO ระบุว่าเฟรมใดตรงกับขนาดที่ต้องการมากที่สุด และถอดรหัสเฉพาะเฟรมนั้นเท่านั้น นี่คือเหตุผลว่าทำไมไฟล์ .ico หนึ่งไฟล์จึงสามารถให้บริการแท็บขนาด 16, 32, 48 และ 64 พิกเซลได้ดีพอๆ กัน
ชุดขั้นต่ำที่แนะนำสำหรับเว็บไซต์ที่ใช้งานจริงในปี 2026 คือ: favicon.ico การรวมเฟรม 16, 32, 48 และ 64 พิกเซลเข้าด้วยกัน apple-touch-icon.png ที่ 180×180; android-chrome-192x192.png; android-chrome-512x512.png; favicon.svg สำหรับเบราว์เซอร์สมัยใหม่ และ site.webmanifest อ้างอิงถึง 192 และ 512 PNG favicon generator สร้างชุดที่สมบูรณ์นี้จากการอัปโหลดแหล่งเดียวในคลิกเดียว
การตรวจสอบว่าขนาด favicon ของคุณแสดงอย่างถูกต้องหรือไม่นั้นทำได้ตรงไปตรงมาด้วย favicon tester ป้อน URL เว็บไซต์ของคุณและผู้ทดสอบพยายามดึงข้อมูล favicon.ico ของคุณ ตรวจสอบแท็กลิงก์ในส่วนหัว HTML ของคุณ และแสดงตัวอย่างของแต่ละขนาด ขนาดที่ขาดหายไปจะถูกทำเครื่องหมายพร้อมคำแนะนำที่นำไปใช้ได้จริง
วิธีการทำงาน
- 1
ระบุขนาดที่คุณต้องการ
สำหรับเว็บไซต์มาตรฐาน: 16, 32, 48, 64 (ใน .ico) + 180 (apple-touch-icon) + 192, 512 (รายการ PNGs) เพิ่ม 128 และ 256 ลงใน .ico หากผู้ชมของคุณใช้ Windows ด้วยทางลัดบนเดสก์ท็อปบ่อยครั้ง
- 2
สร้างจากแหล่งขนาด 512×512
อัปโหลด 512×512 PNG หรือ SVG ของคุณไปที่ [favicon generator](tool:favicon-generator) โดยจะส่งออกทุกขนาดที่ต้องการและรวมกลุ่มเป็น .ico, PNG แบบสแตนด์อโลน และไฟล์ Manifest โดยอัตโนมัติ
- 3
วางแต่ละไฟล์ไว้ในรูทไซต์ของคุณ
favicon.ico, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, favicon.svg — ทั้งหมดนี้อยู่ที่ URL รากของโดเมนของคุณ
- 4
เพิ่มแท็กลิงก์ใน <head>
ใช้ข้อมูลโค้ด HTML ที่สร้างขึ้น แท็กลิงก์แต่ละรายการจะระบุแอตทริบิวต์ขนาดเพื่อให้เบราว์เซอร์ทราบได้อย่างชัดเจนว่าไฟล์ใดที่จะดึงข้อมูลตามความหนาแน่นของการแสดงผล
- 5
ตรวจสอบกับผู้ทดสอบ favicon
ใช้ [favicon tester](utility:favicon-tester) เพื่อยืนยันว่าแต่ละขนาดแก้ไขได้อย่างถูกต้อง และตรวจสอบว่าไอคอนแสดงผลที่ 16, 32 และ 512 พิกเซลอย่างไร
ลองเลย
สร้างทุกขนาด favicon
เครื่องมือสร้าง Faviconคำถามที่พบบ่อย
จริงๆ แล้วฉันต้องการ favicon กี่ขนาด?+
ขั้นต่ำ: หลายขนาด .ico (16/32/48) + 180×180 apple-touch-icon + 192×192 และ 512×512 สำหรับไฟล์ Manifest PWA ทั้งหมดหกไฟล์ [favicon generator](tool:favicon-generator) สร้างทั้งหมดไว้ในการดาวน์โหลดครั้งเดียว
รูปภาพเดียวใช้ได้กับทุกขนาดหรือไม่+
ใช่ — เริ่มจาก 512×512 PNG หรือ SVG และสร้างทุกขนาดที่เล็กกว่าโดยทางโปรแกรม อย่ายกระดับโลโก้เล็กๆ เลย แหล่งที่มา 512×512 มีความหนาแน่นของพิกเซลเพียงพอที่จะสร้างตัวอย่างดาวน์ขนาด 16×16 และ 32×32 ที่คมชัด
Google Search ใช้ขนาดใด+
Google กำหนดให้มีขนาดอย่างน้อย 48×48 พิกเซล รูปแบบสี่เหลี่ยมจัตุรัส และ URL ที่สาธารณะเข้าถึงได้ รวมขนาด 48×48 ไว้ในไฟล์ .ico ของคุณเพื่อให้แน่ใจว่าไอคอน Fav ของคุณมีคุณสมบัติที่จะแสดงในผลการค้นหาทั่วไป
เบราว์เซอร์ทั้งหมดใช้ขนาด favicon เท่ากันหรือไม่+
ไม่ใช่ Chrome, Firefox, Edge และ Safari ต่างก็มีการกำหนดขนาดที่แตกต่างกันเล็กน้อย และขนาดที่แสดงขึ้นอยู่กับความหนาแน่นของการแสดงผลของผู้ใช้ .ico หลายขนาดช่วยให้แต่ละเบราว์เซอร์เลือกเฟรมที่ต้องการได้โดยไม่ต้องมีแท็กลิงก์เพิ่มเติม
ขนาด favicon และขนาด apple-touch-icon แตกต่างกันอย่างไร+
ขนาด Favicon (16-256px) ใช้สำหรับแท็บเบราว์เซอร์ บุ๊กมาร์ก และ Windows/Linux UI ขนาดไอคอนสัมผัส Apple (120, 152, 167, 180px) ใช้สำหรับไอคอนหน้าจอหลัก iOS ทั้งสองให้บริการบนพื้นผิวที่แตกต่างกันโดยสิ้นเชิง และระบุผ่านแอตทริบิวต์ rel ของแท็กลิงก์ที่แตกต่างกัน
มีขนาด favicon สูงสุดหรือไม่+
รูปแบบ .ico รองรับสูงสุด 256×256 ต่อเฟรม สำหรับการใช้งานเว็บ 512×512 PNG เป็นขนาดที่ใหญ่ที่สุดที่มีประโยชน์โดยทั่วไป (รายการ PWA) ไม่มีขีดจำกัดทางเทคนิคสำหรับ PNG แต่เบราว์เซอร์หรือระบบปฏิบัติการปัจจุบันไม่ได้ใช้ขนาดที่สูงกว่า 512×512 สำหรับการแสดง favicon
เหตุใด favicon ของฉันจึงดูพร่ามัวในแถบบุ๊กมาร์ก+
เป็นไปได้มากว่าคุณจัดส่งเฉพาะขนาด 16×16 หรือ 32×32 PNG และเบราว์เซอร์กำลังขยายออกไปบนจอแสดงผล DPI สูง รวมเฟรม 64×64 หรือ 128×128 ในชุด .ico ของคุณ หรือเพิ่มแท็ก `<link rel='icon' sizes='64x64' href='/favicon-64x64.png'>` ที่ชัดเจน