Softonic

เครื่องสร้าง Favicon จากอักษรย่อและอีโมจิ

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

วิธีสร้าง favicon

  1. 1

    เลือกเนื้อหาของไอคอน

    ป้อนอักษรย่อหนึ่งหรือสองตัวเพื่อสร้างสัญลักษณ์ตัวอักษรแบบกระชับ หรือใช้อีโมจิหนึ่งตัวเป็นดีไซน์

  2. 2

    ตกแต่งดีไซน์

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

  3. 3

    ตรวจสอบตัวอย่าง

    ดูตัวอย่าง 512 px พร้อมพิจารณาว่าดีไซน์ยังคงชัดเจนเมื่อย่อเป็นไอคอนแท็บขนาด 16 px หรือไม่

  4. 4

    ดาวน์โหลดและติดตั้ง

    ดาวน์โหลดชุด favicon ที่สร้างภายในเครื่อง เพิ่มไฟล์ลงในเว็บไซต์ แล้ววางหรือปรับโค้ดสำหรับ head ที่ให้มา

ไฟล์ที่รวมอยู่ในชุด favicon

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

ไฟล์ ขนาดหรือเนื้อหา การใช้งานหลัก
favicon.ico เฟรม 16, 32 และ 48 px แท็บเบราว์เซอร์ บุ๊กมาร์ก และซอฟต์แวร์ที่ยังเรียกใช้ไฟล์ ICO
favicon-16x16.png 16 × 16 px favicon ขนาดเล็กสำหรับเบราว์เซอร์
favicon-32x32.png 32 × 32 px favicon มาตรฐานสำหรับเบราว์เซอร์
apple-touch-icon.png 180 × 180 px ไอคอนสัมผัสของ Apple
android-chrome-192x192.png 192 × 192 px ไอคอนเว็บแอป Android ขนาดเล็ก
android-chrome-512x512.png 512 × 512 px ไอคอนเว็บแอปขนาดใหญ่
mstile-150x150.png 150 × 150 px รูปไทล์ของ Microsoft
site.webmanifest ไฟล์ manifest แบบ JSON อ้างอิงไอคอน Android สำหรับเบราว์เซอร์ที่ใช้ web app manifest
browserconfig.xml การตั้งค่า XML อ้างอิงรูปและสีไทล์ของ Microsoft
favicon-head.html โค้ด HTML ข้อมูลอ้างอิงไอคอน manifest และการตั้งค่าเบราว์เซอร์ที่พร้อมคัดลอก

ทำให้ favicon ยังชัดเจนที่ 16 px

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

  • ใช้สีตัวอักษรและสีพื้นหลังที่ตัดกันชัดเจน
  • เว้นพื้นที่รอบตัวอักษรหรืออีโมจิเพื่อไม่ให้หน้ากากของแพลตฟอร์มทำให้ดีไซน์แน่นเกินไป
  • เปรียบเทียบรูปสี่เหลี่ยม สี่เหลี่ยมมุมมน และวงกลมเพื่อเลือกเค้าโครงที่ชัดที่สุด
  • ตรวจสอบไอคอนขนาดเล็กที่ส่งออกควบคู่กับตัวอย่าง 512 px เพราะดีไซน์ที่สวยในขนาดใหญ่อาจไม่ชัดที่ 16 px
  • ทดสอบ favicon ที่ติดตั้งแล้วในหลายเบราว์เซอร์ ทั้งบนส่วนติดต่อแบบสว่างและแบบมืด

เพิ่มไฟล์ที่สร้างลงในเว็บไซต์

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

ไฟล์ที่ให้มาจะสร้างข้อมูลอ้างอิงของไอคอน แต่ไม่ได้ทำให้เว็บไซต์เป็นเว็บแอปแบบก้าวหน้าที่ติดตั้งได้โดยอัตโนมัติ การติดตั้งอาจต้องมีฟิลด์ manifest เพิ่มเติม การโฮสต์ที่ปลอดภัย และเงื่อนไขเฉพาะของเบราว์เซอร์

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

ได้ ป้อนอักษรย่อหนึ่งหรือสองตัว แล้วเลือกรูปทรง สีพื้นหลัง สีตัวอักษร และรูปแบบอักษร การจำกัดให้เป็นข้อความสั้นช่วยให้อ่านง่ายขึ้นเมื่อ favicon มีขนาดเล็ก

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

มี ชุดไฟล์ประกอบด้วย favicon.ico ที่มีเฟรม 16, 32 และ 48 px, favicon PNG ขนาด 16 และ 32 px แยกกัน และไอคอนขนาดใหญ่สำหรับ Apple, Android และ Microsoft

เครื่องสร้าง Favicon ทำดีไซน์ใหม่จากอักษรย่อ ข้อความสั้น หรืออีโมจิหนึ่งตัว ส่วนเครื่องแปลง Favicon เป็นอีกเครื่องมือหนึ่งสำหรับแปลงภาพ PNG, JPEG หรือ WebP ที่มีอยู่เป็นไฟล์ favicon

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

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

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

เครื่องมือที่เกี่ยวข้อง

แปลง WebP เป็น JPG

แปลงรูปภาพ WebP เป็น JPG/JPEG ได้โดยตรงในเบราว์เซอร์ เลือกคุณภาพ ผสานความโปร่งใสเข้ากับสีพื้นหลัง แล้วดาวน์โหลดโดยไม่ต้องอัปโหลดไฟล์

ตัวสร้างบาร์โค้ด

สร้างบาร์โค้ด 1D ที่สแกนได้ใน Code 128, Code 39, EAN-13, UPC-A, ITF-14 และ Codabar ส่งออกเป็น PNG, SVG หรือ PDF สำหรับงานพิมพ์

BMP เป็น PNG

แปลงไฟล์ BMP เป็น PNG ในเบราว์เซอร์ แบบไม่สูญเสียคุณภาพ คงความลึกของสี และเพิ่มความโปร่งใสจากช่อง alpha ของ BMP ต้นฉบับได้

แปลง PNG เป็น SVG แบบเวกเตอร์

แปลงภาพ PNG แบบราสเตอร์เป็นพาธ SVG ในเบราว์เซอร์ เหมาะกับโลโก้ ไอคอน และงานลายเส้น ปรับค่า threshold จำนวนสี และการทำให้เส้นเรียบได้

เครื่องมือปรับขนาดรูปภาพสำหรับโซเชียลมีเดีย

ปรับขนาดรูปภาพหนึ่งภาพเป็นพรีเซ็ตโซเชียลมีเดียในตัวสำหรับ Instagram, Facebook, X, LinkedIn, YouTube, Pinterest และ TikTok ดูตัวอย่าง PNG แต่ละไฟล์และดาวน์โหลดขนาดที่ต้องใช้

บีบอัด GIF

ลดขนาด GIF แอนิเมชันในเบราว์เซอร์ด้วยการย่อมิติ เก็บเฟรมน้อยลง และปรับคุณภาพการเข้ารหัส ดูตัวอย่างลูปก่อนดาวน์โหลด