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

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

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

Stealth Settings favicon
Stealth Settings Favicon ใน Safari
favicon ในโรงละครโอเปร่า
favicon ในโรงละครโอเปร่า

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

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

In iOS เราสามารถเพิ่ม ทางลัดหน้าเว็บ บน หน้าจอหลัก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

  • Modeเลเล่คลาสสิกของ iPhone / iPod = 57 × 57
  • iPad = 76 × 76
  • iPhone / iPod Retina = 120 × 120
  • iPad Retina = 152 × 152
  • iPhone 6 / 6S บวก = 180 × 180

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

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

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

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

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

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

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

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

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

เป็นคนรักเทคโนโลยี ฉันเขียนบทความด้วยความสุขบน StealthSettings.com ตั้งแต่ปี 2006 ฉันมีประสบการณ์ที่หลากหลายในระบบปฏิบัติการ: macOS, Windows, และ Linux, รวมถึงภาษาโปรแกรมและแพลตฟอร์มบล็อก (WordPress) และสำหรับร้านค้าออนไลน์ (WooCommerce, Magento, PrestaShop)

วิธีการ » iHowTo » iHowTo - iOS » วิธีเพิ่มไอคอนให้เว็บไซต์ iPhone, iPad และ iPod Touch
แสดงความคิดเห็น