자신의 웹사이트가 있거나 다른 사람을 위해 웹사이트를 개발 중인 경우 사용자 iOS 홈 화면에 나타나는 저장된 북마크 아이콘을 사용자 지정해야 합니다. 위의 스크린샷에서 iPhone 화면에 맞춤 OSXDaily 파비콘이 표시됩니다.

Apple Touch 아이콘을 설정하는 것은 기본적으로 iOS가 사이트의 작은 섬네일을 저장하기 때문에 좋은 생각입니다. 작은 썸네일은 종종 식별하기 어렵고 일반적으로 그다지 멋져 보이지 않으므로 대신 나만의 파비콘 이미지를 설정해 봅시다.

웹사이트용 Apple Touch 아이콘을 사용자화하고 설정하는 방법

• 아이콘을 만들고 정사각형인지 확인하세요. 여기 OSXDaily.com에 있는 아이콘은 512×512픽셀이지만 원하는 경우 다른 정사각형 크기를 선택할 수 있습니다. 레티나 디스플레이
• 홈 화면 아이콘을 PNG 파일로 저장하고 레이블 지정: apple-touch-icon.png
• apple-touch-icon.png를 루트 웹서버 디렉토리에 드롭하면 domain.com/apple-touch-icon.png에서 액세스할 수 있습니다.
• iOS의 Safari에서 사이트를 방문한 다음 "홈 화면에 추가"를 눌러 웹 사이트 홈 화면 북마크 아이콘을 테스트합니다.
• iOS 기기 홈 화면을 보면 위의 스크린샷과 같이 새로운 맞춤 아이콘과 함께 저장된 북마크를 볼 수 있습니다.

파일 이름이 적절하고 웹서버의 루트 디렉토리에 있는 한 Mobile Safari는 파일을 어떻게 처리해야 하는지 알 수 있으므로 iOS 특정 파비콘을 표시하기 위해 추가 조정이 필요하지 않습니다.

참고로 OSXDaily.com에 사용하는 맞춤형 'apple-touch-icon.png' 이미지는 다음과 같습니다. 이 예제 책갈피 아이콘은 레티나 디스플레이에 맞게 생성되고 크기가 적절하게 조정됩니다():

실제 아이콘 파일에는 빛의 굴절이 아이콘에 저장되어 있지 않으며 iOS에서 자체적으로 처리합니다. 원하는 이미지를 사용하셔도 되지만 기존 iOS 아이콘의 친숙한 UI를 캡처한 이미지를 만드는 것을 추천합니다.

이것은 분명히 전용 iOS 앱을 보유하는 것과는 다르지만 웹에서 적절한 모바일 사용자 경험을 제공하는 것은 좋은 생각이며 iOS 앱 개발의 높은 비용을 피할 수 있습니다.

그리고 이봐 요, 이런 것들이 걱정된다면 Photoshop을 사용하여 최소한 아이콘을 올바르게 디자인할 수 있습니까? 그러니 당신이 그것에 있는 동안 몇 가지를 확인하십시오.