Học Lập Trình Web

Apple Touch Icon là gì và Cách thêm nó vào trang web của bạn

Nhân. Nguyễn

Đăng

-

Bạn có thể tìm kiếm qua : Google | Cốc Cốc | Bing với chủ đề này của Ad's Consulting Live

Với ngày càng nhiều người sử dụng điện thoại của họ để kiểm tra mọi thứ trực tuyến. Từ vé du lịch và đặt phòng khách sạn đến giao dịch chứng khoán và xem tin tức, các quản trị web phải đảm bảo các sản phẩm của họ được tối ưu hóa cho thiết bị di động.

Hơn nữa, rất nhiều khách hàng của chúng tôi đã xem xét báo cáo thống kê SEO của họ đã đến và hỏi chúng tôi cách thêm Apple Touch Icon vào trang web của họ. Khi có người dùng thêm trang web của họ vào màn hình chính của di động.

Thêm biểu tượng Apple Touch Adword Live

Đây là lý do tại sao chúng tôi chỉ phải chia sẻ làm thế nào để dễ dàng thêm nó vào trang web của bạn. Tất nhiên, nếu bạn đã mua giao diện website của mình thì nó sẽ có sẵn icon trong gói. Còn nếu bạn muốn tự mình làm thì bạn chỉ cần thêm vào trang web của bạn nhanh chóng.

Apple Touch Icon là gì?

Vì một phần lớn các thiết bị di động bao gồm các sản phẩm của Apple, bạn nên chú ý đến biểu tượng Apple (biểu tượng cảm ứng) của trang web của bạn. Biểu tượng Apple là đại diện trực quan của trang web của bạn khi được truy cập bởi màn hình chính của người dùng trên iOS Android. Về bản chất, nó có rất nhiều điểm tương đồng với favicon, tuy nhiên, cái sau không hoạt động với iOS, điều này tạo ra nhu cầu về một phương pháp khác để nhận thức về thương hiệu. Nếu bạn chưa xác định biểu tượng Apple phù hợp, người dùng sẽ thấy một phiên bản rút gọn của trang chủ trang web của bạn sẽ có nhiều chi tiết không thể phân biệt và chẳng hạn như logo của thương hiệu của bạn chẳng hạn.

Cách tạo Apple icon và áp dụng nó vào trang web của bạn

Có biểu tượng phù hợp sẽ khiến người dùng nhớ vị trí của nó trên thiết bị dễ dàng hơn nhiều và sẽ tăng tỷ lệ nó được nhấp thường xuyên hơn. Khi bạn đã chọn một yếu tố đơn giản hoặc logo của bạn cho công việc của biểu tượng Apple, hãy tạo một tệp .png vuông của nó được gọi là biểu tượng apple-touch-icon với kích thước lên tới 180 × 180 . Chúng tôi nói lên tới 180 × 180 vì có 9 kích thước chính khác nhau cho các biểu tượng Apple bắt đầu từ 57 × 57 là kích thước cơ sở cho iPhone đầu tiên trong khi iPhone 6 plus cần biểu tượng 180 × 180 cho màn hình nâng cấp và PPI (pixel) mỗi inch).

Ngoài ra, bạn có thể sử dụng trang web hữu ích này để tạo biểu tượng Apple và thậm chí kiểm tra chức năng của nó hoặc sử dụng plugin này từ cùng một tác giả nếu trang web của bạn dựa trên WordPress.

Ngoài ra, hãy đảm bảo rằng bạn xác định biểu tượng, biểu tượng trong tiêu đề bằng cách sử dụng các đoạn mã HTML này làm ví dụ:

<link rel="apple-touch-icon" sizes="57x57" href="https://yourdomain.com/apple-touch-icon-57x57.png">

<link rel="apple-touch-icon" sizes="180x180" href="https://yourdomain.com/apple-touch-icon-180x180.png">

Điều này sẽ giúp nhận dạng biểu tượng bằng thiết bị iOS và Android phù hợp, nó sẽ đảm bảo trải nghiệm xem mượt mà cho khách truy cập của bạn.

Thêm Apple touch icon vào website của bạn

Mình sẽ hướng dẫn thêm nó vào website WordPress:

  • Đầu tiên xác định biểu tượng icon
  • Tiếp theo đăng nhập vào trang quản trị website > Chọn Sửa giao diện > chọn file header.php > dán đoan code trên vào trước thẻ </head> > Sửa link icon thành link icon của bạn > Sau đó cập nhật tệp tin

Để thêm website vào màn hình chính điện thoại. Bạn cũng có thể test luôn khi thêm website của tôi vào màn hình chính điện thoại của bạn

Với Android vào chrome và truy cập website của bạn sau đó chọn thêm vào màn hình chính > Ok

Thêm Apple icon


Với Ios cũng như trên

Bạn có thể đọc thêm bài Làm cách nào để thay đổi màu của thanh địa chỉ trong Chrome? để tùy biến cho website của bạn trên thiết bị di động

Tôi viết để lưu trữ và chia sẻ cho bạn đọc những gì tôi học và hiểu được về lập trình và kinh nghiệm của tôi sau những năm tôi đi làm. Vậy nên nhiều bài rất ngắn các bạn đừng trách móc. Xin cảm ơn đã ủng hộ. Kênh Youtube của Nhân Nguyễn

Quảng Cáo
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Bình Luận
Inline Feedbacks
View all comments



[]
1 Step 1
Previous
Next

Chủ Đề Nổi Bật

Được Quan Tâm Nhiều Trong Tháng

0
Bình luận của bạn giúp tôi có động lực viết hơn :Dx
()
x