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

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

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

การตั้งค่า favicon ชิงทรัพย์

การตั้งค่า favicon ชิงทรัพย์ใน Safari

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

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

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

<link rel = "ไอคอนทางลัด" href = "/ images / favicon.ico" type = "ภาพ / x-ไอคอน" />

ไอคอนเว็บไซต์สำหรับ 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 พลัส = 180 180 ×

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

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

  • Classic Android = 128 × 128
  • Android ความละเอียดสูง (hi-res) = 192 × 192

ไอคอน

หลังจากที่เราทำภาพปีนขึ้นไปบนเว็บเซิร์ฟเวอร์ที่มา HTML ของเว็บไซต์ก่อนที่จะปิด </ head> เพิ่มบรรทัดต่อไปนี้:

<link href = "/ apple-touch-icon.png" rel = "apple-touch-icon" /> <link href = "/ แอปเปิ้ลสัมผัสไอคอน 76x76.png" rel = "แอปเปิ้ลสัมผัสที่ไอคอน" ขนาด = "76x76" /> <link href = "/ แอปเปิ้ลสัมผัสไอคอน 120x120.png" rel = "แอปเปิ้ลสัมผัสที่ไอคอน" ขนาด = "120x120" /> <link href = "/ แอปเปิ้ลสัมผัสไอคอน 152x152.png" rel = "แอปเปิ้ลสัมผัสที่ไอคอน" ขนาด = "152x152" /> <link href = "/ แอปเปิ้ลสัมผัสไอคอน 180x180.png" rel = "แอปเปิ้ลสัมผัสที่ไอคอน" ขนาด = "180x180" /> <link href = "/ ไอคอน hires.png" rel = "ไอคอน" ขนาด = "192x192" /> <link href = "/ ไอคอน normal.png" rel = "ไอคอน" ขนาด = "128x128" />

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

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

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

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

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

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

ชิงทรัพย์

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

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