ชุด favicon ที่ถูกต้องมีมากกว่าหนึ่งไฟล์: เบราว์เซอร์ต้องการ .ico หลายขนาด iOS ต้องการ apple-touch-icon 180px Android ต้องการ PNG 192 และ 512px พร้อมเว็บมานิเฟสต์ เครื่องมือนี้เรนเดอร์ทั้งหมดจากภาพเดียวและแพ็กลงใน ZIP เดียว พร้อมแท็ก HTML ที่แน่นอนให้วางลงใน <head> ของคุณ
ตัวอย่างแสดงไอคอนของคุณที่ขนาดจริง 16, 32 และ 48px เพื่อให้คุณตรวจว่ามันยังจดจำได้ที่ขนาดจิ๋วก่อนที่จะนำไปใช้
วิธีใช้งาน
- เพิ่มโลโก้ของคุณภาพสี่เหลี่ยมจัตุรัสเหมาะที่สุด ภาพอื่นจะถูกครอปกึ่งกลาง
- ตรวจขนาดเล็กตัวอย่าง 16px คือสิ่งที่ผู้ใช้ส่วนใหญ่จะเห็นจริงในแท็บ
- ดาวน์โหลด ZIPfavicon.ico, PNG หกไฟล์, site.webmanifest และ html-snippet.txt พร้อมวาง
ใส่รูปเดียว ได้ชุด favicon ครบเซ็ต
วางโลโก้หรือไอคอนหนึ่งรูป แล้วตัวสร้างนี้จะทำชุดครบที่เว็บยุคใหม่ต้องใช้ ทั้ง favicon.ico หลายขนาดที่รวมเวอร์ชัน 16, 32 และ 48 พิกเซล ไฟล์ PNG เดี่ยว ๆ ขนาด 16, 32, 48, 180 สำหรับ Apple touch icon และ 192 กับ 512 สำหรับ Android และการติดตั้ง PWA พร้อม site.webmanifest ทั้งหมดดาวน์โหลดเป็น ZIP เดียว วางลง root ของโปรเจกต์ได้เลย
คุณยังได้โค้ด HTML head พร้อมวางที่ต่อ link และ meta tag ให้ถูกต้องเรียบร้อยแล้ว ก๊อปลงเทมเพลตของคุณ อัปโหลดไฟล์ แล้ว favicon ก็โผล่ในแท็บเบราว์เซอร์ บุ๊กมาร์ก และทางลัดหน้าโฮมโดยไม่ต้องเขียนมาร์กอัปเองสักบรรทัด
ไอคอนคมชัดทุกขนาด
Favicon มีขนาดเล็กแบบโหดร้าย ตัวสร้างจึงเรนเดอร์พรีวิวขนาดจริงที่ 16, 32 และ 48 พิกเซล ตรงตามที่แท็บเบราว์เซอร์จะแสดง ทำให้คุณจับโลโก้ที่กลายเป็นก้อนเละที่ 16px ได้ก่อนปล่อยจริง หากรูปต้นฉบับไม่เป็นจัตุรัส เครื่องมือจะครอบตัดจากกึ่งกลางให้ไอคอนสมดุลแทนที่จะถูกบี้
กระบวนการทั้งหมดทำงานในเบราว์เซอร์จากรูปต้นฉบับของคุณ หมายความว่าคุณสร้าง favicon แบบ PNG และ ICO จากโลโก้ความละเอียดสูงได้โดยไม่ต้องอัปโหลดหรือมีบัญชี
ผู้คนใช้ทำอะไรบ้าง
เปิดตัวเว็บใหม่ — สร้าง favicon.ico และ PNG ทุกขนาดในรอบเดียว ให้แท็บและบุ๊กมาร์กดูเรียบร้อยตั้งแต่วันแรก
เพิ่มไอคอนติดตั้ง PWA — ส่งออก PNG 192 กับ 512 พร้อม site.webmanifest ให้แอปติดตั้งพร้อมไอคอนหน้าโฮมที่เหมาะสม
Apple touch icon — สร้าง apple-touch-icon ขนาด 180x180 ให้บุ๊กมาร์กและหน้าโฮมบน iOS แสดงผลคมชัด
รีแบรนด์เว็บเดิม — ผ่านโลโก้ใหม่ตัวเดียวเข้าตัวสร้าง แล้วเปลี่ยนชุดไอคอนทั้งหมดในครั้งเดียว
ส่งมอบให้ลูกค้า — ส่ง ZIP เดียวที่มี ico, PNG, manifest และโค้ด head ให้นักพัฒนาแค่วางลงไป
เช็กความอ่านง่ายที่ขนาดเล็ก — ใช้พรีวิวขนาดจริง 16px ยืนยันว่าโลโก้รายละเอียดเยอะยังอ่านออกเมื่อเป็นไอคอน
โลโก้ไม่เป็นจัตุรัส — ใส่ wordmark แนวกว้างแล้วให้การครอบตัดกึ่งกลางเปลี่ยนเป็น favicon จัตุรัสที่สมดุล
เว็บ static หรือโปรเจกต์เฟรมเวิร์ก — ก๊อป head tag ที่สร้างให้ลงเทมเพลต Next, Astro หรือ HTML ธรรมดาแล้วปล่อยได้เลย
สร้างชุด favicon ครบชุดจากภาพเดียว ในเบราว์เซอร์ ในรอบเดียว
favicon ฟังดูเหมือนเป็นเรื่องรองขนาด 16×16 พิกเซลตัวเดียว และหลายปีมันก็เป็นเช่นนั้น แต่เบราว์เซอร์และแพลตฟอร์มสมัยใหม่ได้เปลี่ยนมันให้กลายเป็นงานย่อม ๆ อย่างเงียบ ๆ การทำให้ถูกต้องในวันนี้คุณต้องมี favicon.ico ชุด PNG ตั้งแต่ 16px จนถึง 512px ไอคอน Apple touch สำหรับหน้าจอหลัก iOS ไฟล์ site.webmanifest เพื่อให้ติดตั้งเว็บเป็นแอปได้ และบล็อกแท็ก <link> กับ <meta> ที่ถูกต้องใน <head> ของ HTML พลาดขนาดหนึ่งไอคอนแท็บก็เบลอบนจอเรตินา พลาด manifest ไอคอน "เพิ่มไปยังหน้าจอหลัก" ก็ย้อนกลับไปใช้ภาพหน้าจอ ทำบล็อกแท็กผิดบางแพลตฟอร์มก็เมินทั้งชุด
นั่นเป็นผลลัพธ์จุกจิกจำนวนมากสำหรับงานที่คุณทำครั้งเดียวต่อโปรเจกต์แล้วก็ลืมรายละเอียดไป IMG.DIY รับภาพต้นทางภาพเดียวและผลิตชุดครบ ทั้ง .ico PNG ทุกขนาด web manifest และสนิปเพต HTML แบบคัดลอกวาง โดยปรับขนาดในเบราว์เซอร์ของคุณทั้งหมดด้วย Canvas โลโก้ของคุณถูกอ่านในเครื่องและเรนเดอร์เป็นแต่ละขนาดเป้าหมายบนอุปกรณ์ ไม่มีการอัปโหลด สำหรับเครื่องหมายแบรนด์หรือโลโก้สินค้าที่ยังไม่เปิดตัวซึ่งคุณไม่อยากโพสต์ไปยังเซิร์ฟเวอร์ของบุคคลที่สามก่อนเปิดตัว การรับประกันว่าอยู่ในเครื่องนั้นคุ้มค่าที่จะมี และไม่เสียอะไรเลย
เพราะทั้งกระบวนการทำงานฝั่งไคลเอนต์ มันจึงทำงานออฟไลน์ได้เมื่อ PWA ถูกแคชแล้ว คุณจึงสร้างไอคอนใหม่ได้บนเครื่องทำงานที่ล็อกดาวน์หรือตอนไม่มีการเชื่อมต่อ ฟรี ไม่ต้องมีบัญชี ไม่มีลายน้ำฝังในไอคอนของคุณ
สิ่งที่ทำให้แตกต่าง
- ชุดครบ ไม่ใช่แค่ .ico ICO, PNG ตั้งแต่ 16 ถึง 512, ไอคอน Apple touch และ
site.webmanifestในดาวน์โหลดเดียว - มี HTML แบบคัดลอกวาง บล็อก
<link>/<meta>เป๊ะ ๆ ที่หย่อนลง<head>ของคุณ ไอคอนจึงลงทะเบียนได้จริงข้ามเบราว์เซอร์ - ไม่มีการอัปโหลด โลโก้ของคุณถูกปรับขนาดในเครื่อง มีประโยชน์เมื่อเครื่องหมายเป็นความลับหรือก่อนเปิดตัว
- รอบเดียว ไม่มีวิซาร์ด ป้อนภาพเดียว ได้ทุกอย่าง ไม่มีขั้นตอนหลายชั้นที่ถามตัวเลือกแพลตฟอร์มที่คุณต้องไปค้นเอง
- ออฟไลน์และสะอาด PWA ที่แคชไว้ ไม่ต้องสมัคร ไม่มีลายน้ำบนไอคอนใด ๆ ที่สร้าง
IMG.DIY เทียบกับตัวสร้าง favicon อื่น ๆ
| แง่มุม | favicon.io | realfavicongenerator.net | ทำเอง (แอปออกแบบ + โค้ด) | IMG.DIY |
|---|---|---|---|---|
| อัปโหลดไฟล์ | ใช่ ไปที่เซิร์ฟเวอร์ของเขา | ใช่ ไปที่เซิร์ฟเวอร์ของเขา | ไม่ ในเครื่อง | ไม่ อยู่ในเบราว์เซอร์ |
| ชุดครบ (.ico + PNG + manifest) | ได้ | ได้ ละเอียดมาก | คุณประกอบเอง | ได้ |
| มีสนิปเพต HTML | มี | มี ละเอียด | คุณเขียนเอง | มี |
| ขั้นตอนถึงผลลัพธ์ | น้อย | มากกว่า (ตัวเลือกเยอะ) | มาก | รอบเดียว |
| ใช้งานออฟไลน์ | ไม่ได้ | ไม่ได้ | ได้ | ได้ หลังเข้าครั้งแรก |
| ราคา | ฟรี | ฟรีจำกัด มีตัวเลือกจ่ายเงิน | ค่าแอป + เวลาของคุณ | ฟรี |
| ต้องมีบัญชี | ไม่ต้อง | ไม่ต้อง | ไม่ต้อง | ไม่ต้อง |
พูดตรง ๆ เรื่องคู่แข่ง realfavicongenerator ยอดเยี่ยมและละเอียดกว่าจริง มันแสดงตัวอย่างไอคอนของคุณบนแพลตฟอร์มจริง จัดการกรณีขอบอย่างมาสก์แท็บปักหมุดของ Safari และธีม และให้คุณปรับหน้าตาต่อแพลตฟอร์มได้ หากคุณต้องการการควบคุมระดับนั้นและไม่รังเกียจการอัปโหลดภาพ มันเป็นตัวเลือกที่ดี favicon.io เร็วและง่ายและผลิตชุดที่แน่นเช่นกัน ความต่างของ IMG.DIY คือการผสม ผลลัพธ์ครบ กับ ไม่อัปโหลด และ รอบเดียว คุณได้ผลลัพธ์เชิงปฏิบัติเดียวกัน ทั้ง ico, PNG, manifest และ HTML ที่ต่อเข้ากัน โดยโลโก้ไม่ออกจากเบราว์เซอร์และไม่ต้องเดินผ่านวิซาร์ดตั้งค่า สำหรับ "ฉันมีโลโก้ ให้ทุกอย่างที่ต้องเอาไปวาง และอย่าส่งไฟล์ของฉันไปไหน" นั่นคือความลงตัว
ทำไมต้อง IMG.DIY
ชุดครบ
ICO + PNG 16/32/48/180/192/512 + มานิเฟสต์
HTML คัดลอกวาง
แท็ก link ที่แน่นอนรวมมาเป็นไฟล์ข้อความ
ตัวอย่างขนาดจริง
ดูไอคอนที่ขนาดจริง 16/32/48px ก่อน
เป็นส่วนตัว
โลโก้ของคุณไม่ออกจากเบราว์เซอร์