본문 바로가기

웹정보 나눔/웹정보

iOS 파비콘 설정

iOS 환경에 파비콘 설정이 되지 않는다는 문의

- 참고자료 :  http://pixelcode.co.uk/tutorials/webmaster/ios-bookmark-icon/

- 참고자료2 : http://www.kylejlarson.com/blog/adding-an-icon-for-iphone-ipad-android-to-your-website/


■ iOS 터치 아이콘


- 애플은 표준 파비콘이 좋지 않다고 결정. 대신 Apple은 웹 사이트의 작은 스크린샷을 아이콘으로 추가하기로 결정하였다는군요.

그래서 기본적으로 웹 사이트의 스크린샷이 아이콘으로 사용되지만(첫번째글자라던가.) 대신 사용할 아이콘을 지정할 수 있다.

iOS 기기가 다양해졌으며 각기 다른 유형의 화면과 크기가 있으며 제안된 크기는 

57x57 픽셀

60x60 픽셀

72x72 픽셀

76x76 픽셀

114x114px

120x120 픽셀

144x144px

152x152 픽셀

180x180 픽셀


그런 다음 모든 이미지가 저장되는 iPhone/iPad의 Safari에 알려야 합니다.

<link rel="apple-touch-icon" sizes="57x57" href="/UploadData/PartnerData/kimhye79/apple-touch-icon-57x57.png">

<link rel="apple-touch-icon" sizes="60x60" href="/UploadData/PartnerData/kimhye79/apple-touch-icon-60x60.png">

<link rel="apple-touch-icon" sizes="72x72" href="/UploadData/PartnerData/kimhye79/apple-touch-icon-72x72.png">

<link rel="apple-touch-icon" sizes="76x76" href="/UploadData/PartnerData/kimhye79/apple-touch-icon-76x76.png">

<link rel="apple-touch-icon" sizes="114x114" href="/UploadData/PartnerData/kimhye79/apple-touch-icon-114x114.png">

<link rel="apple-touch-icon" sizes="120x120" href="/UploadData/PartnerData/kimhye79/apple-touch-icon-120x120.png">

<link rel="apple-touch-icon" sizes="144x144" href="/UploadData/PartnerData/kimhye79/apple-touch-icon-144x144.png">

<link rel="apple-touch-icon" sizes="152x152" href="/UploadData/PartnerData/kimhye79/apple-touch-icon-152x152.png">

<link rel="apple-touch-icon" sizes="180x180" href="/UploadData/PartnerData/kimhye79/apple-touch-icon-180x180.png">