웹사이트에서 자주 가는 곳은 북마크 하게 되는데,

브라우저는 사이트 루트의 favicon.ico파일을 찾아서 북마크 아래와 같이 아이콘으로 사용합니다. 


ati01.jpg 


아이폰의 사파리에서는 책갈피(북마크) 기능 외에도 "홈 화면에 추가"라는 기능을 통해 아이콘으로 책갈피를 둘 수 있습니다.

홈화면에 아이콘과 타이틀 형식으로 되기 때문에 이때 아이콘을 보고 있는 화면을 임의로 아이콘화 하여 사용합니다.

이 아이콘을 웹사이트의 파비콘처럼 "애플 터치 아이콘(apple-touch-icon)"을 이용해서 커스텀 아이콘을 설정할 수 있습니다.

파비콘과 동일하게 해당 터치아이콘의 위치도 일반적으로 사이트 루트에 위치 시키면 됩니다.

 

apple-touch-icon.png

57x57" 픽셀 사이즈로, 파일명을 "apple-touch-icon.png"로 사이트 루트에 업로드 하시면 됩니다.

아이폰에서 해당 사이트를 홈 화면에 추가될 때 사이트 루트의 이 파일을 읽어드려 반사광효과를 넣어서 홈화면에 생성하게 됩니다.

만약 반사광효과 없이 사용하고 싶다면 "apple-touch-icon-precomposed.png"를 사용하시면 됩니다.

 

iicon01.jpg iicon02.jpg iicon03.jpg iicon04.jpg

 


 

별도로 페이지에 기술을 하고 싶은 경우에는 아래와 같이 link태그를 이용할 수 있습니다.


<link rel="apple-touch-icon" href="images/touchIcon01.png" />   ........................... 반사광을 이용할 경우

<link rel="apple-touch-icon-precomposed" href="images/touchIcon02.png" />   ........ 반사광이 사용안함