웹 개발자와 웹사이트 소유자는 주의를 기울여야 합니다. 레티나 지원 iOS 북마크 아이콘을 설정해야 합니다. 북마크 아이콘을 Apple Touch Icon이라고 합니다., 이러한 사용자 지정 이미지는 iPad에서 웹사이트를 북마크할 때 사용자 홈 화면에 표시되는 아이콘이 됩니다. iOS의 iPhone 또는 iPod touch 또는 OS X용 Safari의 책갈피 패널.맞춤형 애플 터치 아이콘 파일 세트가 없으면 사용자는 웹 페이지 자체의 지루하고 보기 흉한 섬네일을 보게 될 것이며 레티나 지원 아이콘을 사용하지 않으면 책갈피 아이콘이 새 iPad 화면에서 픽셀화되고 일반적으로 끔찍하게 보일 것입니다.

몇 가지 간단한 단계를 거쳐 모든 웹사이트에 완벽한 레티나 Apple Touch 아이콘을 생성하기 위해 해야 할 일은 다음과 같습니다.

1) 레티나 지원 iOS 웹사이트 아이콘 만들기

템플릿을 사용하거나 직접 디자인하세요. 이전 게시물에서 언급한 손쉬운 DIY 레티나 아이콘 키트를 사용했는데, 클릭 한두 번으로 쉽게 멋진 iOS 아이콘을 디자인할 수 있는 PSD 파일입니다. 웹사이트나 회사 로고를 붙여넣기만 하면 됩니다. PSD 파일을 편집할 것이 없다면 Photoshop CS6 베타를 무료로 다운로드하여 연말에 최종 버전이 나올 때까지 사용할 수 있습니다.

2) PNG로 저장하고 레티나 웹사이트 북마크 아이콘 이름 지정

아이콘은 PNG여야 하며, 이름은 둘 중 하나로 지정해야 합니다. 각 파일 이름은 사용자 홈 화면에 표시되는 아이콘 모양이 약간씩 다릅니다.

• "apple-touch-icon.png" 아이콘에 하이라이트 풍선 오버레이를 추가합니다.
• "apple-touch-icon-precomposed.png"는 하이라이트 오버레이 없이 원래 생성된 아이콘을 표시합니다.

자신의 하이라이트를 생성했거나 대부분의 Apple 기본 아이콘에 표시되는 유비쿼터스 버블 없이 아이콘을 더 평평하게 표시하려면 후자의 미리 구성된 옵션을 사용하십시오.

3) 기본 웹 디렉토리에 웹사이트 북마크 터치 아이콘 업로드

SFTP 클라이언트(OS X에는 Finder에 FTP가 포함되어 있고 CyberDuck 또는 Filezilla는 무료임)를 사용하여 apple-touch-icon.png 파일을 루트 웹 디렉토리에 복사합니다. 이것은 일반적으로 사이트 기본 색인 파일이 있는 위치와 동일합니다. 업로드가 완료되면 웹 브라우저를 열고 "http://SITEURL.com/apple-touch-icon.png"로 이동하여 로드되는지 확인하여 올바른 위치에 있는지 확인하십시오.

다음은 OSXDaily.com의 512×512 레티나 지원 책갈피 아이콘의 예입니다.

-precomposed 플래그가 없으면 위의 아이콘에 하이라이트 풍선이 표시됩니다. 실제 아이콘과 북마크로 스크린샷에 표시된 아이콘을 비교하여 둘 사이의 차이점을 확인할 수 있습니다.

4) iOS 기기 사용 및 사이트 북마크

이것은 가장 쉬운 부분입니다. iOS 기기(레티나 측면을 확인하려면 iPad 3가 바람직함)를 잡고 Safari를 엽니다.아이콘을 업로드한 웹 사이트를 새로고침한 다음 화살표 아이콘을 탭하고 "홈 화면에 추가"를 선택하여 북마크 이름을 지정하고 홈 화면으로 돌아가서 있는지 확인합니다.

512 x 512 픽셀임에도 불구하고 레티나 아이콘은 구형 아이폰과 비-레티나 기기에서 잘 축소됩니다. 정말로 원한다면 CSS와 HTML을 사용하여 다른 장치에 다른 크기의 아이콘을 표시할 수 있지만 꼭 필요한 것은 아닙니다.

이제 누군가가 레티나 디스플레이가 있는 iPad에서 웹 사이트를 북마크하면 홈 화면에서 훨씬 더 잘 보일 것입니다. 그게 전부입니다. 그리고 예, 우리는 이전에 Apple 터치 아이콘에 대해 쓴 적이 있지만 iPad 3는 훨씬 더 높은 해상도의 아이콘과 그래픽을 요구하므로 다시 언급할 가치가 있습니다.