[모바일 웹] 모바일 웹 북마크 아이콘 지정하기

       아이폰과 안드로이드 폰은 웹 페이지의 바로가기를 장치 화면에 추가하는 기능을 제공해주고 있다. 그래서 앱과 같이 아이콘을 설정해놔서 사용자가 앱 실행하는 방법과 같이 아이콘을 클릭해서 모바일 사이트에 접근할 수 있도록 할 수 있다. 아이폰과 안드로이드 아이콘 등록 방법은 link태그를 이용하면 되는데, 둘이 설정하는 방법은 조금 다르다.

1. iOS

<link rel=”apple-touch-icon” href=”/이미지경로/icon.png” />

2. 안드로이드(Android)

<link rel=”shortcut icon” href=”/이미지경로/icon.png” />

아이콘 사이즈는 안드로이는 같은 경우 72x72(px)의 png이미지를 지정하면 된다. 아이폰 같은 경우는 버전 별로 아이콘 이미지를 따로 지정해 주는 것이 좋다. 자동 리사이즈가 되긴 하지만, 리사이즈 하면 이미지가 깨져 보일 수 있기 때문이다. iOS 아이콘 사이즈는 아래 표를 참고 하길 바란다.

iPhone 3gs	57x57(px)
iPad	72x72(px)
iPhone 4/4s	114x114(px)
New iPad	144x144(px)

iOS 버전별 아이콘 지정하려면, sizes속성을 지정하면 된다. 아래 예제를 참고 하자.

<!-- iPhone icon --> <link rel=”apple-touch-icon” sizes=”57x57” href=”/이미지경로/icon57x57.png” />   <!-- iPad icon --> <link rel=”apple-touch-icon” sizes=”72x72” href=”/이미지경로/icon72x72.png” />   <!-- iPhone icon(Retina) --> <link rel=”apple-touch-icon” sizes=”114x114” href=”/이미지경로/icon114x114.png” />   <!-- iPad icon(Retina) --> <link rel=”apple-touch-icon” sizes=”144x144” href=”/이미지경로/icon144x144.png” />

아이폰은 자동으로 모서리가 둥글게 되고, 아이콘 위쪽은 밝게, 아래는 어둡게 자동으로 광택 효과가 적용이 된다. 그래서 아이콘 제작할 때 따로 효과를 주지 않아도 되고, 모서리를 둥글게 만들 필요가 없다.
 아이폰의 자동 이미지 처리 기능을 원하지 않고 원본 이미지 그대로 아이콘을 적용하기 위한 방법도 존재한다. 이는 rel속성에서 “apple-touch-icon” 대신에 “apple-touch-icon-precomposed”를 지정하면 된다.

<link rel=”apple-touch-icon-precomposed” href=”/이미지경로/icon.png” />