คุณมีโลโก้อยู่แล้ว สิ่งที่คุณต้องการคือโลโก้นั้นถูกเปลี่ยนเป็นกองไฟล์ไอคอนจิ๋วที่เบราว์เซอร์คาดหวังfavicon.ico PNG หยิบมือที่ขนาดเฉพาะ web manifest และ HTML ที่ต่อทุกอย่างเข้าด้วยกัน การแปลงนั้นเป็นเรื่องกลไก และคุณทำได้ในราวหนึ่งนาทีโดยไม่ต้องติดตั้งอะไร
ปัญหาคือไม่ใช่ทุกโลโก้ที่ย่อได้อย่างสง่างาม ดังนั้นนี่ครอบคลุมทั้งเส้นทางด่วนและวิธีแก้โลโก้ที่กลายเป็นเละที่ 16 พิกเซล
เวอร์ชันสั้น
- ทำโลโก้ให้เป็นภาพ สี่เหลี่ยมจัตุรัสตามหลักคือ 512×512 หรือใหญ่กว่า บนพื้นหลังโปร่งใสหรือทึบ
- วางมันลงในเครื่องมือสร้าง Favicon
- ดาวน์โหลดชุดที่สร้างแล้ววางไฟล์ลงในรากเว็บของคุณ
- วางสนิปเป็ต HTML ที่ให้มาลงใน
<head>ของคุณ
นั่นคืองานทั้งหมด เครื่องมือสร้างส่งออก favicon.ico, PNG ที่ 16, 32, 48, 180, 192 และ 512, webmanifest และแท็ก <link> ที่แน่นอนคุณจึงไม่ต้องครอปภาพหกภาพด้วยมือหรือเดาไวยากรณ์ manifest
เตรียมโลโก้ของคุณก่อนนี่คือจุดที่ชนะหรือแพ้เรื่องคุณภาพ
favicon อยู่ที่ 16×16 ในแท็บเบราว์เซอร์ รายละเอียดใดก็ตามที่รอดขนาดนั้นไม่ได้ก็สูญเปล่า ใช้เวลาสองนาทีตรงนี้แล้วผลลัพธ์ดูคมทุกที่
ทำให้เป็นสี่เหลี่ยมจัตุรัส favicon เป็นสี่เหลี่ยมจัตุรัส โลโก้แนวนอนกว้างจะถูกใส่แถบดำหรือถูกบีบ ครอปเหลือองค์ประกอบที่จำได้มากที่สุดปกติคือเครื่องหมายหรืออักษรตัวเดียวแล้วจัดให้อยู่กึ่งกลางในกรอบสี่เหลี่ยมจัตุรัส
ตัดเวิร์ดมาร์กออก ชื่อบริษัทของคุณเต็ม ๆ จะอ่านไม่ออกที่ขนาดแท็บ "Acme Corporation" กลายเป็นรอยเลอะสีเทา เก็บสัญลักษณ์ หรือตัวอักษรเดียว และให้ชื่อเรื่องแท็บพาชื่อไป
เช็กคอนทราสต์กับทั้งสองธีม แท็บเบราว์เซอร์มีทั้งสว่างและมืด ไอคอนสีน้ำเงินเข้มหายไปบนแท็บมืด ไอคอนสีซีดหายไปบนแท็บสว่าง ถ้าเครื่องหมายของคุณเป็นสีแบนสีเดียว ให้แน่ใจว่าสีนั้นอ่านออกทั้งสองแบบ เส้นขอบบาง ๆ หรือชิปพื้นหลังทึบเล็ก ๆ ช่วยได้
เว้นช่องหายใจ เพิ่มระยะขอบนิดหน่อยด้านในสี่เหลี่ยมจัตุรัสเพื่อไม่ให้ไอคอนอัดชิดขอบ มันจะดูสมดุลกว่าในทุกช่อง
เริ่มใหญ่ ต้นทาง 512×512 (หรือใหญ่กว่า) ให้เครื่องมือสร้างมีรายละเอียดสะอาดให้ย่อจาก การขยายโลโก้จิ๋วก่อนแค่อบความเบลอเข้าไป
พื้นหลังโปร่งใสหรือทึบ?
ทั้งคู่ใช้ได้มันขึ้นอยู่กับลุคที่คุณต้องการ
- โปร่งใส ให้พื้นหลังแท็บหรือหน้าจอหลักโผล่ผ่าน สะอาดและทันสมัย และปรับตัวเข้ากับสภาพแวดล้อมสว่าง/มืด ดีที่สุดเมื่อเครื่องหมายของคุณเป็นรูปทรงที่โดดเด่น
- ชิปพื้นหลังทึบ (สี่เหลี่ยมมุมมนสีหลังเครื่องหมาย) รับประกันว่าไอคอนอ่านออกไม่ว่าอะไรอยู่ข้างหลัง นี่คือสิ่งที่ไอคอนแอปส่วนใหญ่ทำ และเป็นตัวเลือกที่ปลอดภัยกว่าถ้าโลโก้ของคุณบางหรือคอนทราสต์ต่ำ
ถ้าไม่แน่ใจ ชิปทึบในสีแบรนด์ของคุณคือตัวเลือกที่แข็งแรงมันไม่เคยหายไปในพื้นหลังที่เข้ากัน
หลังคุณดาวน์โหลด: ไฟล์ไปที่ไหน
เครื่องมือสร้างส่งชุดไฟล์และสนิปเป็ตให้คุณ กฎการวางสองข้อครอบคลุมมัน:
favicon.icoไปที่ ราก เว็บของคุณ (/favicon.ico) เบราว์เซอร์และ Windows หามันที่นั่นด้วยชื่อแม้ไม่มีแท็ก<link>- ทุกอย่างอื่นอยู่ที่ไหนก็ได้ที่คุณชอบตราบใดที่เส้นทางในสนิปเป็ต HTML ตรงกัน คนส่วนใหญ่วางทั้งหมดที่รากและวางสนิปเป็ตตามที่เป็น
จากนั้นก็แค่สนิปเป็ต <head>ลิงก์ไอคอน apple-touch-icon และการอ้างอิง manifest วาง ดีพลอย รีเฟรชแบบหนัก แล้วคุณควรเห็นโลโก้ของคุณในแท็บ
ทำไมทำในเบราว์เซอร์?
เพราะโลโก้ของคุณไม่เคยออกจากเครื่อง ทั้งกระบวนการอ่านภาพ ปรับขนาดเป็นทุกมิติ บรรจุ .ico เขียน manifestเกิดขึ้นในเครื่องในเบราว์เซอร์ของคุณด้วย Canvas ไม่มีอะไรถูกอัปโหลดไปเซิร์ฟเวอร์ ไม่ต้องสมัครหรือมีลายน้ำ และหลังเข้าครั้งแรก เครื่องมือทำงานแบบออฟไลน์ได้ สำหรับแอสเซตแบรนด์ที่คุณอาจยังไม่ได้เผยแพร่ การเก็บมันให้พ้นเซิร์ฟเวอร์ของบุคคลที่สามคือค่าเริ่มต้นที่สมเหตุสมผล
เมื่อโลโก้ของคุณเป็นสี่เหลี่ยมจัตุรัส คอนทราสต์สูง และอ่านออกที่ขนาดเล็ก การสร้างชุดเต็มคือส่วนที่ง่าย