최근에 갱신된 iPhone 1.1.3 firmware update를 설치하면 새로 추가된 Safari의 WebClips 기능으로 iPhone의 Home Screen에 자주 가는 웹 사이트들을 등록해서 손쉽게 다시 꺼내볼 수 있게 되었다.
그런데, 이렇게 등록해고 iPhone의 Home Screen에서 보여지는 웹 사이트들의 아이콘들은 등록 당시의 웹 사이트 모습을 그대로 축소해 놓은 모양이다. 이렇게 되면 간혹 등록해 둔 다른 웹 사이트들과 비슷해져서 혼동을 일으킬 수 있는데, iPhone Dev Center 문서에 있는 Create a WebClip Bookmark Icon 단락에 가면 이 아이콘을 대체하는 방법이 소개되어 있다.
간단히, 보통 “favicon.ico”이 위치하는 웹 사이트의 root 디렉토리에 57X57 픽셀 크기의 “apple-touch-icon.png” 이름의 파일을 위치시켜 주면 된단다. 그리고, 만약 웹 사이트 전체를 위한 책갈피 아이콘 대신에 특정 웹 페이지의 책갈피 아이콘을 다르게 사용하려면, 해당 페이지의 <head> 부분에 다음과 같이 추가해줘도 됨.
아이콘의 “반들거리는(glossy)” 효과는 iPhone 혹은 iPod touch가 알아서 처리해 준단다.
“웹 사이트에 iPhone의 WebClips 아이콘 추가하는 법”에 달린 5개의 댓글
안녕하세요
블로그 잘 구경하고 갑니다.
궁금한 점은 자신만의 아이콘을 홈 화면에 추가하는 것을
HTML 태그로도 가능한지 정말 궁금합니다~
기능을 제공하는지 알고 계시면 답변부탁드려요~
(IE의 즐겨찾기와같은 기능)
말씀하신 아이콘을 홈 화면에 추가하는 기능은 iPhone에 설치되어 있는 Safari에 기본적으로 제공하는 기능입니다.
사용자들은 보통 Safari 화면 아래에 있는 + 버튼을 누르게 되면, 현재의 페이지를 책갈피에 등록할지 아니면 홈 스크린에 저장해 둘지 선택할 수가 있지요. 이때 홈 스크린에 추가하기를 선택하면 위 글에서 설명했던 지정 아이콘이 홈 스크린에 보여집니다. 그래서 개발자가 할 일은 자신이 만든 아이콘을 위에 설명된대로 link tag를 통해 지정만 해주면 되겠지요.
실제 사용 예는 이곳의 소스를 확인해 보시면 아실 수 있습니다. 😉
현재 워드프레스를 이용하고 있습니다. 아이콘을 어느 폴더에 올려놓고 사용하시는지 알려주실수 있을가요? 또 는 해당 테마의 header.php에 소스를 삽입하면 되는지도 궁금하네요. 전 잘 안되요. ㅠ ㅠ
전 잘 안되네요. 소스는 해당 테마의 header.php에 넣으면 되는지 또 png는 어느폴더에 올려놓고 그 경로 주소도 예시를 좀 알려주세요. ㅠ ㅠ
쓰고 계신 블로그를 확인해 봤는데, wordpress라는 이름의 디렉토리 안에 아이콘을 넣어주시면 되겠네요. (여기에 favicon.ico 파일도 같이 있습니다.)
그리고 사용하고 계신 테마 디렉토리에 있는 header.php 파일을 열어서 head 태그 안에서 다음과 같이 위치를 지정해 주시면 됩니다.
<link rel=”apple-touch-icon” href=”apple-touch-icon.png” />
그리고, 덕분에 묘한 실타래가 엉켜 있는 아주 철학적인 글 잘 읽었습니다. 🙂