티스토리 뷰

웹디자인

모바일에서 바로가기(홈화면추가) 아이콘 제작하기

깽아네 2019. 5. 31. 14:42
728x90

 

 

 

모바일에서 바로가기. 즉 홈화면추가 아이콘 이미지 변경하는 방법을 알려드리려고 합니다.

 

■ 안드로이드폰

안드로이드의 아이콘 사이즈는 72x72(px)의 png이미지를 지정

<link rel="shortcut icon" href="logo1.png" type="image/x-icon" />

 

■ 아이폰

아이폰이 기본으로 제공하는 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 이미지를 사용하면 아이폰에서 자동으로 크기 리사이징해 사용.

 

 

<head> 안에 스크립트 삽입

<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>

 

 

 

728x90
저작자표시 비영리 동일조건

'웹디자인' 카테고리의 다른 글

정해진 공간을 벗어나는 글자를 ...으로 보여지도록 하는 소스  (0) 2019.06.04
텝 클릭시 배경색 변경되는 소스  (0) 2019.01.25
jquery 클릭시 메뉴를 접었다 펼치는 소스  (0) 2018.12.21
이미지 클릭시 오버시 다른 이미지로 변경하는 소스  (0) 2018.12.21
이미지 클릭시 큰 이미지 팝업 뜨면서 보이도록 하는 소스  (0) 2018.12.12