tigtools

เครื่องมือสร้าง Favicon

สร้างชุด favicon ให้ครบจากโลโก้ หรือจากตัวอักษรหนึ่งหรือสองตัวบนพื้นหลังสี แล้วคัดลอกแท็ก HTML ไอคอนจะถูกสร้างในเบราว์เซอร์ของคุณ

ทำงานในเบราว์เซอร์ของคุณ ไม่ต้องสมัคร

สร้างจาก

ควรใช้หนึ่งหรือสองอักขระ ระบบจะใช้เฉพาะสองตัวแรก

62%
รูปร่าง

วิธีใช้งาน

  1. เลือกตัวอักษรแล้วพิมพ์ตัวอักษรหนึ่งหรือสองตัวพร้อมเลือกสี หรือเลือกรูปภาพแล้วเลือกโลโก้ (ควรเป็นรูปสี่เหลี่ยมจัตุรัสและมีขนาดอย่างน้อย 512 px)
  2. ตรวจดูตัวอย่างทุกขนาด โดยเฉพาะ 16 และ 32 px ซึ่งใช้แสดงบนแท็บเบราว์เซอร์
  3. ดาวน์โหลด ZIP แล้วอัปโหลดไฟล์ไปยังโฟลเดอร์รากของเว็บไซต์
  4. วางแท็ก HTML ในส่วน head ของหน้าเว็บ และแก้ชื่อใน site.webmanifest หากจำเป็น

วิธีการทำงาน

เบราว์เซอร์และอุปกรณ์ต่าง ๆ มองหาไอคอนจากตำแหน่งที่แตกต่างกัน ชุดไฟล์ที่สร้างที่นี่ครอบคลุมการใช้งานทั่วไป ได้แก่ favicon.ico ที่มีภาพขนาด 16, 32 และ 48 px สำหรับแท็บเบราว์เซอร์ บุ๊กมาร์ก และซอฟต์แวร์รุ่นเก่าที่เรียกใช้ /favicon.ico โดยอัตโนมัติ; ไฟล์ PNG ขนาด 16 และ 32 px ที่อ้างอิงด้วยแท็ก link; apple-touch-icon ขนาด 180 × 180 ที่ใช้เมื่อเพิ่มเว็บไซต์ลงในหน้าจอโฮมของ iPhone หรือ iPad; และไอคอนขนาด 192 และ 512 px ที่อ้างอิงจาก site.webmanifest สำหรับหน้าจอโฮม Android และเว็บแอปที่ติดตั้งได้

ไฟล์ favicon.ico จัดเก็บไอคอนเป็นภาพ PNG ภายในคอนเทนเนอร์ ICO ซึ่งเบราว์เซอร์ปัจจุบันและ Windows Vista ขึ้นไปรองรับ ไฟล์ ICO และ ZIP สร้างขึ้นด้วยโค้ดในหน้านี้ โดยไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์

ควรใช้ดีไซน์เรียบง่ายสำหรับไอคอนขนาดเล็ก เพราะเส้นบางและข้อความขนาดเล็กจะหายไปเมื่อย่อเหลือ 16 × 16 พิกเซล ตัวอักษรหนาหรือสัญลักษณ์โลโก้แบบเรียบง่ายจึงเหมาะกว่าโลโก้เต็มที่มีข้อความ ภาพจะถูกย่อขนาดเป็นหลายขั้นตอนด้วยคุณภาพสูง apple-touch-icon จะมีสีพื้นทึบเสมอ เพราะ iOS แสดงพื้นที่โปร่งใสเป็นสีดำ และ iOS จะทำมุมไอคอนให้โค้งเอง

หลังอัปโหลดไอคอนใหม่ เบราว์เซอร์อาจยังแสดง favicon เก่าอยู่ระยะหนึ่งเนื่องจากแคชไว้นาน การรีเฟรชแบบเต็มหรือเปิด /favicon.ico โดยตรงมักช่วยได้

ตัวอย่าง

ไอคอนตัวอักษรสำหรับโปรเจกต์ใหม่

พิมพ์ "TG" ด้วยตัวอักษรสีขาวบนพื้นสี่เหลี่ยมมุมมนสีเขียวเข้ม ก็ได้ไอคอนเรียบง่ายที่ยังอ่านออกเมื่อแสดงขนาด 16 × 16 px บนแท็บเบราว์เซอร์ โดยไม่ต้องออกแบบโลโก้

สร้างไอคอนจากโลโก้ที่มีอยู่

ใช้โลโก้ PNG ขนาด 1024 × 1024 ที่มีพื้นหลังโปร่งใส แล้วเลือกปรับให้พอดีทั้งภาพ จะได้ไอคอนแท็บแบบโปร่งใสและ apple-touch-icon บนพื้นสีแบรนด์ของคุณ

โลโก้แนวกว้าง

สำหรับ wordmark ขนาด 1200 × 300 การครอบตรงกลางจะแสดงเฉพาะตัวอักษรตรงกลาง ส่วนการปรับให้พอดีทั้งภาพจะแสดงทุกอย่างแต่ทำให้เล็กมาก โดยทั่วไปใช้สัญลักษณ์โลโก้แบบสี่เหลี่ยมแยกต่างหากจะดูดีกว่า

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

ยังจำเป็นต้องมี favicon.ico ไหม?

ยังมีประโยชน์อยู่ เบราว์เซอร์ โปรแกรมอ่านฟีด และเครื่องมือบางอย่างจะเรียกใช้ /favicon.ico จากโฟลเดอร์รากของเว็บไซต์ แม้ไม่มีแท็ก link ก็ตาม เบราว์เซอร์รุ่นใหม่ยังใช้ไอคอน PNG ที่อ้างอิงใน HTML ด้วย

ต้องวางไฟล์ไว้ที่ไหน?

อัปโหลดไฟล์ไปยังโฟลเดอร์รากของเว็บไซต์ ซึ่งอยู่ระดับเดียวกับหน้าแรก เพื่อให้ /favicon.ico และพาธอื่น ๆ ใน HTML ใช้งานได้ หากใช้โฟลเดอร์ย่อย ให้แก้พาธในแท็ก link และใน site.webmanifest

ทำไมยังเห็น favicon เก่าอยู่?

เบราว์เซอร์แคช favicon แยกต่างหากและเป็นเวลานาน ลองรีเฟรชแบบเต็ม เปิด /favicon.ico ในแท็บใหม่ หรือตรวจสอบในหน้าต่างส่วนตัว การเปลี่ยนชื่อไฟล์ เช่น favicon-v2.ico จะช่วยบังคับให้โหลดใหม่ได้เช่นกัน

เครื่องมือนี้สร้าง favicon แบบ SVG ไหม?

ไม่ เครื่องมือนี้สร้างไฟล์ PNG และ ICO ซึ่งใช้งานได้ทุกที่ หากมีโลโก้ SVG อยู่แล้ว คุณสามารถเพิ่มเองด้วยแท็ก link ที่มี type เป็น image/svg+xml นอกเหนือจากไฟล์เหล่านี้ได้

ความเป็นส่วนตัว

ไอคอน ไฟล์ ICO และ ZIP สร้างขึ้นในเบราว์เซอร์ของคุณ รูปภาพและข้อความของคุณจะไม่ถูกอัปโหลด จัดเก็บ หรือนำไปรวมในข้อมูลวิเคราะห์