모바일 웹사이트에서 홈화면 추가 아이콘 제작 & 삽입
모바일( Apple & Android Phones) 웹 사이트에서 홈화면 추가(바로가기 아이콘) 제작 적용
01. 포토샵이나 또는 다른 그래픽 프로그램에서 대략 500px x 500px 정도의 사용하고자 하는 아이콘용 이미지를 제작해 저장합니다. jpg, gif, png 파일이 가능하지만 화질을 생각해 png로 제작합니다.
02. 온라인 아이콘 제작사이트에 접속합니다.
http://iconifier.net/
- (1) 찾아보기 버튼을 클릭해 제작해 놓은 png 이미지를 선택합니다.
- (2) 버튼을 클릭하면 아래와 같이 아이콘이 제작된 화면이 출력됩니다.
- (3) 클릭해 모든 사이즈의 아이콘과 파비콘이 포함된 zip 파일을 다운로드 합니다.
- zip 파일에 포함된 아이콘
apple-touch-icon-180x180.png, apple-touch-icon-152x152.png, apple-touch-icon-144x144.png, apple-touch-icon-120x120.png, apple-touch-icon-114x114, png,apple-touch-icon-76x76.png, apple-touch-icon-72x72.png, apple-touch-icon-57x57.png, apple-touch-icon.png, favicon.ico
- (4) 아이콘을 저장할 이미지 경로에 압축을 풉니다.
03. 웹 페이지에 삽입.
- (1) https://html5boilerplate.com/mobile/ 에 접속합니다.
- (2) (4)을 클릭합니다.
(5) index.html를 클릭합니다.
- (3) 아래와 같이 웹페이지 <head></head> 안에 코드를 삽입합니다.
A) 위 그림의 a, b, c 코드 삽입
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta http-equiv="cleartype" content="on">
B) 아래 코드를 삽입
<!-- iPad and iPad mini (with @2× display) iOS ≥ 8 -->
<link rel="apple-touch-icon" sizes="180x180" href="아이콘 이미지 경로/apple-touch-icon-180x180.png">
<!-- iPad 3+ (with @2× display) iOS ≥ 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="아이콘 이미지 경로/apple-touch-icon-152x152.png">
<!-- iPad (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="아이콘 이미지 경로/apple-touch-icon-144x144.png">
<!-- iPhone (with @2× and @3 display) iOS ≥ 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="아이콘 이미지 경로/apple-touch-icon-120x120.png">
<!-- iPhone (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="아이콘 이미지 경로/apple-touch-icon-114x114.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="아이콘 이미지 경로/apple-touch-icon-76x76.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 -->
<link rel="apple-touch-icon" sizes="72x72" href="아이콘 이미지 경로/apple-touch-icon-72x72.png">
<!-- Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon" href="아이콘 이미지 경로/apple-touch-icon-57x57.png">
<!-- Fallback for everything else -->
<link rel="shortcut icon" href="아이콘 이미지 경로/apple-touch-icon.png">
<!--
Chrome 31+ has home screen icon 192×192 (the recommended size for multiple resolutions).
If it’s not defined on that size it will take 128×128.
-->
<link rel="icon" sizes="192x192" href="아이콘 이미지 경로/touch-icon-192x192.png">
<link rel="icon" sizes="128x128" href="img/touch/touch-icon-128x128.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="아이콘 이미지 경로/apple-touch-icon-144x144.png">
<meta name="msapplication-TileColor" content="#222222">
'Mobile > Mobile web' 카테고리의 다른 글
| 모바일 웹 사이트에서 바로가기 아이콘 제작 적용 (0) | 2018.04.11 |
|---|
모바일 웹 사이트에서 바로가기 아이콘 제작 적용
모바일 웹 사이트에서 바로가기 아이콘 제작 적용
안드로이드과 아이폰 & 아이패드는 브라우저에서 '홈화면 추가(웹 페이지의 바로가기)" 버튼으로 모바일 화면에 해당페이지에 지정된 아이콘으로 표시 추가하는 기능을 제공
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>
'Mobile > Mobile web' 카테고리의 다른 글
| 모바일 웹사이트에서 홈화면 추가 아이콘 제작 & 삽입 (0) | 2018.04.13 |
|---|
