모바일 웹 사이트에서 바로가기 아이콘 제작 적용

모바일 웹 사이트에서 바로가기 아이콘 제작 적용

안드로이드과 아이폰 & 아이패드는 브라우저에서 '홈화면 추가(웹 페이지의 바로가기)" 버튼으로 모바일 화면에 해당페이지에 지정된 아이콘으로 표시 추가하는 기능을 제공

01. 안드로이드폰 (Android Phones)

안드로이드의 아이콘 사이즈는 72x72(px)의 png이미지를 지정
<link rel="shortcut icon" href="/png 아이콘파일이 있는 경로/icon.png" />

02. iphone (iOS)

아이폰이 기본으로 제공하는 UI 처리 사용
<link rel="apple-touch-icon" href="/png 아이콘파일이 있는 경로/icon.png" />

아이폰이 기본으로 제공하는 UI 처리 사용 안함
<link rel="apple-touch-icon-precomposed" href="/png 아이콘파일이 있는 경로/icon.png" />

아이폰은 57×57 , 아이패드는 72×72 사이즈의 png 이미지를 사용하지만,  114×114 이미지를 사용하면 아이폰에서 자동으로 크기 리사이징해 사용. 

위의 내용을 처리했으면 아래와 같이 스크립트 삽입

<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase(); // 접속 모바일 디바이스 정보
  
// 모바일 홈페이지 바로가기 링크 생성
if(userAgent.match('iphone')) {
    document.write('<link rel="apple-touch-icon" href="/png 아이콘파일이 있는 경로/icon.png" />')
} else if(userAgent.match('ipad')) {
    document.write('<link rel="apple-touch-icon" sizes="72*72" href="/png 아이콘파일이 있는 경로/icon.png" />')
} else if(userAgent.match('android')) {
    document.write('<link rel="shortcut icon" href="/png 아이콘파일이 있는 경로/icon.png" />')
}
</script>