วันหนึ่งเสิร์ชชื่อเว็บตัวเองใน Google บนมือถือ แล้วเห็นสิ่งที่ไม่อยากเห็น ข้างชื่อผลค้นหาเป็นลูกโลก generic แทนที่จะเป็น favicon ของเว็บ ทั้งที่ใส่ไอคอนไว้ในหน้าเว็บเรียบร้อยแล้ว เปิดในเบราว์เซอร์ก็เห็นไอคอนบนแท็บปกติดี
ปมอยู่ที่เว็บนี้อยู่หลัง password gate คนที่ยังไม่ได้ปลดล็อกจะเข้าหน้าเว็บไม่ได้ ถูกเด้งไปหน้ากรอกรหัสก่อน ตอนออกแบบไม่ได้คิดว่ามันจะไปโดนไฟล์ favicon ด้วย แต่มันโดน และคนที่เจอผลกระทบเต็มๆ คือ Googlebot
ช่วงที่ 1ทำไม Google ถึงโชว์ลูกโลกแทน favicon
ตอน Google แสดงผลค้นหาบนมือถือ มันจะเอา favicon ของเว็บมาโชว์ข้างชื่อผล เพื่อให้คนจำแบรนด์ได้ แต่ก่อนจะโชว์ได้ Google ต้องดึงไฟล์ favicon นั้นมาให้ได้จริงก่อน ไม่ใช่แค่เห็นว่าในหน้าเว็บประกาศ favicon ไว้เฉยๆ
ถ้า Googlebot วิ่งไปดึงไฟล์แล้วดึงไม่ได้ ไม่ว่าจะเพราะไฟล์อยู่หลัง login, ถูก robots block, path ที่ประกาศไว้ชี้ไปที่ที่ไม่มีไฟล์ หรือไอคอนไม่เข้าเกณฑ์ Google จะไม่ปล่อยช่องนั้นว่าง มันเติมด้วยลูกโลก genericแทน ลูกโลกจึงไม่ใช่บั๊กของ Google แต่เป็นสัญญาณว่า "ฉันมาดึงไอคอนเธอไม่ได้"
พอมองแบบนี้ปัญหาก็ชัด ไม่ใช่ว่าประกาศ favicon ผิด แต่เป็นเรื่องสิทธิ์เข้าถึงไฟล์ Googlebot เข้ามาแบบคนแปลกหน้าที่ไม่มีบัตรผ่าน อะไรที่คนไม่มีบัตรเข้าไม่ได้ มันก็เข้าไม่ได้เหมือนกัน
ช่วงที่ 2ไล่หา root cause ด้วย curl
วิธีที่ตรงที่สุดคือมองไฟล์ favicon ด้วยสายตาแบบเดียวกับ Googlebot นั่นคือดึงมันโดยไม่มี cookie login curl -I ทำแบบนั้นได้พอดี มันยิง request เปล่าๆ ไปแล้วขอดูแค่ status กับ header curl แบบไม่ล็อกอินคือสายตาของ Googlebot
ตอนนั้น favicon ของเว็บถูกวางไว้ที่ /assets/favicon.svg ซึ่งอยู่ในโฟลเดอร์ที่โดน password gate กันทั้งก้อน ลอง curl ดูได้ผลแบบนี้
ตรงนี้ root cause โผล่ทันที /assets/favicon.svg คืน 401 กับใครก็ตามที่ยังไม่ปลดล็อก และหน้าแรกคืน 302 เด้งไป gate Googlebot ที่ไม่มี cookie ก็เจอ 401 เหมือน curl เป๊ะ พอดึงไฟล์ไม่ได้ มันเลยไม่มี favicon จะเอาไปโชว์ ผลคือลูกโลก
บทเรียนของช่วงนี้คือ อย่าเชื่อสิ่งที่เห็นในเบราว์เซอร์ตัวเอง เพราะเบราว์เซอร์เรามี cookie ปลดล็อกอยู่แล้ว มันเลยเห็น favicon ปกติ แต่ Googlebot ไม่มี ต้อง curl แบบสะอาดถึงจะเห็นความจริงที่บอตเห็น
ช่วงที่ 3วิธีแก้: favicon ที่ root เปิดก่อน gate
เมื่อรู้ว่าปัญหาคือสิทธิ์เข้าถึง ทางแก้ก็ตรงไปตรงมา ต้องทำให้ไฟล์ favicon คืน 200 กับคนที่ยังไม่ล็อกอิน สองขยับที่ทำคือ
- ย้าย favicon ไปไว้ที่ root ของโดเมน ไม่ใช่ในโฟลเดอร์ที่โดนกัน วางเป็น
/favicon.ico,/favicon.svg,/favicon-96.pngและ/apple-touch-icon.png - whitelist path เหล่านี้ในด่านหน้า เว็บนี้ password gate ทำงานที่ Cloudflare Worker เลยระบุ path ไอคอนชุดนี้ให้เสิร์ฟคืน 200 ก่อนถึงตัว gate ผลคือคนยังต้องปลดล็อกเพื่ออ่านเนื้อหา แต่ favicon ดึงได้เสรี
ยิง curl ซ้ำอีกรอบเพื่อยืนยันว่าปิดจบ
อีกครึ่งที่ต้องไม่ลืมคือประกาศไอคอนใน <head> ของหน้าแรกให้ครบทุกขนาด ชี้ไปที่ path ที่ root ทั้งหมด
<link rel="icon" href="/blog/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/blog/favicon-96.png" type="image/png" sizes="96x96">
<link rel="icon" href="/blog/favicon.ico" sizes="48x48">
<link rel="apple-touch-icon" href="/blog/apple-touch-icon.png">
เสริมอีกชั้นด้วย Organization JSON-LD ที่มี field logo ในหน้าแรก ตัวนี้ช่วย Google ผูกโลโก้แบรนด์เข้ากับเว็บ เป็นสัญญาณเสริมนอกเหนือจากตัว favicon เอง
เรื่องขนาดไอคอน ตาม guideline ของ Google favicon ต้องเป็นสี่เหลี่ยมจัตุรัส ขั้นต่ำ 8x8px แต่ Google แนะนำให้ใหญ่กว่า 48x48px เพื่อให้คมบนทุกหน้าจอ ต้องอยู่ host เดียวกับเว็บ ใช้ URL ที่คงที่ (อย่าเปลี่ยนบ่อย) และที่สำคัญสุดในเคสนี้คือ Googlebot ต้องดึงได้ ห้าม block
ช่วงที่ 4เอาไปใช้กับเว็บของคุณ
ถ้าเจอลูกโลกแทน favicon เช็คตามนี้ทีละข้อ
- เห็นลูกโลก = Google ดึง favicon ไม่ได้ ไม่ใช่ปัญหาที่ตัวรูป แต่คือดึงไฟล์ไม่ถึง เริ่มจากสมมติว่าเป็นเรื่องสิทธิ์เข้าถึงก่อน
- curl -I ดู path จริง ยิงแบบไม่ล็อกอิน ถ้าได้ 401, 403 หรือเด้ง 302 ไปหน้า login แปลว่าไฟล์โดนกัน ถ้าได้ 404 แปลว่า path ผิดหรือไม่มีไฟล์
- วาง favicon ที่ root ให้ดึงได้เสรี ย้ายออกจากโฟลเดอร์ที่โดนกัน ประกาศใน
<head>ทุกขนาด host เดียวกัน ถ้ามีด่านหน้า (gate, auth, worker) ให้ whitelist path ไอคอนคืน 200 ก่อนด่าน - ใส่ Organization logo JSON-LD เป็นสัญญาณโลโก้แบรนด์เสริม
- verify แล้วขอ index ใหม่ curl ยืนยันว่าทุก path คืน 200 กับ request ที่ไม่ล็อกอิน แล้วเข้า Search Console กด Request Indexing หน้าแรก
สุดท้ายคืออดใจรอ Google recrawl favicon ไม่บ่อย ตั้งแต่ไม่กี่วันถึงหลายสัปดาห์ ต่อให้แก้ถูกทุกอย่างแล้ว ไอคอนก็ไม่ได้เด้งกลับมาทันที การกด Request Indexing ช่วยกระตุ้นได้ แต่จังหวะสุดท้ายเป็นของ Google ขอแค่ curl ยืนยันว่าฝั่งเราเปิดประตูให้บอตครบแล้ว ที่เหลือคือเวลา
- ผล curl ทั้งหมด (401 / 302 / 200) ดึงสดจาก productize.life เมื่อ 8 ก.ค. 2026 เนื้อหาส่วนนี้เขียนจากงานที่ทำเอง
- เกณฑ์ favicon ของ Google (สี่เหลี่ยมจัตุรัส, แนะนำใหญ่กว่า 48x48px, host เดียว, URL คงที่, ต้องดึงได้, recrawl เป็นวันถึงสัปดาห์): Google Search Central: Define a favicon
- ด่านหน้าที่ใช้ whitelist path คือ Cloudflare Worker ตัวเดียวกับที่เล่าไว้ในโพสต์ชุดนี้