วิธีเพิ่มไอคอนให้เว็บไซต์ iPhone, iPad และ iPod Touch

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

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

Stealth Settings favicon
Stealth 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 iPod

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

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

วิธีเพิ่มไอคอนเว็บสำหรับ iPhone, ไอแพด และ แอนดรอยด์

ขั้นตอนแรกคือการ สร้างไอคอนภาพที่ปรากฏบน หน้าจอหลักชุมชน 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, ไอคอนเป็นสองมิติ

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

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

<link href=”/apple-touch-icon.png” rel =”apple- แตะไอคอน” /> <link href=”/apple-touch ไอคอน -76 × 76.png” rel =”apple-touch-icon” ขนาด =” 76 × 76″ /> <link href=”/apple-touch ไอคอน -120 × 120.png” rel =”apple-touch-icon” ขนาด =” 120 × 120″ /> <link href=”/apple-touch ไอคอน -152 × 152.png” rel =”apple-touch-icon” ขนาด =” 152 × 152″ /> <link href=”/apple-touch ไอคอน -180 × 180.png” rel =”apple-touch-icon” ขนาด =” 180 × 180″ />

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

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

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

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

หลงใหลในเทคโนโลยี ฉันชอบทดสอบและเขียนบทช่วยสอนเกี่ยวกับระบบปฏิบัติการ macOSลินุกซ์ Windowsเกี่ยวกับการกำหนดค่าเว็บเซิร์ฟเวอร์ WordPress, WooCommerce และ LEMP (Linux, NGINX, MySQL และ PHP) ฉันเขียนบน StealthSettings.com ตั้งแต่ปี 2006 และไม่กี่ปีต่อมา ฉันเริ่มเขียนบทแนะนำและข่าวสารเกี่ยวกับอุปกรณ์ในระบบนิเวศ iHowTo.Tips Apple: iPhone, iPad, Apple ดู, โฮมพอด, iMac, MacBook, AirPods และอุปกรณ์เสริม

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