วิธีเพิ่ม Favicon และ Webclip ใน Webflow

วิธีเพิ่ม favicon และ webclip ใน Webflow: ตั้งค่า Icons ตรงไหน ขนาดที่ Webflow สร้างให้ วิธีเผยแพร่ และแก้ปัญหาเมื่อไอคอนไม่อัปเดต

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

Favicon ของ Webflow ควรมีขนาดเท่าไร

ศูนย์ช่วยเหลือของ Webflow ระบุ favicon ขนาด 32x32 และ webclip ขนาด 256x256 ในขั้นตอนปัจจุบัน คุณอัปโหลดภาพสี่เหลี่ยมจัตุรัสเพียงภาพเดียว แล้ว Webflow จะสร้างขนาดอื่นให้เอง ดังนั้นควรเริ่มจากไฟล์สี่เหลี่ยมจัตุรัสขนาดอย่างน้อย 256x256 พิกเซล และยังอ่านออกชัดเจนเมื่อย่อเล็ก

อัปโหลด favicon ใน Webflow ได้ที่ไหน

เปิด Site settings ไปที่แท็บ General แล้วหาส่วน Icons อัปโหลดภาพสี่เหลี่ยมจัตุรัสของคุณ เลือกไอคอนที่ต้องการอัปเดต กดนำไปใช้ แล้วเผยแพร่เว็บไซต์ คู่มือรุ่นเก่าเรียกส่วนนี้ว่า Project settings แต่เป็นที่เดียวกัน

Webclip ใน Webflow คืออะไร

Webclip คือไอคอนขนาดใหญ่ที่แสดงเมื่อมีคนบันทึกเว็บไซต์ของคุณไว้บนหน้าจอโฮมของโทรศัพท์หรือทางลัดลักษณะคล้ายกัน Webflow ระบุขนาด 256x256 พิกเซล และแยกต่างหากจากไอคอนเล็กที่แสดงบนแท็บเบราว์เซอร์

ทำไม favicon ใน Webflow ยังไม่แสดงหลังอัปโหลดแล้ว

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

Webflow รองรับ favicon แบบ SVG หรือโหมดมืดหรือไม่

บันทึกการอัปเดตของ Webflow ระบุว่าอัปโหลดไฟล์ PNG, JPG, GIF, ICO หรือ SVG ได้ และบทความช่วยเหลือมีไอคอนแท็บเบราว์เซอร์สำหรับโหมดมืดให้เลือกใช้ นอกจากนี้ Webflow จะแปลงไฟล์ SVG เป็น PNG เพื่อให้เข้ากันได้กับหลายเบราว์เซอร์ จึงควรทดสอบผลลัพธ์ในเบราว์เซอร์ที่คุณให้ความสำคัญ

Google จะแสดง favicon ใหม่ของ Webflow ใช้เวลานานแค่ไหน

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

สรุปสั้น ๆ: ใน Webflow ให้เปิด Site settings > General > Icons อัปโหลดภาพสี่เหลี่ยมจัตุรัสหนึ่งภาพ เลือกไอคอนที่ต้องการอัปเดต (favicon โหมดสว่าง, favicon โหมดมืดที่เป็นตัวเลือกเสริม, webclip) กดนำไปใช้ แล้ว เผยแพร่ (Publish) เว็บไซต์ Webflow ระบุ favicon ขนาด 32x32 และ webclip ขนาด 256x256 และสร้างขนาดอื่นจากภาพที่คุณอัปโหลดให้เอง เว็บไซต์จริงจะไม่เปลี่ยนจนกว่าคุณจะเผยแพร่ (ตรวจสอบเมื่อเดือนพฤศจิกายน 2026 กับศูนย์ช่วยเหลือและบันทึกการอัปเดตของ Webflow)

Webflow ต้องการอะไรบ้าง

บทความสอนรุ่นเก่ามักบอกว่ามีช่องอัปโหลดสองช่อง ช่องหนึ่งสำหรับ favicon 32x32 และอีกช่องสำหรับ webclip 256x256 แต่บทความช่วยเหลือปัจจุบันของ Webflow ง่ายกว่านั้น คือคุณอัปโหลดภาพสี่เหลี่ยมจัตุรัสเพียงภาพเดียว แล้ว Webflow จัดการเรื่องขนาดให้ ไอคอนแต่ละแบบใช้งานดังนี้

ไอคอน	ขนาดที่ Webflow ระบุ	แสดงที่ไหน
Favicon (โหมดสว่าง)	32x32	แท็บเบราว์เซอร์และบุ๊กมาร์ก
Favicon (โหมดมืด, ไม่บังคับ)	32x32	แท็บเบราว์เซอร์เมื่อเบราว์เซอร์อยู่ในโหมดมืด
Webclip	256x256	ทางลัดบนหน้าจอโฮมและลิงก์ที่บันทึกไว้ในลักษณะคล้ายกัน
ไอคอนเสริมที่สร้างให้อัตโนมัติ	favicon 48x48, touch icon 180x180 และ 192x192	Webflow สร้างจากภาพที่คุณอัปโหลด

รูปแบบไฟล์ที่อัปโหลดได้ตามบันทึกการอัปเดตของ Webflow: PNG, JPG, GIF, ICO และ SVG โดยไฟล์ SVG จะถูกแปลงเป็น PNG เพื่อให้เข้ากันได้กับหลายเบราว์เซอร์

หากต้องการดูรายละเอียดขนาดบนแพลตฟอร์มอื่น ๆ เพิ่มเติม อ่านได้ที่คู่มือขนาด favicon

เตรียมภาพให้พร้อมก่อน

Favicon แสดงผลกว้างประมาณ 16 ถึง 32 พิกเซลบนแท็บ ภาพต้นฉบับจึงสำคัญกว่าการตั้งค่าใด ๆ

เริ่มจากสี่เหลี่ยมจัตุรัส ส่งออกภาพแคนวาสสี่เหลี่ยมจัตุรัสขนาด 256x256 ขึ้นไป เพื่อไม่ให้ webclip ถูกขยายจนภาพแตก
ทำให้เรียบง่าย ใช้โลโก้สัญลักษณ์หรือตัวอักษรตัวเดียว ไม่ใช่โลโก้ตัวอักษรเต็ม เพราะรายละเอียดเล็ก ๆ จะเลอะเมื่อแสดงในขนาดแท็บ
ระวังพื้นหลัง PNG พื้นหลังโปร่งใสดูดีบนแท็บสีสว่าง แต่อาจมองไม่เห็นบนแท็บสีเข้ม หากใช้ favicon โหมดมืด ให้ทำเวอร์ชันที่สัญลักษณ์เป็นสีอ่อน
ตั้งชื่อไฟล์ให้เป็นกลาง ชื่อไฟล์ที่อัปโหลดอาจปรากฏใน HTML ที่เผยแพร่ จึงควรเลี่ยงชื่ออย่าง "final_v3_REAL.png"

วิธีเพิ่ม favicon และ webclip ใน Webflow

เปิดโปรเจกต์ใน Webflow Designer หรือแดชบอร์ด แล้วไปที่ Site settings
เลือกแท็บ General แล้วเลื่อนลงไปที่ Icons
คลิก Upload icon แล้วเลือกภาพสี่เหลี่ยมจัตุรัสของคุณ
เลือกไอคอนที่ภาพนี้จะอัปเดต ได้แก่ favicon, favicon โหมดมืดที่เป็นตัวเลือกเสริม และ webclip
หากต้องการไอคอนโหมดมืดที่แตกต่างออกไป ให้เพิ่มในช่องโหมดมืด ขั้นตอนนี้ไม่บังคับ
คลิก Apply ข้อความบนหน้าจออาจเปลี่ยนเล็กน้อยเมื่อ Webflow ปรับปรุง ให้ดูตามชื่อปุ่มที่คุณเห็น
เผยแพร่ (Publish) เว็บไซต์ไปยังโดเมนของคุณ การบันทึกอย่างเดียวไม่ทำให้ไอคอนขึ้นบนเว็บไซต์จริง
เปิดเว็บไซต์จริงในหน้าต่างส่วนตัวแล้วดูที่แท็บ

เช็กลิสต์ที่คัดลอกไปใช้ได้

`` [ ] ภาพต้นฉบับเป็นสี่เหลี่ยมจัตุรัส ขนาด 256x256 ขึ้นไป [ ] สัญลักษณ์เรียบง่ายพอที่จะอ่านออกในขนาดแท็บ [ ] ทดสอบบนธีมเบราว์เซอร์สว่างและมืดแล้ว [ ] อัปโหลดที่ Site settings > General > Icons แล้ว [ ] กดนำไปใช้แล้ว [ ] เผยแพร่ไปยังโดเมนจริงแล้ว (ไม่ใช่แค่โดเมนทดสอบ webflow.io) [ ] ตรวจสอบในหน้าต่างส่วนตัวแล้ว [ ] รีเฟรชแบบฮาร์ดหรือล้างแคช หากยังเห็นไอคอนเก่า ``

การแก้ปัญหา

Favicon ยังเป็นไอคอนเก่าหรือโลโก้ Webflow

ลองตามลำดับนี้

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

อัปโหลดไม่ผ่านหรือภาพผิดเพี้ยน

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

ผลการค้นหาของ Google แสดงไอคอนผิด

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

ไอคอนเบลอบนแท็บ

มักเกิดจากภาพต้นฉบับมีรายละเอียดมากเกินไปหรือความละเอียดต่ำตั้งแต่แรก ให้วาดสัญลักษณ์ที่เรียบง่ายขึ้นในขนาดที่ใหญ่ขึ้นแล้วอัปโหลดใหม่

ควรอัปโหลดไฟล์รูปแบบไหน

รูปแบบ	เหมาะกับ	สิ่งที่ต้องระวัง
PNG	เว็บไซต์ส่วนใหญ่ เชื่อถือได้และรองรับพื้นหลังโปร่งใส	ต้องมีความละเอียดมากพอสำหรับ webclip
SVG	งานต้นฉบับแบบเวกเตอร์ที่คมชัด	Webflow แปลงเป็น PNG จึงควรดูตัวอย่างผลลัพธ์
ICO	ขั้นตอนการทำงานแบบเก่า	มักไม่จำเป็น เพราะ Webflow สร้างขนาดต่าง ๆ ให้อยู่แล้ว
JPG	แทบไม่ใช่ตัวเลือกที่ดี	ไม่รองรับพื้นหลังโปร่งใส ทำให้เกิดกล่องสีพื้นหลัง

หากไม่แน่ใจ PNG สี่เหลี่ยมจัตุรัสขนาด 256x256 ขึ้นไปคือตัวเลือกที่ปลอดภัยที่สุด

ส่วนนี้อยู่ตรงไหนของการเตรียมเปิดตัวเว็บไซต์

Favicon เป็นเพียงส่วนเล็ก ๆ ของเช็กลิสต์ก่อนเปิดตัว ควบคู่ไปกับชื่อเพจ คำอธิบาย และภาพสำหรับโซเชียล หากกำลังเปรียบเทียบแพลตฟอร์มก่อนตัดสินใจ หน้าเปรียบเทียบ Webflow และทางเลือกแทน Webflow สรุปข้อดีข้อเสียไว้ให้ ส่วนคู่มือทั่วไปในการเปลี่ยน favicon ใช้ได้หากคุณดูแลเว็บไซต์มากกว่าหนึ่งแพลตฟอร์ม

หากอยากเริ่มจากเลย์เอาต์สำเร็จรูป แพ็กเกจฟรีของ We.Inc ให้คุณเผยแพร่ได้สูงสุดสามเว็บไซต์จากเทมเพลตสำเร็จรูป ส่วนตัวสร้างเว็บด้วย AI ที่ร่างเว็บไซต์จากพรอมต์เริ่มต้นที่แพ็กเกจ Starter ราคา $20 ต่อเดือน สมัครได้ที่นี่

เริ่มต้นฟรี · ไม่ต้องใช้บัตรเครดิต

Umair Ali Sadaqat

ผู้ก่อตั้ง We.Inc

Umair เป็นผู้ก่อตั้ง We.Inc เขาเขียนเกี่ยวกับการสร้างเว็บไซต์ด้วย AI เอเจนซี และธุรกิจการบริหารเว็บสตูดิโอ

พร้อมสร้างสิ่งที่ยอดเยี่ยมแล้วหรือยัง

เข้าร่วมกับธุรกิจ 15,000+ รายที่ใช้ We.Inc เปิดตัว เติบโต และทำงานอัตโนมัติ ทั้งหมดจากแพลตฟอร์มเดียว

เริ่มต้นฟรี

ไม่ต้องใช้บัตรเครดิต · ติดต่อฝ่ายขาย