คู่มือฟาวิคอน
คำตอบตรงประเด็นสำหรับการสร้างฟาวิคอน: ควรใช้ขนาดใด รูปแบบใด และวางโค้ดอะไร
ขนาดฟาวิคอน: รูปแบบและการใช้งาน
เมื่อค้นหา “ขนาดฟาวิคอน” ยังพบรายการไฟล์สิบห้ารายการที่สืบทอดมาตั้งแต่ปี 2014 แต่ปัจจุบันเพียงหกขนาดก็ครอบคลุมแท็บเบราว์เซอร์ ผลการค้นหา iOS, Android และ PWA แล้ว มาดูว่ามีขนาดใดและใช้ทำอะไร
อ่านคู่มือแปลง PNG เป็น ICO ฟรี
.ico ยังเป็นรูปแบบที่ระบบคาดว่าจะพบที่รากเว็บไซต์ แต่เครื่องมือแปลงออนไลน์ส่วนใหญ่ให้คุณอัปโหลดภาพไปยังเซิร์ฟเวอร์ มาดูวิธีสร้าง favicon.ico หลายขนาดที่ถูกต้องจาก PNG โดยไม่อัปโหลดสิ่งใด
อ่านคู่มือไอคอน Apple Touch: ขนาด รูปแบบ และโค้ด
ไอคอน Apple Touch ระบุภาพที่ใช้เมื่อผู้เยี่ยมชมเพิ่มเว็บไซต์ลงหน้าจอหลัก iPhone โดยเฉพาะ แยกจากฟาวิคอนในแท็บเบราว์เซอร์และไอคอนที่ประกาศในแมนิเฟสต์เว็บแอป
อ่านคู่มือฟาวิคอนโหมดมืดด้วย SVG
โลโก้สีดำบนพื้นโปร่งใสดูดีในแท็บสว่าง แต่หายไปในแท็บมืด รูปแบบ ICO ปรับตัวไม่ได้ แต่ฟาวิคอน SVG ทำได้ด้วยกฎ CSS ที่เปลี่ยนสีตามธีมเบราว์เซอร์
อ่านคู่มือเพิ่มฟาวิคอนใน HTML
ฟาวิคอน HTML ที่ใช้งานได้แน่นอนไม่ได้อาศัยแท็กวิเศษเพียงตัวเดียว แต่ใช้ไฟล์จำนวนน้อยที่เข้าถึงได้และลิงก์ใน head ขั้นตอนนี้ครอบคลุมแท็บสมัยใหม่ โปรแกรมเก่า และทางลัดมือถือโดยไม่เพิ่มรูปแบบเก่ามากมาย
อ่านคู่มือฟาวิคอนไม่แสดงหรือไม่อัปเดต
เมื่อฟาวิคอนหาย ปัญหาอาจไม่ได้อยู่ที่ไฟล์ เบราว์เซอร์ CDN, service worker และเครื่องมือค้นหาต่างเก็บคนละเวอร์ชันได้ การวินิจฉัยตามลำดับช่วยไม่ให้เปลี่ยนหลายอย่างพร้อมกัน
อ่านคู่มือฟาวิคอนใน Next.js App Router
App Router สร้างแท็กไอคอนจากไฟล์ตามข้อตกลงหรือออบเจ็กต์ metadata ได้ ทั้งสองวิธีใช้ได้ แต่หากผสมกันโดยไม่มีกฎชัดเจนอาจเกิดประกาศที่แข่งขันกัน
อ่านคู่มือคู่มือฟาวิคอน SVG
SVG คงขอบคมชัดในทุกความหนาแน่นพิกเซลและปรับสีตามธีมได้ ความยืดหยุ่นนี้มีข้อจำกัดคือไฟล์ต้องทำงานได้ด้วยตัวเอง เรียบง่าย และอ่านออกในพื้นที่เล็กมาก
อ่านคู่มือ