ภาพหน้าจอแสดงแอปภาษาอังกฤษ ชื่อและการควบคุมที่ตั้งไว้ล่วงหน้ามีให้บริการในภาษาแอปของคุณ

จุดเริ่มต้นของคุณ

ใช้ ชุด Favicon ใน PixRinse จากนั้นตรวจสอบการตั้งค่าเหล่านี้กับจุดหมายปลายทางที่แท้จริงของคุณ

การตั้งค่าสำหรับเวิร์กโฟลว์นี้
Favicon PNG16 / 32 / 48 px
Apple แตะ PNG180 px
PNG ของเว็บแอป192 / 512 px
สีsRGB
PixRinse ชุด Favicon ตั้งค่าล่วงหน้าด้วยขนาดไอคอนเว็บไซต์ PNG หกขนาด
การตั้งค่าที่ใช้สำหรับคำแนะนำนี้ เลือกภาพหน้าจอเพื่อตรวจสอบในขนาดเต็ม
รูปแบบ PNG และ แปลงเป็น sRGB จะแสดงอยู่ในส่วนควบคุมการเข้ารหัส
รูปแบบ PNG และ แปลงเป็น sRGB จะแสดงอยู่ในส่วนควบคุมการเข้ารหัส

วิธีการทำ

  1. เตรียมเครื่องหมายแหล่งที่มาสี่เหลี่ยม

    ใช้แหล่งที่มาอย่างน้อยที่สุดเท่ากับไอคอนที่ใหญ่ที่สุดที่คุณต้องการ ลดความซับซ้อนของรายละเอียดเล็กๆ น้อยๆ ที่อาจหายไปที่ 16 px

  2. เลือก ชุด Favicon

    ทบทวนหกขนาด เทมเพลตใช้กฎปกที่อยู่กึ่งกลาง ดังนั้นแหล่งที่มาที่ไม่ใช่สี่เหลี่ยมจัตุรัสอาจถูกครอบตัด

  3. ตรวจสอบเอาต์พุตที่เล็กที่สุด

    ตรวจสอบไฟล์ 16 และ 32 px ในขนาดจริง การปรับขนาดอัตโนมัติไม่สามารถแทนที่การปรับแสงโดยเจตนาสำหรับเครื่องหมายแบรนด์ที่ซับซ้อนได้

  4. ส่งออกรูปภาพและเพิ่มการอ้างอิงไปยังโค้ดเว็บไซต์ของคุณ

    เพิ่มไฟล์ PNG ไปยังเว็บไซต์ของคุณ และอ้างอิงขนาดที่เกี่ยวข้องใน HTML head และ web-app manifest

ไฟล์จากคำแนะนำนี้

สิ่งที่ตัวอย่างนี้เกิดขึ้น

เครื่องหมายสี่เหลี่ยม 1024 × 1024 สร้าง PNG หกรายการโดยไม่มีคำเตือนที่ไม่ใช่แหล่งที่มาแบบสี่เหลี่ยม ทุกไฟล์ที่ส่งออกจะมีโปรไฟล์ sRGB

แหล่งที่มาของสแควร์
1024 × 1024
PNG ส่งออก
6
โปรไฟล์สี
sRGB ในทุกเอาต์พุต
ไฟล์ที่ส่งออกจริง
ไฟล์รูปแบบพิกเซลไบต์
android-chrome-192x192.pngPNG192 × 19226,980
android-chrome-512x512.pngPNG512 × 512174,868
apple-touch-icon.pngPNG180 × 18023,839
favicon-16x16.pngPNG16 × 16692
favicon-32x32.pngPNG32 × 321,751
favicon-48x48.pngPNG48 × 483,093
สร้างชุดไอคอนเว็บไซต์: ผลลัพธ์ที่ส่งออกจริง
ผลลัพธ์การส่งออกจริงสำหรับไฟล์ตัวอย่างที่แสดงในการฝึกปฏิบัตินี้

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

คำถามทั่วไปสองสามข้อ

มันสร้าง favicon.ico?

ไม่ ชุดบิวท์อินจะส่งออกไฟล์ PNG หกไฟล์ที่มีชื่อไฟล์เฉพาะ

โลโก้แบบกว้างจะใช้งานได้หรือไม่

ควรใช้แหล่งสี่เหลี่ยมจัตุรัส กฎหน้าปกสามารถครอบตัดแหล่งที่มาได้กว้าง ดังนั้นโปรดตรวจสอบการแสดงตัวอย่างอย่างรอบคอบ

ใส่เวิร์กโฟลว์ในการทำงาน

เปิด PixRinse เพิ่มรูปภาพ 2-3 รูปและเริ่มต้นด้วยการตั้งค่าด้านบน

ดาวน์โหลดสำหรับ Macฟรี: มากถึง 10 ภาพต่อชุดและหนึ่งเอาต์พุตต่อแหล่งที่มา เอาต์พุตหลายรายการของเวิร์กโฟลว์นี้ต้องใช้ Pro เปรียบเทียบฟรีและ Pro