Cách thêm biểu tượng vào trang web iPhone, iPad và iPod Touch

Favicon.ico - Biểu tượng trang web trong trình duyệt

Trước khi nó ra mắt một trang web và thêm một file đồ họa, favicon, để xuất hiện trong trình duyệt, trên thanh địa chỉ. Trong hầu hết các tình huống, biểu tượng yêu thích là hình thu nhỏ của biểu trưng đồ họa hoặc tên viết tắt của trang web tương ứng. Biểu tượng yêu thích này được thêm vào để giúp người dùng nhanh chóng xác định địa chỉ web trong dấu trang.

Stealth Settings Favicon
Stealth Settings Biểu tượng yêu thích trong Safari
Favicon trong Opera
Favicon trong Opera

Cho đến gần đây, tệp này phải ở dạng "favicon.ico", được trình duyệt web xác định. Chrome, Internet Explorer, Opera, Safari, Firefox, v.v.
Trong nhiều năm qua, với việc thúc đẩy ngôn ngữ web mới, HTML5 si CSS3, Favicons có thể là một tệp .png hoặc . Jpg. Các điều kiện là tiêu đề của trang web, trước, Hãy dòng này:

Biểu tượng trang web cho iOS - iPhone, iPad và iPod Touch

In iOS chúng ta có thể thêm phím tắt trang web pe Home ScreenCác iPhone, iPad si iPod Touch.

Cách thêm lối tắt vào một trang web trên iPhone, Màn hình chính của iPad và iPod

Chúng tôi làm điều này bằng cách mở một trang web trên iPhone (Safari, Chrome, v.v.), nhấp vào hình vuông có mũi tên (ký hiệu "chia sẻ" trong iOS), sau đó chọn tùy chọn "Add đến Màn hình chính".

Nếu trang web đã thiết lập biểu tượng cho trình duyệt của bạn, nhưng không được thiết lập các trang web cụ thể biểu tượng thiết bị iOS, Màn hình sẽ xuất hiện một biểu tượng gồm một xem trước hình ảnh trang web.

Cách thêm biểu tượng web cho iPhone, iPad và Android.

Bước đầu tiên là để tạo ra một biểu tượng hình ảnhXuất hiện trên Home ScreenCPC cộng đồng iDevice. Đối với biểu tượng web tương thích trên tất cả các thiết bị và nhìn thấy rõ ràng, chúng ta phải tạo ra hình ảnh cho tất cả các giải pháp của iPhone và iPad.

Độ phân giải và kích thước biểu tượng tiêu chuẩn cho iPhone, iPad, iPod và Android

  • Modelele cổ điển của iPhone / iPod = 57 × 57
  • Ipad = 76×76
  • iPhone / iPod Retina = 120 × 120
  • iPad Retina = 152×152
  • iPhone 6 / 6S Plus = 180 × 180

Apple cập nhật thường xuyên kích thước biểu tượng khuyến nghịURL ứng dụng si Trang web pe trang này.

Đối với các thiết bị Android, biểu tượng là hai chiều:

  • Android cổ điển = 128 × 128
  • Android có độ phân giải cao (hi-res) = 192 × 192
biểu tượng

Sau khi chúng tôi tạo xong hình ảnh, nó sẽ được tải lên trên máy chủ web và trong nguồn HTML của trang web, trước khi đóng , các dòng sau được thêm vào:

<liên kết href=”/apple-touch-icon.png ”rel =”apple-touch-icon ”/> <liên kết href=”/apple-touch-icon-76 × 76.png ”rel =”apple-touch-icon ”kích thước =” 76 × 76 ″ /> <liên kết href=”/apple-touch-icon-120 × 120.png ”rel =”apple-touch-icon ”kích thước =” 120 × 120 ″ /> <liên kết href=”/apple-touch-icon-152 × 152.png ”rel =”apple-touch-icon ”kích thước =” 152 × 152 ″ /> <liên kết href=”/apple-touch-icon-180 × 180.png ”rel =”apple-touch-icon ”kích thước =” 180 × 180 ″ />

Đối với thiết bị Apple, Tên hình ảnh .PNG và "rel =" phải chứa tiền tố "apple- ". Đối với Android, tên tệp sẽ là "icon hires.png"Và"icon normal.png”Với biểu tượng rel =” ”.

Không nhất thiết phải tạo hình ảnh cho mỗi độ phân giải. Bạn có thể tạo một hình ảnh cho độ phân giải cao nhất và các thiết bị có độ phân giải thấp hơn sẽ xác định nó và đặt nó làm biểu tượng.

iPhone-Website-Biểu tượng

Biểu tượng lối tắt đến trang web sẽ giống với bất kỳ ứng dụng cho iOS.

Là người yêu công nghệ, tôi rất vui được viết tại StealthSettings.com từ năm 2006. Tôi có kinh nghiệm đa dạng với các hệ điều hành: macOS, Windows và Linux, cũng như trong các ngôn ngữ lập trình và nền tảng blogging (WordPress) và cửa hàng trực tuyến (WooCommerce, Magento, PrestaShop).

Làm thế nào để » iHowTo » iHowTo - iOS » Cách thêm biểu tượng vào trang web iPhone, iPad và iPod Touch
Để lại một bình luận