ไอคอน Fav สำหรับ Webflow
Webflow จัดการ favicon ของคุณจากการตั้งค่าโครงการ และให้บริการจาก CDN ทั่วโลกในทุกหน้าที่เผยแพร่ อัปโหลดสี่เหลี่ยมจัตุรัส PNG หรือ ICO ซึ่งควรจะเป็น 512×512 และ Webflow จะแทรกแท็ก `<link rel='icon'>` ที่ถูกต้องทั่วทั้งไซต์ของคุณ สำหรับการรองรับ SVG และ apple-touch-icon ให้ใช้การแทรกโค้ดที่กำหนดเอง `<head>` ซึ่งมีอยู่ในแผนแบบชำระเงิน เริ่มต้นด้วย favicon generator เพื่อสร้างแพ็คเกจไอคอนที่สมบูรณ์ก่อนที่คุณจะอัปโหลด
การอัปโหลดไอคอน Fav ของ Webflow เป็นส่วนหนึ่งของแผงการตั้งค่าโครงการ ซึ่งแยกจาก Canvas ของ Designer คลิกชื่อโปรเจ็กต์ในแดชบอร์ด Webflow จากนั้นไปที่การตั้งค่าโปรเจ็กต์ > ทั่วไป เลื่อนลงไปที่ส่วน Favicon และไอคอนแอป คลิกพื้นที่อัปโหลด และเลือกไฟล์รูปภาพของคุณ Webflow ยอมรับรูปแบบ PNG, ICO และ GIF
PNG 32×32 พิกเซลเป็นขนาดขั้นต่ำที่ต้องการสำหรับผู้อัปโหลดไอคอน favicon ของ Webflow แต่เริ่มจาก 512×512 จะให้ผลลัพธ์ที่คมชัดกว่ามาก Webflow จะลดขนาดรูปภาพของคุณลงสำหรับการแสดงแท็บและรูปแบบต่างๆ ที่สร้างโดย CDN จัดเตรียมแหล่งทำความสะอาดที่ใหญ่ที่สุดที่คุณมีเสมอ — เครื่องมือสร้างทำให้การสร้าง 512×512 PNG จากโลโก้ใดๆ เป็นเรื่องง่าย
Webflow โฮสต์ไอคอนประจำเว็บไซต์บน CDN ของตัวเองด้วย URL ที่สร้างขึ้นโดยอัตโนมัติ (โดยปกติจะอยู่ในรูปแบบ uploads-ssl.webflow.com/...) คุณไม่จำเป็นต้องระบุเส้นทาง CDN ด้วยตนเอง หลังจากอัปโหลดแล้ว คลิกบันทึก จากนั้นเผยแพร่โครงการของคุณ ไอคอนประจำเว็บไซต์จะถูกแทรกเมื่อเผยแพร่ ไม่ใช่แค่ในการบันทึก — การเปลี่ยนแปลงที่ยังไม่ได้เผยแพร่จะไม่ปรากฏบนโดเมนที่ใช้งานอยู่ของคุณ
พื้นหลังโปร่งใสทำงานอย่างถูกต้องกับการอัปโหลดไอคอน Fav Webflow CDN รักษาช่องอัลฟ่า PNG ดังนั้นไอคอนพื้นหลังโปร่งใสจึงแสดงผลได้อย่างหมดจดเมื่อเทียบกับธีมเบราว์เซอร์ในโหมดมืด หากโลโก้ของคุณมีพื้นหลังสีขาวทึบหรือสี โลโก้นั้นจะปรากฏเป็นกล่องสี่เหลี่ยมในแท็บเบราว์เซอร์ ส่งออกโลโก้ของคุณโดยไม่มีการเติมพื้นหลังก่อนอัปโหลด
เครื่องมืออัปโหลดไอคอน Fav ในตัวของ Webflow ไม่รองรับไฟล์ SVG หากคุณต้องการไอคอน Fav เวกเตอร์ SVG สำหรับการเรนเดอร์ที่คมชัดทุกขนาดและรองรับโหมดมืด ให้เพิ่มด้วยการแทรกโค้ดแบบกำหนดเอง ไปที่การตั้งค่าโปรเจ็กต์ > รหัสที่กำหนดเอง > รหัสหลัก และเพิ่ม: `<link rel='icon' type='image/svg+xml' href='https://yourdomain.com/favicon.svg'>` โฮสต์ไฟล์ SVG บนเซิร์ฟเวอร์ของคุณเองหรือบริการ CDN
การเพิ่ม apple-touch-icon สำหรับการติดตั้งหน้าจอหลัก iOS ยังต้องใช้โค้ดที่กำหนดเองใน Webflow เนื่องจากโปรแกรมอัปโหลดในตัวจะจัดการเฉพาะ favicon มาตรฐานเท่านั้น อัปโหลด 180×180 apple-touch-icon.png ไปยังโฮสต์ไฟล์ (หรือ Webflow Assets หากแผนของคุณรองรับ) จากนั้นแทรก `<link rel='apple-touch-icon' size='180x180' href='URL_TO_YOUR_FILE'>` ในการตั้งค่าโปรเจ็กต์ > รหัสที่กำหนดเอง > ช่องรหัสหลัก
การสนับสนุนไอคอน PWA ของ Webflow มีข้อจำกัดเมื่อเทียบกับเฟรมเวิร์ก เช่น Next.js ไม่มีตัวสร้างรายการเว็บดั้งเดิมใน Webflow สำหรับการรองรับการติดตั้ง PWA เต็มรูปแบบ ให้สร้างไฟล์ site.webmanifest JSON ด้วยตนเอง โฮสต์ไฟล์ไว้ภายนอก และแทรกแท็กลิงก์รายการผ่านโค้ดที่กำหนดเอง รวมรายการ 192×192 และ 512×512 PNG ในอาร์เรย์ไอคอนรายการ
หากคุณกำลังสร้างไซต์ Webflow สำหรับไคลเอ็นต์ ไอคอนประจำไซต์มักจะถูกตั้งค่าล่าช้าในโปรเจ็กต์แล้วจึงลืมไป ขั้นตอนการทำงานที่มีประโยชน์คือการตั้งค่าไอคอน Fav ตัวยึดตำแหน่งในช่วงต้นของโปรเจ็กต์และแทนที่ไอคอนดังกล่าวก่อนแฮนด์ออฟ Webflow จะไม่สร้างประวัติไอคอน Fav เวอร์ชัน — เมื่อคุณบันทึกไอคอน Fav ใหม่ ไอคอนเก่าจะหายไปจากการตั้งค่าโปรเจ็กต์ แม้ว่าจะยังคงสามารถเข้าถึงได้ผ่าน URL CDN ของมันในบางครั้ง
ไซต์ Webflow แบบหลายโดเมน — ที่ซึ่งโปรเจ็กต์เดียวกันถูกเผยแพร่ไปยังโดเมนที่กำหนดเองหลายโดเมน — แชร์ favicon การตั้งค่าโปรเจ็กต์เดียว ไม่มีการแทนที่ไอคอน favicon ต่อโดเมนใน Webflow ดั้งเดิม ไอคอนเดียวกันนี้จะปรากฏบนโดเมนที่เผยแพร่ทั้งหมด หากคุณต้องการไอคอนต่อโดเมน ให้ใช้การแทรกโค้ดแบบกำหนดเองเพื่อแทนที่แท็กลิงก์ไอคอนแบบมีเงื่อนไข (ต้องใช้ Webflow CMS หรือตรรกะแบบกำหนดเอง)
การอัปเดต Favicon ใน Webflow อาจต้องใช้เวลาในการเผยแพร่เนื่องจากการแคช CDN หลังจากเผยแพร่ favicon ใหม่ ไอคอนเก่าอาจปรากฏในเบราว์เซอร์เป็นเวลา 24-48 ชั่วโมง เปิดไซต์สดของคุณในหน้าต่างส่วนตัว/ไม่ระบุตัวตนเพื่อดูไอคอนที่อัปเดตโดยไม่มีการรบกวนแคชของเบราว์เซอร์ในเครื่อง หากผู้ชมของคุณใช้หน้าที่แคช CDN ความล่าช้าในการเผยแพร่จะขึ้นอยู่กับการตั้งค่า CDN TTL ของ Webflow
สำหรับผู้ใช้ Webflow Editor (ไคลเอนต์แก้ไขเนื้อหาโดยไม่มีสิทธิ์การเข้าถึงของนักออกแบบ) ไอคอน Fav จะไม่สามารถเปลี่ยนผ่านตัวแก้ไขได้ — โดยจะถูกล็อคไว้ในการตั้งค่าโครงการ เฉพาะผู้ทำงานร่วมกันที่มีสิทธิ์การเข้าถึงระดับนักออกแบบหรือเจ้าของบัญชีเท่านั้นที่สามารถอัปเดตไอคอน Fav ได้ สื่อสารเรื่องนี้ให้ลูกค้าทราบอย่างชัดเจน เพื่อที่พวกเขาจะได้ทราบว่าจะต้องขอการอัปเดตไอคอน Fav ในอนาคตได้ที่ไหน
หลังจากเผยแพร่ favicon Webflow ของคุณแล้ว ให้ใช้ favicon tester เพื่อยืนยันว่าแก้ไขได้ที่โดเมนที่ใช้งานจริงของคุณ เปรียบเทียบผลลัพธ์กับขนาดที่ต้องการ: 32×32 สำหรับแท็บ, 180×180 สำหรับ iOS หากคุณเพิ่ม apple-touch-icon นอกจากนี้ โปรดอ่านคำแนะนำ best favicon size เพื่อทำความเข้าใจว่าขนาดใดที่ปรับปรุงคะแนนความสมบูรณ์ของไอคอนของเว็บไซต์ได้
วิธีการทำงาน
- 1
สร้างแพ็คเกจ favicon ที่สมบูรณ์
ใช้ [favicon generator](tool:favicon-generator) กับแหล่งที่มา 512×512 PNG หรือ SVG ดาวน์โหลดแพ็คเกจ — คุณจะใช้ PNG สำหรับผู้อัปโหลด Webflow และ SVG และ apple-touch-icon สำหรับการแทรกโค้ดแบบกำหนดเอง
- 2
เปิดการตั้งค่าโปรเจ็กต์
ในแดชบอร์ด Webflow คลิกชื่อโปรเจ็กต์ของคุณ ไปที่การตั้งค่าโปรเจ็กต์ > ทั่วไป และเลื่อนไปที่ส่วน Favicon และไอคอนแอป
- 3
อัปโหลดไอคอน Fav ของคุณ PNG
คลิกพื้นที่อัปโหลด เลือก 512×512 PNG ของคุณ แล้วคลิกบันทึก อย่าเพิ่งเผยแพร่ — เลือกที่จะเพิ่ม SVG และ apple-touch-icon ผ่านโค้ดที่กำหนดเองก่อน
- 4
เพิ่ม SVG และ apple-touch-icon ด้วยรหัสที่กำหนดเอง
ในการตั้งค่าโครงการ > รหัสที่กำหนดเอง > รหัสหลัก ให้เพิ่ม `<link rel='icon' type='image/svg+xml' href='URL_TO_SVG'>` และ `<link rel='apple-touch-icon' size='180x180' href='URL_TO_180PNG'>` โฮสต์ทั้งสองไฟล์ภายนอกหรือในสินทรัพย์ Webflow
- 5
เผยแพร่และตรวจสอบ
คลิกเผยแพร่ใน Webflow เปิดโดเมนสดของคุณในหน้าต่างที่ไม่ระบุตัวตนเพื่อยืนยันว่าไอคอน Fav ปรากฏในแท็บเบราว์เซอร์ ใช้ [favicon tester](utility:favicon-tester) สำหรับการตรวจสอบความถูกต้องภายนอก
ลองเลย
สร้าง favicon ที่พร้อมใช้งาน Webflow
เครื่องมือสร้าง Faviconคำถามที่พบบ่อย
การตั้งค่า favicon ใน Webflow อยู่ที่ไหน+
การตั้งค่าโปรเจ็กต์ > ทั่วไป > Favicon และไอคอนแอป คลิกพื้นที่อัปโหลด เลือกไฟล์ PNG หรือ ICO คลิกบันทึก จากนั้นเผยแพร่ ไอคอน Fav จะเผยแพร่บนโดเมนที่คุณกำหนดเองหลังจากการเผยแพร่
Webflow ยอมรับ favicon ขนาดใด+
Webflow ยอมรับ PNG, ICO และ GIF โดยมี 32×32 เป็นเป้าหมายในการแสดง อัปโหลดขนาด 512×512 เสมอเพื่อให้ได้ผลลัพธ์การสุ่มตัวอย่างที่คมชัดที่สุด ช่องอัปโหลดอาจแสดงตัวอย่างขนาด 32×32 แต่คุณภาพของภาพที่แสดงจริงนั้นมาจากความละเอียดของแหล่งที่มาของคุณ
เหตุใด Webflow favicon ของฉันจึงไม่อัปเดตหลังจากที่ฉันเผยแพร่+
ความล่าช้าของแคช CDN เป็นเรื่องปกติ เปิดหน้าต่างที่ไม่ระบุตัวตน/ส่วนตัว และไปที่ URL ของเว็บไซต์ของคุณ หากไอคอนเก่ายังคงอยู่ ให้รอ 24 ชั่วโมงเพื่อให้ Webflow CDN หมดอายุ เพิ่ม ?v=2 ต่อท้าย favicon href ในโค้ดที่กำหนดเอง หากจำเป็นเพื่อบังคับให้ดึงข้อมูลใหม่
ฉันสามารถใช้ favicon SVG ใน Webflow ได้หรือไม่+
ไม่ผ่านตัวอัปโหลดในตัว — ยอมรับเฉพาะรูปแบบแรสเตอร์เท่านั้น เพิ่ม SVG ผ่านการตั้งค่าโปรเจ็กต์ > โค้ดที่กำหนดเอง > โค้ดหลัก: `<link rel='icon' type='image/svg+xml' href='YOUR_SVG_URL'>` โฮสต์ SVG บนเซิร์ฟเวอร์ของคุณเองหรือ CDN
ฉันจะเพิ่ม apple-touch-icon ใน Webflow ได้อย่างไร+
เครื่องมืออัปโหลด favicon ของ Webflow ไม่ได้สร้าง apple-touch-icon โดยอัตโนมัติ อัปโหลด 180×180 PNG ไปยังโฮสต์ไฟล์ จากนั้นแทรก `<link rel='apple-touch-icon' size='180x180' href='URL'>` ในการตั้งค่าโปรเจ็กต์ > โค้ดที่กำหนดเอง > โค้ดส่วนหัว
Webflow รองรับไอคอนรายการ PWA หรือไม่+
ไม่ใช่โดยกำเนิด หากต้องการเพิ่มไอคอน PWA ให้สร้างและโฮสต์ไฟล์ site.webmanifest ภายนอกด้วยรายการไอคอน 192×192 และ 512×512 จากนั้นแทรกแท็กลิงก์รายการผ่านทางโค้ดที่กำหนดเองของ Webflow การแทรก `<head>`
ลูกค้าของฉันไม่สามารถเปลี่ยน favicon Webflow ได้ เพราะเหตุใด+
ไอคอน Fav ได้รับการตั้งค่าในการตั้งค่าโปรเจ็กต์ ซึ่งจำเป็นต้องมีสิทธิ์การเข้าถึงแบบนักออกแบบ Webflow Editor (โหมดแก้ไขเนื้อหาไคลเอนต์) ไม่เปิดเผยการตั้งค่าโครงการ เจ้าของไซต์หรือผู้ทำงานร่วมกันระดับนักออกแบบต้องทำการเปลี่ยนแปลงไอคอน Fav