[{"data":1,"prerenderedAt":11},["ShallowReactive",2],{"guide:th:blog\u002Ffavicon-sizes-which-ones-you-need":-1,"article-th-favicon-sizes-which-ones-you-need":3},{"slug":4,"title":5,"description":6,"date":7,"keyword":8,"tool":9,"html":10},"favicon-sizes-which-ones-you-need","ขนาด Favicon: ขนาดไหนที่คุณต้องใช้จริงๆ ในปี 2025","คำแนะนำภาษาอังกฤษธรรมชาติเกี่ยวกับขนาด favicon: 16x16, 32x32, 180x180, 192 และ 512 ว่าเบราว์เซอร์สมัยใหม่ใช้ขนาดไหน และ HTML ที่ต้องใส่","2026-10-12","favicon size","favicon-generator","\u003Cp>ค้นหา "favicon size" แล้วคุณจะได้เห็นตัวเลขที่ขัดแย้งกันมากมาย: 16x16, 32x32, 48x48, 64, 180, 192, 256, 512 รายชื่อส่วนใหญ่เหล่านั้นเขียนขึ้นเมื่อสิบปีที่แล้วและไม่เคยอัปเดต ในทางปฏิบัติ เว็บไซต์สมัยใหม่ต้องการไฟล์ประมาณสี่ไฟล์ และคุณสามารถทำทั้งหมดได้ในครั้งเดียวด้วย \u003Ca href=\"\u002Fth\u002Ffavicon-generator\">favicon generator\u003C\u002Fa> ซึ่งทำงานทั้งหมดในเบราว์เซอร์ของคุณ ดังนั้นโลโก้ของคุณจึงไม่ออกจากเครื่องของคุณ\u003C\u002Fp>\n\u003Cp>ต่อไปนี้คือสิ่งที่ขนาดแต่ละขนาดใช้สำหรับ และสิ่งที่คุณสามารถข้ามได้อย่างปลอดภัย\u003C\u002Fp>\n\u003Ch2>ขนาดที่ยังคงสำคัญ\u003C\u002Fh2>\n\u003Ch3>16x16 และ 32x32 — แท็บเบราว์เซอร์และบุ๊กมาร์ก\u003C\u002Fh3>\n\u003Cp>นี่คือ favicon แบบคลาสสิก 16x16 คือสิ่งที่คุณเห็นในแถบแท็บที่เต็มไปด้วย 32x32 ใช้บนหน้าจอ high-DPI แถบบุ๊กมาร์ก และ UI แถบที่อยู่บางส่วน แอตทริบิวต์ทั้งสองมักจะรวมกันในไฟล์ \u003Ccode>favicon.ico\u003C\u002Fcode> เดียว ซึ่งสามารถแนบความละเอียดหลายระดับได้พร้อมกัน Windows ยังดึง 48x48 จากไฟล์ \u003Ccode>.ico\u003C\u002Fcode> เดียวกันสำหรับทางลัดเดสก์ทอป ดังนั้นการรวมไฟล์นั้นจึงไม่ต้องเสียค่าใจมากนัก\u003C\u002Fp>\n\u003Ch3>180x180 — Apple touch icon\u003C\u002Fh3>\n\u003Cp>เมื่อใครสักคนแตะ "Add to Home Screen" บน iPhone หรือ iPad Safari จะมองหา \u003Ccode>apple-touch-icon.png\u003C\u002Fcode> ที่ 180x180 หากไม่มี iOS จะหน้าจอชัตเตอร์หน้าของคุณและใช้แทน ซึ่งดูเลวร้าย PNG เดียวนี้ครอบคลุมทุกอุปกรณ์ iOS ปัจจุบันเพราะระบบจะลดขนาดลงตามต้องการ\u003C\u002Fp>\n\u003Ch3>192x192 และ 512x512 — Android และ PWAs\u003C\u002Fh3>\n\u003Cp>Android Chrome และเว็บแอปที่ติดตั้งได้อ่านไอคอนจาก \u003Ccode>site.webmanifest\u003C\u002Fcode> ของคุณ 192 คือไอคอนโฮมสกรีน 512 ใช้สำหรับหน้าจอสเปลช และรายชื่อแอป หากคุณต้องการให้เว็บไซต์ของคุณติดตั้งได้ในวันใดวันหนึ่ง คุณต้องใช้ทั้งสองอย่าง\u003C\u002Fp>\n\u003Ch3>SVG — ตัวเลือก แต่ดี\u003C\u002Fh3>\n\u003Cp>Firefox และ Chrome ทั้งคู่รองรับ favicon SVG ซึ่งยังคงคมชัดในที่ใดก็ได้และสามารถตอบสนองต่อโหมดมืดด้วย media query ภายในไฟล์ได้ มันเป็นโบนัส ไม่ใช่การแทนที่ Safari และเบราว์เซอร์เก่ายังคงต้องการเวอร์ชัน raster\u003C\u002Fp>\n\u003Ch2>สิ่งที่คุณสามารถข้าม\u003C\u002Fh2>\n\u003Cp>64x64, 96x96, 128x128, ชุดภาพ Windows tile ทั้งหมด และโหลกำหนดไฟล์ \u003Ccode>apple-touch-icon-76x76\u003C\u002Fcode> ลักษณะนั้นสิ่งเหล่านี้ได้รับความจำเป็นสำหรับอุปกรณ์ที่หายไปในส่วนใหญ่แล้ว การจัดส่งไฟล์ไอคอนยี่สิบไฟล์จะทำให้ repo ของคุณบวมและไม่ได้รับเกนอะไรที่วัดได้\u003C\u002Fp>\n\u003Ch2>HTML\u003C\u002Fh2>\n\u003Cp>วางไฟล์ไว้ในรูทของเว็บไซต์และเพิ่มสิ่งนี้ไปยัง \u003Ccode><head>\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><link rel="icon" href="\u002Ffavicon.ico" sizes="any">\n<link rel="icon" href="\u002Ficon.svg" type="image\u002Fsvg+xml">\n<link rel="apple-touch-icon" href="\u002Fapple-touch-icon.png">\n<link rel="manifest" href="\u002Fsite.webmanifest">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>และในแมนิเฟสต์:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-json\">"icons": [\n  { "src": "\u002Ficon-192.png", "type": "image\u002Fpng", "sizes": "192x192" },\n  { "src": "\u002Ficon-512.png", "type": "image\u002Fpng", "sizes": "512x512" }\n]\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>การออกแบบสำหรับ 16 พิกเซล\u003C\u002Fh2>\n\u003Cp>ส่วนที่ยากไม่ใช่การส่งออก แต่คือโลโก้เต็มรูปแบบกลายเป็นโคลนที่ 16x16 สิ่งบางอย่างที่ช่วย:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>ใช้ส่วนย่อย ไม่ใช่โลโก้ทั้งหมด\u003C\u002Fstrong> ตัวอักษรหนึ่ง อักษรสัญลักษณ์หนึ่ง รูปทรงหนึ่ง Wordmarks อ่านไม่ได้ที่ขนาดแท็บ\u003C\u002Fli>\n\u003Cli>\u003Cstrong>เริ่มต้นสี่เหลี่ยมจัตุรัส\u003C\u002Fstrong> หากแหล่งที่มาของคุณเป็นโลโก้ที่กว้าง \u003Ca href=\"\u002Fth\u002Fcrop-image\">ตัดเป็นสี่เหลี่ยมจัตุรัส\u003C\u002Fa> ก่อนเพื่อให้เครื่องกำเนิดไฟฟ้าไม่ได้ตัดมันด้วยช่องว่างว่าง\u003C\u002Fli>\n\u003Cli>\u003Cstrong>รักษาความเปรียบต่อให้สูง\u003C\u002Fstrong> เส้นบาง ๆ หายไป รูปทรงแข็งอยู่รอด\u003C\u002Fli>\n\u003Cli>\u003Cstrong>ตัดสินใจเลือกพื้นหลัง\u003C\u002Fstrong> PNG ที่มีความโปร่งใส ปรับตัวให้เข้ากับโครมเบราว์เซอร์สว่างและมืด หากเครื่องหมายของคุณมีสีเข้ม ให้พิจารณาให้มันเป็นกระเบื้องสีทึบแทน คุณสามารถ \u003Ca href=\"\u002Fth\u002Fremove-background\">ลบพื้นหลัง\u003C\u002Fa> จากภาพหน้าจอโลโก้ได้ในเวลาไม่กี่วินาทีหากคุณมีเพียง JPG แบบเรียบเท่านั้น\u003C\u002Fli>\n\u003Cli>\u003Cstrong>จำพื้นที่ปลอดภัย\u003C\u002Fstrong> Android มาสกไอคอนเป็นวงกลมและสควิร์คเคิลส ดังนั้นให้ช่องว่างประมาณ 10% รอบขอบของงาน 512 ของคุณ\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>หากคุณจับคู่พื้นหลังของ favicon กับสีแบรนด์ของเว็บไซต์ของคุณ \u003Ca href=\"\u002Fth\u002Fcolor-picker\">image color picker\u003C\u002Fa> จะดึง hex ที่แน่นอนจากภาพหน้าจอที่มีอยู่ ซึ่งมีประโยชน์สำหรับแท็ก \u003Ccode>theme-color\u003C\u002Fcode> meta ด้วย\u003C\u002Fp>\n\u003Ch2>สร้างชุดทั้งหมดพร้อมกัน\u003C\u002Fh2>\n\u003Cp>ไม่ต้องอัปโหลดอะไร: วาง PNG หรือ SVG สี่เหลี่ยมจัตุรัสลงใน \u003Ca href=\"\u002Fth\u002Ffavicon-generator\">free browser-based favicon generator\u003C\u002Fa> และมันจะสร้าง \u003Ccode>.ico\u003C\u002Fcode> ไอคอน Apple touch และ PNG 192\u002F512 ในเครื่อง ในแท็บของคุณเอง ไม่มีอะไรถูกส่งไปยังเซิร์ฟเวอร์ ไม่มีการลงชื่อสมัครสมาชิก และไม่มีสำเนาของโลโก้ที่ยังไม่เปิดตัวของคุณสิ้นสุดในถังเก็บข้อมูลของบุคคลอื่น\u003C\u002Fp>\n\u003Cp>จากนั้นซูมเบราว์เซอร์ของคุณออก มองไปที่แท็บ และถามคำถามเดียวที่สำคัญ: คุณบอกได้ไหมว่ามันคืออะไร?\u003C\u002Fp>\n",1791831540154]