แปลงฟรี

ฟาวิคอน เครื่องกำเนิดไฟฟ้า

สร้างไฟล์ favicon ในหลายขนาด (16x16 ถึง 512x512) จากรูปภาพใดก็ได้ ฟรี ทันที และทำงานได้อย่างสมบูรณ์ในเบราว์เซอร์ของคุณ

ลากและวางรูปภาพที่นี่

รองรับ PNG, JPG, SVG, WebP สูงสุด 10MB

หรือ

เกี่ยวกับเครื่องมือนี้

ไอคอน Fav คือไอคอนขนาดเล็กที่ปรากฏในแท็บเบราว์เซอร์ บุ๊กมาร์ก และรายการประวัติ favicon ดั้งเดิม — ไฟล์ ICO ขนาด 16×16 ที่ /favicon.ico — ได้ขยายออกเป็นชุดไอคอนที่ซับซ้อนในขนาดที่แตกต่างกันสำหรับแพลตฟอร์มที่แตกต่างกัน: 16×16 และ 32×32 สำหรับแท็บเบราว์เซอร์, 180×180 สำหรับหน้าจอหลักของ iOS, 192×192 และ 512×512 สำหรับ Android และขนาดต่างๆ สำหรับไทล์ Windows การสร้างทั้งหมดนี้จากอิมเมจแหล่งเดียวคือสิ่งที่เครื่องมือสร้าง favicon สมัยใหม่ทำ

เครื่องมือนี้ใช้รูปภาพต้นฉบับที่มีความละเอียดสูงเพียงภาพเดียว (โดยทั่วไปจะเป็นโลโก้สี่เหลี่ยมจัตุรัส) และสร้างชุดเนื้อหาไอคอน Fav ทั้งหมด รวมถึงแท็กลิงก์ HTML ที่จำเป็นในการอ้างอิง เอาต์พุตประกอบด้วย ICO, PNG หลายรายการ และ manifest.json สำหรับข้อมูลเมตาของแอปพลิเคชันเว็บแบบก้าวหน้า วางไฟล์ผลลัพธ์ที่รากของไซต์ของคุณและอ้างอิงผ่าน HTML ที่สร้างขึ้น

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

ทำไมต้องสร้าง Favicon

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

ข้อกำหนด favicon ยุคใหม่ได้เติบโตขึ้นเกินกว่า /favicon.ico ไอคอนหน้าจอหลักของ iOS, ไอคอน Android Chrome, ไอคอนไทล์ Windows และรูปแบบโหมดมืดล้วนใช้ไฟล์ที่แตกต่างกัน การสร้างทั้งหมดจากแหล่งเดียวทำให้มั่นใจได้ถึงการสร้างแบรนด์ที่สอดคล้องกันโดยไม่ต้องจัดการแต่ละไฟล์ด้วยตนเอง

วิธีใช้งาน

อัปโหลดภาพต้นฉบับ รับชุด favicon แบบเต็ม

  1. อัปโหลดภาพต้นฉบับ: ใช้รูปภาพสี่เหลี่ยมจัตุรัสที่มีขนาดอย่างน้อย 512×512 พิกเซล แนะนำให้ใช้ PNG (รองรับความโปร่งใส); SVG ก็ได้รับการยอมรับเช่นกัน แหล่งที่มีความละเอียดสูงจะทำให้ไอคอนมีขนาดเล็กลงและคมชัดยิ่งขึ้น
  2. กำหนดค่าตัวเลือกแพลตฟอร์ม: เปิดใช้งานเอาต์พุต iOS, Android, Windows และ PWA ตามต้องการ การตั้งค่าเริ่มต้นจะสร้างชุดมาตรฐานที่ไซต์ส่วนใหญ่ต้องการ
  3. ปรับแต่งสีและธีม: เลือกสีธีมสำหรับไทล์ Windows และหน้าจอสแปลช PWA จับคู่เอกลักษณ์ของแบรนด์ของคุณ
  4. ดาวน์โหลดและปรับใช้: บันทึกไฟล์ zip ที่สร้างขึ้น วางไฟล์ไว้ที่รากของไซต์ของคุณ และเพิ่มแท็กลิงก์ HTML ที่สร้างขึ้นลงใน <head> ของคุณ HTML อ้างอิงแต่ละไอคอนในขนาดที่เหมาะสม

กรณีการใช้งานทั่วไป

รายละเอียดทางเทคนิค

ชุด favicon สมัยใหม่เต็มรูปแบบ: favicon.ico (16+32+48 หลายความละเอียด), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, mstile-150x150.png รวมถึง site.webmanifest สำหรับ PWA, browserconfig.xml สำหรับ Windows

PNG แต่ละรายการสร้างขึ้นจากการสุ่มตัวอย่างแบบแคนวาสจากแหล่งที่มา ICO ถูกสร้างขึ้นใน JavaScript โดยรวมเวอร์ชัน 16/32/48 เป็นรูปแบบ ICO หลายความละเอียดโดยใช้การเขียน DataView

แท็กลิงก์ HTML อ้างอิงแต่ละไฟล์ด้วยแอตทริบิวต์ rel และขนาดที่เหมาะสม ตัวสร้างจะสร้างสิ่งเหล่านี้เป็นตัวอย่างข้อมูลที่พร้อมสำหรับการคัดลอกและวางสำหรับ <head> ของไซต์ของคุณ

แนวทางปฏิบัติที่ดีที่สุด

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

ฉันควรอัปโหลดรูปแบบภาพใด
PNG ที่มีพื้นหลังโปร่งใสจะทำงานได้ดีที่สุด ใช้รูปภาพสี่เหลี่ยมจัตุรัสที่มีขนาดอย่างน้อย 512x512 พิกเซล เพื่อให้เครื่องมือสามารถย่อขนาดได้โดยไม่สูญเสียคุณภาพ SVG ยังทำงานได้ดีเนื่องจากสามารถปรับขนาดได้ทุกขนาด
สิ่งนี้สร้างขนาดใด?
16x16 (แท็บเบราว์เซอร์), 32x32 (แท็บเบราว์เซอร์ @2x), 48x48 (ทาสก์บาร์ของ Windows), 180x180 (ไอคอน Apple Touch), 192x192 (หน้าจอหลักของ Android), 512x512 (หน้าจอสแปลช PWA) ไฟล์ ICO มีขนาด 16, 32 และ 48px
ฉันจะวางไฟล์ favicon ไว้ที่ไหน
วาง favicon.ico ในไดเรกทอรีรากของเว็บไซต์ของคุณ ขนาด PNG อื่นๆ จะอยู่ในโฟลเดอร์สาธารณะของคุณหรือเส้นทางที่สามารถเข้าถึงได้ เพิ่มแท็กลิงก์ HTML ในส่วน <head> ที่ชี้ไปยังตำแหน่งไฟล์แต่ละไฟล์
เหตุใด favicon ของฉันจึงไม่อัปเดตในเบราว์เซอร์
เบราว์เซอร์จะแคช favicons อย่างจริงจัง ล้างแคชของเบราว์เซอร์ ลองเปิดในหน้าต่างที่ไม่ระบุตัวตน หรือเพิ่มสตริงการสืบค้นเวอร์ชัน (?v=2) ลงใน URL ไอคอน Fav เพื่อบังคับให้รีเฟรช
เหตุใด favicon ของฉันจึงไม่อัปเดต
เบราว์เซอร์จะแคช favicons อย่างมาก บางครั้งเป็นเวลาหลายวัน บังคับให้รีเฟรชโดยการล้างแคช เปิด URL ของไอคอนโดยตรง หรือเพิ่มพารามิเตอร์การค้นหาเวอร์ชันต่อท้ายแท็กลิงก์
รูปภาพของฉันถูกอัพโหลดไปยังเซิร์ฟเวอร์หรือไม่?
ไม่ การสร้างเกิดขึ้นในเบราว์เซอร์ของคุณ
ฉันควรใช้ SVG หรือ PNG
SVG สำหรับแหล่งที่มา (ไม่ขึ้นอยู่กับความละเอียด) เครื่องกำเนิดเอาต์พุต PNG ในขนาดที่กำหนด เบราว์เซอร์สมัยใหม่ยังรองรับไอคอน Favicons SVG ผ่านทางลิงก์ rel=icon type=image/svg+xml
site.webmanifest คืออะไร
ไฟล์ Manifest JSON สำหรับ Progressive Web App ที่อธิบายไอคอน สี และข้อมูลเมตาอื่นๆ จำเป็นสำหรับเว็บแอปที่สามารถติดตั้งได้ ไม่เป็นอันตรายที่จะรวมไว้แม้แต่ในไซต์มาตรฐาน