ขนาด favicon ที่ต้องใช้ในปี 2026 คืออะไร? ชุดไฟล์ที่เหมาะสมที่สุด

ในปี 2026 ชุด favicon ที่เหมาะสมที่สุดประกอบด้วย favicon.ico ที่มีภาพขนาด 16, 32 และ 48 px, PNG ขนาด 96x96 (สำหรับ Google Search), SVG favicon (ไม่บังคับ), apple-touch-icon.png ขนาด 180x180 และ PNG ขนาด 192x192 และ 512x512 (รวมถึง maskable ขนาด 512 อีกหนึ่งไฟล์) ที่ประกาศไว้ใน web app manifest ส่วนไทล์ของ Windows และขนาดเก่าของ Apple จำเป็นก็ต่อเมื่อคุณต้องรองรับอุปกรณ์รุ่นเก่ามากเท่านั้น เนื้อหาด้านล่างอธิบายเหตุผลพร้อมตารางขนาด โค้ด HTML ที่พร้อมใช้งาน และข้อผิดพลาดที่พบบ่อยซึ่งควรหลีกเลี่ยง

ภูมิทัศน์ของ favicon เคยยุ่งเหยิงมาก เพราะเบราว์เซอร์และระบบปฏิบัติการแต่ละตัวต้องการขนาดของตัวเอง จนเกิดบล็อก <head> ยาว 20 บรรทัดอันโด่งดัง ปัจจุบันส่วนใหญ่เลิกใช้แล้ว เบราว์เซอร์สมัยใหม่ปรับขนาดไอคอนคุณภาพดีเพียงไฟล์เดียว iOS ต้องการแค่ขนาดเดียว และ Android อ่านจาก manifest บทความนี้แยกให้เห็นว่าอะไรจำเป็นจริง ๆ และอะไรเป็นเพียงส่วนเสริมที่ดีถ้ามี

คำตอบสั้น ๆ: ชุดไฟล์ favicon ที่เหมาะสมที่สุด

• favicon.ico (ขนาด 16, 32, 48 px ในไฟล์เดียว) วางไว้ที่รากของเว็บไซต์ เบราว์เซอร์ โปรแกรมอ่านฟีด และเครื่องมือจำนวนมากยังคงร้องขอ /favicon.ico โดยอัตโนมัติ
• favicon.svg (ไม่บังคับแต่แนะนำ) แสดงผลคมชัดทุกขนาดและรองรับโหมดมืด
• PNG 16x16, 32x32 และ 96x96 เป็นไฟล์สำรองที่ระบุชัดเจน ขนาด 96 px ช่วยเรื่อง Google Search ซึ่งต้องการขนาดที่เป็นพหุคูณของ 48 px
• apple-touch-icon.png ขนาด 180x180 ทึบ ไม่มีความโปร่งใส
• PNG ขนาด 192x192 และ 512x512 ใน manifest.json พร้อมไอคอน maskable ขนาด 512x512 สำหรับ Android
• แท็ก meta theme-color สำหรับการปรับสี UI ของเบราว์เซอร์บนมือถือ
• ไทล์ของ Windows (70, 150, 310 px) พร้อม browserconfig.xml ใช้เฉพาะกับ Windows รุ่นเก่าและไซต์ที่ปักหมุดใน IE11 เท่านั้น

ตารางขนาด favicon: วัตถุประสงค์ ชื่อไฟล์ และลำดับความสำคัญ

ใช้ตารางนี้เป็นเช็กลิสต์ "จำเป็น" หมายถึงเว็บไซต์ทั่วไปจะดูมีปัญหาหรือไม่เสร็จสมบูรณ์หากไม่มี "แนะนำ" หมายถึงช่วยยกระดับคุณภาพอย่างชัดเจน และ "ไม่บังคับ" หมายถึงใช้เฉพาะกลุ่มหรือสำหรับระบบเก่า

favicon.ico: ขนาด 16, 32 และ 48 px ในไฟล์เดียว

ไฟล์ ICO คือคอนเทนเนอร์ที่เก็บบิตแมปได้หลายภาพ favicon.ico ที่ดีควรมีภาพขนาด 16x16, 32x32 และ 48x48 เพื่อให้เบราว์เซอร์หรือระบบปฏิบัติการเลือกภาพที่ใกล้เคียงที่สุดได้ วางไว้ที่รากของโดเมน (https://example.com/favicon.ico) แม้ HTML ของคุณจะชี้ไปที่อื่น แต่ครอว์เลอร์ โปรแกรมอ่าน RSS และเบราว์เซอร์รุ่นเก่าจำนวนมากยังคงร้องขอ URL นี้พอดี การมีไฟล์นี้จึงช่วยลดข้อผิดพลาด 404 ในล็อกของคุณ

อย่าเพียงเปลี่ยนนามสกุลไฟล์ PNG เป็น .ico เบราว์เซอร์ส่วนใหญ่ยอมรับได้ แต่บางเครื่องมือจะปฏิเสธ และคุณจะเสียประโยชน์ของการมีหลายความละเอียด ให้ส่งออกเป็นไฟล์ ICO จริง ๆ

PNG favicon: ขนาด 16, 32 และ 96 px

ลิงก์ PNG ที่ระบุ sizes ชัดเจนช่วยให้เบราว์เซอร์เลือกบิตแมปที่ดีที่สุดได้โดยไม่ต้องแยกวิเคราะห์ไฟล์ ICO ในทางปฏิบัติ ขนาด 32x32 ครอบคลุมแท็บบนหน้าจอความละเอียดสูง ส่วน 16x16 แทบซ้ำซ้อนในปัจจุบัน ขนาด 96x96 น่าเพิ่มเพราะ Google Search แสดง favicon ถัดจากผลการค้นหา และต้องการไอคอนสี่เหลี่ยมจัตุรัสที่มีขนาดเป็นพหุคูณของ 48 px (48x48, 96x96, 144x144 และต่อไป) ไฟล์ 96 px ให้ภาพต้นทางที่คมชัดกว่าไฟล์ 48 px เมื่อ Google ย่อขนาดสำหรับผลการค้นหาบนมือถือ

เคล็ดลับการออกแบบ: ที่ขนาด 16 px รายละเอียดเล็ก ๆ จะหายไป ใช้รูปทรงเรียบง่ายและหนา คอนทราสต์สูง และมีข้อความน้อยหรือไม่มีเลย คุณสามารถปรับแต่งและดูตัวอย่างไอคอนได้ในตัวแก้ไขของ MakeFav ก่อนส่งออก

SVG favicon และโหมดมืด

SVG favicon เป็นไฟล์เล็กไฟล์เดียวที่คมชัดบนหน้าจอทุกความหนาแน่นพิกเซล เบราว์เซอร์ตระกูล Chromium และ Firefox รองรับ ส่วน Safari เคยรองรับอย่างจำกัด ดังนั้นอย่าพึ่งพา SVG เพียงอย่างเดียว ให้เก็บไฟล์สำรอง ICO และ PNG ไว้ด้วย

ข้อได้เปรียบที่ใหญ่ที่สุดคือการปรับธีม เนื่องจาก SVG มี CSS ได้ คุณจึงปรับไอคอนให้เข้ากับโทนสีของผู้ใช้ด้วย prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

โปรดทราบว่า media query สะท้อนธีมของเบราว์เซอร์หรือระบบปฏิบัติการ ซึ่งเป็นสิ่งที่แถบแท็บใช้ ไม่ได้ตามสวิตช์เปลี่ยนธีมบนเว็บไซต์ของคุณเอง

ข้อควรระวังที่รู้กัน: เมื่อระบุทั้ง ICO และ SVG Chrome อาจเลือก ICO การประกาศ ICO ด้วย sizes="32x32" แล้วระบุ SVG ตามหลังจะทำให้ Chrome เลือก SVG ดังที่แสดงในโค้ดด้านล่าง

Apple touch icon: 180x180 และขนาดเก่า

เมื่อผู้ใช้เพิ่มเว็บไซต์ของคุณลงในหน้าจอหลักของ iOS หรือ iPadOS Safari จะใช้ apple-touch-icon ปัจจุบัน PNG ขนาด 180x180 px เพียงไฟล์เดียวก็เพียงพอ เพราะ iOS จะย่อขนาดให้อุปกรณ์รุ่นเก่าและ iPad เอง ตั้งชื่อว่า apple-touch-icon.png แล้ววางไว้ที่ราก iOS จะมองหาไฟล์นี้โดยค่าเริ่มต้นแม้ไม่มีแท็ก link

กฎสำหรับไอคอน Apple:

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

ต้องใช้ขนาดเก่า (57, 72, 76, 114, 120, 144, 152, 167) เมื่อไร? เฉพาะเมื่อคุณรองรับ iOS 6 หรือเก่ากว่า หรือต้องการควบคุมพิกเซลที่แน่นอนตามอุปกรณ์สำหรับ iPad Pro (167 px) และ iPad (152 px) สำหรับเว็บไซต์เกือบทั้งหมดในปี 2026 ไฟล์ 180x180 เพียงไฟล์เดียวก็เพียงพอ การตั้งค่าที่รองรับสูงสุดด้านล่างมีบางขนาดรวมอยู่เพื่อความครบถ้วน

ไอคอน Android และ PWA: 192, 512 และ maskable

Chrome บน Android และเบราว์เซอร์อื่นที่รองรับ PWA อ่านไอคอนจาก web app manifest ไม่ใช่จาก <link rel="icon"> เพื่อให้ติดตั้งได้ คุณต้องมี PNG ขนาด 192x192 และ 512x512 อย่างน้อย ไอคอน 192 px ใช้บนหน้าจอหลักและตัวเปิดแอป ส่วนไอคอน 512 px จะแสดงบนหน้าจอ splash และหน้าต่างติดตั้ง

ไอคอน maskable และ safe zone

ไอคอนแบบ adaptive ของ Android อาจถูกครอปเป็นวงกลม squircle หรือรูปทรงอื่นตามอุปกรณ์ ไอคอน maskable ออกแบบมาให้ครอปได้อย่างปลอดภัย เนื้อหาสำคัญต้องอยู่ภายใน safe zone ซึ่งเป็นวงกลมที่กึ่งกลางภาพโดยมีเส้นผ่านศูนย์กลาง 80% ของภาพ (รัศมีเท่ากับ 40% ของด้าน) สำหรับไฟล์ 512x512 หมายถึงต้องให้โลโก้อยู่ในวงกลมเส้นผ่านศูนย์กลางประมาณ 410 px และขยายสีพื้นหลังไปถึงทั้งสี่ขอบ เพื่อไม่ให้เกิดช่องว่างหลังใช้มาสก์

ประกาศไอคอน maskable เป็นรายการแยกต่างหากด้วย "purpose": "maskable" หลีกเลี่ยง "any maskable" ในไฟล์เดียว เพราะระยะขอบที่จำเป็นสำหรับการมาสก์จะดูเล็กเกินไปเมื่อแสดงไอคอนโดยไม่มีมาสก์

ตัวอย่าง manifest.json

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

ให้บริการไฟล์ด้วย application/manifest+json (หรือ application/json) และลิงก์จากทุกหน้าด้วย <link rel="manifest" href="/manifest.json"> บางโปรเจกต์ตั้งชื่อว่า site.webmanifest ชื่อไม่สำคัญ สิ่งสำคัญคือลิงก์

ไทล์ Windows และ browserconfig.xml

Windows 8.1 และ 10 ให้ผู้ใช้ปักหมุดเว็บไซต์ไว้ที่เมนู Start และ IE11 กับ Edge รุ่นเก่าจะอ่านภาพไทล์จาก browserconfig.xml ขนาดที่ใช้บ่อยคือ 70x70 (เล็ก), 150x150 (กลาง), 310x150 (กว้าง) และ 310x310 (ใหญ่) Edge ที่ใช้ Chromium จะใช้ manifest และ favicon ปกติแทน ดังนั้นนี่จึงเป็นฟีเจอร์รุ่นเก่า ใส่เฉพาะเมื่อกลุ่มผู้ชมของคุณยังมีผู้ใช้ Windows รุ่นเก่า เช่น ในองค์กร

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: การปรับสี UI ของเบราว์เซอร์

แท็ก meta theme-color บอกเบราว์เซอร์บนมือถือ (และเดสก์ท็อปบางตัว) ว่าจะใช้สีใดสำหรับแถบที่อยู่หรือแถบชื่อ มันไม่ใช่ favicon แต่อยู่ในชุดแบรนด์เดียวกัน คุณสามารถกำหนดค่าแยกสำหรับโหมดสว่างและโหมดมืดได้:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

การตั้งค่าแบบทันสมัยขั้นต่ำ เทียบกับแบบรองรับสูงสุด

การตั้งค่าแบบทันสมัยขั้นต่ำ (แนะนำสำหรับเว็บไซต์ส่วนใหญ่)

ห้าไฟล์ครอบคลุมการใช้งานจริงกว่า 99%: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) และไอคอน manifest สองไฟล์ (192 และ 512) เพิ่ม PNG ขนาด 96x96 หากการมองเห็นใน Google Search มีความสำคัญ และเพิ่มไอคอน maskable หากคุณทำ PWA

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

การตั้งค่าแบบรองรับสูงสุด

เลือกแบบนี้เมื่อคุณให้บริการกลุ่มผู้ชมกว้างหรือระดับองค์กร หรือต้องการครอบคลุมทุกไคลเอนต์ที่เป็นไปได้ โดยเพิ่มขนาด PNG ที่ระบุชัดเจน ขนาด Apple รุ่นเก่า ไทล์ Windows และสีธีม

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

สังเกตเส้นทางแบบ root-relative ที่ขึ้นต้นด้วย / ซึ่งใช้ได้ทุกความลึกของหน้า และนำเรามาสู่ข้อผิดพลาดที่พบบ่อยที่สุด

ข้อผิดพลาดของ favicon ที่พบบ่อยและวิธีแก้ไข

1. เส้นทางผิด

ลิงก์อย่าง href="favicon.ico" จะถูกแปลความเทียบกับ URL ปัจจุบัน จึงใช้ได้ที่ / แต่ใช้ไม่ได้ที่ /blog/post/ ให้ใช้แบบ root-relative (/favicon.ico) หรือ URL แบบสัมบูรณ์ และตรวจสอบด้วยว่าไฟล์มีอยู่จริง: เปิดแต่ละ URL โดยตรงในเบราว์เซอร์และตรวจให้แน่ใจว่าตอบกลับ HTTP 200 ไม่ใช่การเปลี่ยนเส้นทางไปหน้า 404 หรือหน้าล็อกอิน

2. ไม่มีหรือระบุแอตทริบิวต์ sizes ผิด

หากไม่มี sizes เบราว์เซอร์ต้องดาวน์โหลดไอคอนมาตรวจสอบ และอาจเลือกผิด ให้ประกาศ sizes บนลิงก์ PNG เสมอ และตรวจให้ตรงกับขนาดพิกเซลจริง ไฟล์ที่ระบุว่า 32x32 แต่จริง ๆ เป็น 64x64 ทำให้ผลลัพธ์ไม่สม่ำเสมอ

3. การแคชที่ยาวนาน

เบราว์เซอร์แคช favicon เป็นเวลานาน มักแยกจากแคชของหน้าเว็บ หลังเปลี่ยนแบรนด์ ไอคอนเก่าอาจค้างอยู่หลายวัน ให้เปลี่ยนชื่อไฟล์หรือเพิ่ม query string เวอร์ชัน (/favicon.ico?v=2) แล้วอัปเดตแท็ก link การรีโหลดแบบ hard reload มักไม่รีเฟรชไอคอนแท็บ แต่การเปิด URL ของไอคอนโดยตรงแล้วรีโหลดมักได้ผล

4. ภาพที่ไม่เป็นสี่เหลี่ยมจัตุรัส

Favicon ต้องเป็นสี่เหลี่ยมจัตุรัส โลโก้สี่เหลี่ยมผืนผ้าจะถูกยืด ครอป หรือเติมขอบโดยคาดเดาไม่ได้ ให้ออกแบบสัญลักษณ์สี่เหลี่ยมจัตุรัสโดยเฉพาะ เช่น ตัวอักษรย่อหรือสัญลักษณ์ แทนการย่อ wordmark ที่กว้าง

5. Apple touch icon โปร่งใสกลายเป็นสีดำ

iOS เติมความโปร่งใสด้วยสีดำ ให้ไอคอน 180x180 มีพื้นหลังทึบ และอย่าทำมุมโค้งไว้ล่วงหน้า

6. ไอคอน maskable ที่ไม่มี safe zone

หากโลโก้ชิดขอบของไอคอน maskable Android จะตัดส่วนนั้นออก ให้เก็บไว้ภายในวงกลมกลาง 80% และเติมสีพื้นหลังเต็มผืนผ้าใบ

7. การบล็อกไอคอนจากครอว์เลอร์

หาก robots.txt ห้ามเข้าถึงเส้นทาง favicon ของคุณ Google จะดึงไฟล์ไม่ได้และจะแสดงไอคอนรูปลูกโลกทั่วไปในผลการค้นหา โปรดจำไว้ด้วยว่า Google ต้องการ favicon บนโฮสต์เดียวกับหน้าเว็บ และรีเฟรชเป็นครั้งคราวเท่านั้น การเปลี่ยนแปลงจึงอาจใช้เวลาหลายวันหรือหลายสัปดาห์กว่าจะปรากฏ

8. ลืมลิงก์ manifest หรือ purpose

manifest ที่ไม่ได้ลิงก์ หรือไม่มีไอคอนขนาด 192 และ 512 px จะทำให้ Chrome ไม่แสดงข้อความแจ้งติดตั้ง ตรวจสอบได้ในเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ที่แท็บ Application

สร้างทั้งชุดได้ในคลิกเดียว

การสร้างไฟล์หลายสิบไฟล์ด้วยมือในโปรแกรมแก้ไขภาพ แล้วแปลงเป็น ICO และเขียน manifest นั้นน่าเบื่อและผิดพลาดง่าย MakeFav สร้างไฟล์ทั้งหมดข้างต้นจากภาพ ข้อความ หรืออีโมจิเพียงอย่างเดียว: favicon.ico แบบหลายขนาด, PNG, SVG, Apple touch icon, PNG ขนาด 192/512, ไอคอน maskable, ไทล์ Windows, manifest.json และ browserconfig.xml พร้อมสนิปเพ็ต HTML ที่พร้อมวาง ทั้งหมดในไฟล์ ZIP เดียว คุณสามารถปรับพื้นหลัง ระยะขอบ และรูปทรงได้ในตัวแก้ไข ตรวจสอบเว็บไซต์ที่มีอยู่ด้วยตัวตรวจสอบ favicon และสร้างอัตโนมัติผ่านแหล่งข้อมูลสำหรับนักพัฒนา

เช็กลิสต์การนำไปใช้งาน

1. อัปโหลดไฟล์ทั้งหมดไปที่รากของเว็บไซต์
2. วางสนิปเพ็ต HTML ลงใน <head> ของทุกหน้า (หรือเลย์เอาต์ที่ใช้ร่วมกัน)
3. ตรวจให้เส้นทางเป็นแบบ root-relative และตอบกลับ HTTP 200
4. ตรวจสอบโหมดสว่างและโหมดมืด การติดตั้งลงหน้าจอหลักของ iOS และการติดตั้งบน Android
5. รันตัวตรวจสอบเพื่อหาขนาดที่ขาดหายหรือไม่ตรงกัน
6. ล้างแคชด้วย version string หากคุณเปลี่ยนไอคอนเก่า

คำถามที่พบบ่อย

ในปี 2026 ยังต้องมี favicon.ico อยู่หรือไม่?

ต้องมี แม้เบราว์เซอร์สมัยใหม่จะรองรับ PNG และ SVG แต่ครอว์เลอร์ โปรแกรมอ่านฟีด อีเมลไคลเอนต์ และเบราว์เซอร์รุ่นเก่าจำนวนมากยังคงร้องขอ /favicon.ico โดยตรง ICO แบบหลายขนาดที่มีภาพ 16, 32 และ 48 px เป็นไฟล์ขนาดเล็กที่ช่วยป้องกันไอคอนหายและข้อผิดพลาด 404

favicon สำหรับ Google Search ควรมีขนาดเท่าไร?

Google ต้องการ favicon สี่เหลี่ยมจัตุรัสที่มีขนาดเป็นพหุคูณของ 48 px และอย่างน้อย 48x48 PNG ขนาด 96x96 เป็นตัวเลือกที่ปลอดภัย และรองรับ SVG ด้วย Google ยังต้องการให้ไฟล์ถูกครอว์ลได้ ดังนั้นอย่าบล็อกใน robots.txt การอัปเดตอาจใช้เวลาหลายวันหรือหลายสัปดาห์กว่าจะปรากฏ

180x180 เพียงพอสำหรับ Apple touch icon หรือไม่?

สำหรับเว็บไซต์เกือบทั้งหมด เพียงพอ iOS และ iPadOS จะย่อ PNG ขนาด 180x180 ให้ทุกอุปกรณ์ในปัจจุบัน ส่วนขนาดเก่า (57 ถึง 152 px) สำคัญเฉพาะกับ iOS รุ่นเก่ามาก อย่าลืมใช้พื้นหลังทึบเพื่อไม่ให้ไอคอนกลายเป็นสีดำ

ไอคอน maskable คืออะไร และจำเป็นต้องมีหรือไม่?

ไอคอน maskable คือ PNG ขนาด 512x512 ที่ออกแบบสำหรับรูปทรงไอคอนแบบ adaptive ของ Android เนื้อหาสำคัญอยู่ภายในวงกลมเส้นผ่านศูนย์กลาง 80% ที่กึ่งกลาง และพื้นหลังเต็มสี่เหลี่ยมจัตุรัสทั้งผืน คุณต้องใช้เฉพาะเมื่อมี PWA ที่ติดตั้งได้ แต่จะทำให้ไอคอนดูเป็นเนทีฟ แทนที่จะวางอยู่ในวงกลมสีขาว

ทำไม favicon เก่ายังแสดงอยู่หลังจากที่ฉันเปลี่ยนแล้ว?

เบราว์เซอร์แคช favicon แยกต่างหากและเป็นเวลานาน ให้เปลี่ยนชื่อไฟล์หรือเพิ่ม query string เวอร์ชัน เช่น ?v=2 อัปเดตแท็ก link แล้วเปิด URL ของไอคอนโดยตรงและรีโหลด เสิร์ชเอนจินอาจใช้เวลานานกว่าในการรีเฟรชสำเนาของตัวเอง