Nếu bạn có trang web của riêng mình hoặc đang phát triển trang web cho người khác, bạn nên tùy chỉnh biểu tượng dấu trang đã lưu xuất hiện trên màn hình chính iOS của người dùng. Trong ảnh chụp màn hình ở trên, bạn sẽ thấy biểu tượng yêu thích OSXDaily tùy chỉnh nằm trên màn hình của iPhone.

Đặt Biểu tượng cảm ứng của Apple là một ý tưởng hay vì theo mặc định, iOS sẽ chỉ lưu một hình thu nhỏ nhỏ của trang web. Các hình thu nhỏ nhỏ thường khó xác định và nhìn chung trông không đẹp lắm, vì vậy, thay vào đó, hãy đặt hình ảnh yêu thích của riêng bạn.

Cách Tùy chỉnh và Đặt Biểu tượng Apple Touch cho Trang web

• Tạo biểu tượng, đảm bảo rằng biểu tượng đó là hình vuông, kích thước ở đây trên OSXDaily.com là 512×512 pixel, nhưng bạn có thể chọn các kích thước hình vuông khác nếu bạn thực sự muốn – lưu ý rằng kích thước lớn hơn là phù hợp với màn hình võng mạc
• Lưu biểu tượng màn hình chính dưới dạng tệp PNG và gắn nhãn: apple-touch-icon.png
• Thả apple-touch-icon.png vào thư mục máy chủ web gốc để có thể truy cập nó tại domain.com/apple-touch-icon.png
• Kiểm tra biểu tượng dấu trang trên màn hình chính của trang web bằng cách truy cập trang web từ Safari trong iOS, sau đó nhấn vào “Thêm vào Màn hình chính”
• Nhìn vào màn hình chính của thiết bị iOS và bạn sẽ thấy dấu trang được lưu ở đó cùng với biểu tượng tùy chỉnh mới của bạn, giống như ảnh chụp màn hình ở trên

Miễn là tệp được đặt tên đúng và nằm trong thư mục gốc của máy chủ web, Mobile Safari sẽ biết phải làm gì với tệp đó nên không cần điều chỉnh gì thêm để hiển thị biểu tượng yêu thích dành riêng cho iOS.

Để tham khảo, đây là hình ảnh 'apple-touch-icon.png' tùy chỉnh của chúng tôi mà chúng tôi sử dụng cho OSXDaily.com, biểu tượng dấu trang mẫu này được tạo và có kích thước phù hợp với màn hình retina ():

Bạn sẽ nhận thấy rằng tệp biểu tượng thực tế không lưu khúc xạ ánh sáng vào biểu tượng, iOS tự xử lý việc này. Bạn có thể sử dụng bất kỳ hình ảnh nào bạn muốn, nhưng tôi khuyên bạn nên tạo một hình ảnh ghi lại giao diện người dùng quen thuộc của các biểu tượng iOS hiện có.

Điều này rõ ràng không giống với việc có một ứng dụng dành riêng cho iOS, nhưng trải nghiệm người dùng di động phù hợp từ web là một ý tưởng hay và nó tránh được chi phí phát triển ứng dụng iOS có thể cao.

Và này, nếu bạn lo lắng về những thứ như thế này, thì ít nhất bạn có thể sử dụng Photoshop để thiết kế các biểu tượng phải không? Vì vậy, hãy kiểm tra một số trong khi bạn đang ở đó.