프로그래밍/HTML+CSS

모바일 아이콘/웹 북마크 아이콘 지정

p-a-r-k 2015. 4. 23. 14:38
반응형

모바일 기기에서 웹브라우저로 사이트 접속 시 즐겨찾기나 북마크 설정으로 페이지 바로가기 아이콘을 만들 수 있음.

아이폰과 안드로이드에서 link태그를 이용하면 되고 사용법은 약간 다른부분,,


1. 아이폰(ios)



2. 안드로이드(android)


안드로이드는 72x72사이즈 png이미지를 지정해주면 됨.


아이폰은 자동으로 리사이징되지만 고정사이즈 이미지를 사용하면 깨져보이므로
사이즈별로 지정해주는게 좋음.


iPhone 3gs

57x57(px)

iPad

72x72(px)

iPhone 4/4s

114x114(px)

New iPad

144x144(px)






※ 아이폰 사이즈 지정



 


 


 


아이폰은 자동으로 모서리 둥글게, 광택 효과가 적용이 됨ㅎ.
그래서 아이콘 제작할 때 따로 효과를 주지 않아도 되고, 모서리를 둥글게 만들 필요가 없음.
아이폰의 자동 효과말고 원본 이미지 그대로 아이콘을 적용할수 있음.
rel속성에서 “apple-touch-icon” 대신에 “apple-touch-icon-precomposed”를 지정하면 된다.


반응형