วิธีการเพิ่มไอคอนเว็บไซต์สำหรับ iPhone, iPad และ iPod Touch

Favicon.ico - ไอคอนเว็บไซต์ในเบราว์เซอร์

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

ชิงทรัพย์ Settings favicon

ชิงทรัพย์ Settings Favicon ใน Safari

favicon ในโรงละครโอเปร่า

favicon ในโรงละครโอเปร่า

จนกระทั่งเมื่อไม่นานมานี้ไฟล์นี้จะต้องมีรูปร่าง "favicon.ico", เพื่อระบุโดยเว็บเบราว์เซอร์ Chrome, อินเทอร์เน็ต Explorer, Opera, Safari, Firefox, ฯลฯ
เป็นเวลาหลายปีที่มีความก้าวหน้าภาษาเว็บใหม่ HTML5 si CSS3, Favicons สามารถเป็น ไฟล์ .png หรือ .jpg. สภาพเป็นที่ส่วนหัวของเว็บไซต์ ก่อนจงบรรทัดนี้

ไอคอนเว็บไซต์สำหรับ iOS - iPhone, iPad และ iPod Touch

In iOS เราสามารถเพิ่ม ทางลัดหน้าเว็บ pe หน้าจอหลักCPC iPhone, iPad si iPod Touch.

วิธีการเพิ่มทางลัดเว็บไซต์บน iPhone, iPad และ iPod หน้าจอหลัก

เราทำได้โดยเปิดหน้าเว็บบน iPhone (เบราว์เซอร์อินเทอร์เน็ต Safari, Chrome ฯลฯ ) คลิกที่สี่เหลี่ยมพร้อมลูกศร (เครื่องหมาย "แชร์" ใน iOS) จากนั้นเลือกตัวเลือกเพิ่มลงในหน้าจอหลัก"

หากเว็บไซต์ได้มีการกำหนด favicon สำหรับเบราว์เซอร์ของคุณ แต่ไม่ได้ตั้งค่า อุปกรณ์ iOS เว็บไซต์ไอคอนที่เฉพาะเจาะจงหน้าจอจะปรากฏไอคอนประกอบด้วย ภาพตัวอย่าง หน้าเว็บ

วิธีการเพิ่มไอคอนเว็บสำหรับ iPhone, iPad และ Android

ขั้นตอนแรกคือการ สร้างไอคอนภาพที่ปรากฏบน หน้าจอหลักชุมชน iDevice CPC ไอคอนเว็บสามารถใช้งานได้บนอุปกรณ์ทั้งหมดและเห็นได้อย่างชัดเจนเราจะต้องสร้างภาพ สำหรับทุก iPhone และ iPad มติ.

ความละเอียดและขนาดไอคอนมาตรฐานสำหรับ iPhone, iPad, iPod และ Android

  • รุ่นคลาสสิก iPhone / iPod = 57 × 57
  • iPad = 76 × 76
  • iPhone / iPod Retina = 120 × 120
  • iPad Retina = 152 × 152
  • iPhone 6 / 6S Plus = 180 × 180

Apple การปรับปรุงอย่างสม่ำเสมอ ไอคอนขนาดที่แนะนำURL ที่ การใช้งาน si หน้าเว็บ pe หน้านี้.

สำหรับอุปกรณ์ Android, ไอคอนเป็นสองมิติ

  • Android คลาสสิก = 128 × 128
  • Android ที่มีความละเอียดสูง (ความละเอียดสูง) = 192 × 192

ไอคอน

หลังจากที่เราสร้างภาพแล้วจะถูกอัปโหลดบนเว็บเซิร์ฟเวอร์และในแหล่ง HTML ของเว็บไซต์ก่อนที่จะปิด เพิ่มบรรทัดต่อไปนี้:

<link href="/apple-touch-icon.png" rel="apple-touch-icon" /> <link href="/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" /> <link href="/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" /> <link href="/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" /> <link href="/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" /> <link href="/icon-hires.png" rel="icon" sizes="192x192" /> <link href="/icon-normal.png" rel="icon" sizes="128x128" />

สำหรับอุปกรณ์ Apple, ชื่อภาพ. PNG และ "rel =" ต้องมีคำนำหน้า "apple- ". สำหรับ Android ชื่อไฟล์จะเป็น "ไอคอน hires.png"และ"ไอคอน normal.png” พร้อมไอคอน rel =””

ไม่จำเป็นอย่างยิ่งที่จะต้องสร้างภาพสำหรับแต่ละความละเอียด คุณสามารถสร้างภาพที่มีความละเอียดสูงสุดได้และอุปกรณ์ที่มีความละเอียดต่ำกว่าจะระบุและตั้งเป็นไอคอน

เว็บไซต์ไอคอน iPhone

ไอคอนทางลัดไปยังเว็บไซต์จะมีลักษณะคล้ายกับ การใช้งานสำหรับ iOS.

วิธีการเพิ่มไอคอนเว็บไซต์สำหรับ iPhone, iPad และ iPod Touch

เกี่ยวกับผู้เขียน

ชิงทรัพย์

หลงใหลในอุปกรณ์และไอทีทุกอย่างฉันเขียนด้วยความสุขในการลักลอบsettings.com ตั้งแต่ปี 2006 และฉันต้องการค้นพบสิ่งใหม่ ๆ เกี่ยวกับคอมพิวเตอร์และระบบปฏิบัติการ macOS, Linux, Windows, iOS และ Android

แสดงความคิดเห็น