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 ถูกเผยแพร่ในเส้นทางที่ถูกต้อง จากนั้นล้างแคชหรือทดสอบในหน้าต่างส่วนตัว เครื่องมือค้นหาและบางแพลตฟอร์มจะอัปเดตไอคอนตามรอบของตนเอง

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

สร้างกระดาษบรรทัดห้าเส้น

สร้างกระดาษบรรทัดห้าเส้นสำหรับพิมพ์ ทั้งบรรทัดเปล่า กุญแจซอลหรือกุญแจฟา บรรทัดคู่สำหรับเปียโน หรือแท็บกีตาร์ เลือกจำนวน ระยะห่างเส้น A4 หรือ Letter และขอบกระดาษ แล้วดาวน์โหลด PDF หรือ SVG

เครื่องมือทำภาพโมเสกจากตัวต่อ LEGO

เปลี่ยนรูปถ่ายเป็นแบบโมเสกจัตุรัส 16, 32, 48 หรือ 64 ช่องต่อด้าน ดูสีโดยประมาณ นับแผ่นตัวต่อ 1×1 และดาวน์โหลดคู่มือประกอบที่มีหมายเลขกำกับ

ตัวเลือกสี Material Design

สำรวจพาเลตสีของ Material Design คัดลอกเฉดสีใดก็ได้ (ตั้งแต่ 50 ถึง A700) ในรูปแบบ HEX, RGB หรือ HSL เพียงแตะครั้งเดียว

โปรแกรมแปลงรูปแบบภาพ

แปลงรูปภาพเป็น JPG, PNG หรือ WebP ได้ทันทีในเบราว์เซอร์ พร้อมควบคุมคุณภาพสำหรับรูปแบบบีบอัดและรักษาความโปร่งใสใน PNG และ WebP

ปรับขนาด PNG

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

เครื่องอ่านบาร์โค้ด

เลือกรูปภาพบาร์โค้ดเพื่ออ่านค่าที่เข้ารหัสและชนิดของบาร์โค้ด รองรับ EAN-13, UPC-A และ Code 128 พร้อมผลตรวจเลขตรวจสอบของ EAN และ UPC

เครื่องมือนี้มีให้บริการในภาษาอื่น