파비콘 Favicon 은 favorite icon을 일컫는 말이다.


이렇게 웹페이지의 타이틀 옆에 표시되는 아이콘이다.


크롬에서는 파비콘이 등록있는 사이트를 즐겨찾기에 추가할 때 사이트 이름에 아무것도 적지 않으면 이렇게 파비콘 만으로 깔끔하게 표시되게 할 수 있다.


파비콘을 개인 홈페이지나 블로그 등에 추가하는 방법은 다음과 같다.


1.

컴퓨터나 안드로이드 폰에서 보이는 아이콘을 관리하려면 html파일의 <head>와 </head> 사이에 다음 줄을 추가하면 된다.


<link rel="shortcut icon" href="아이콘 파일 경로" />


합주시간표에 다음과 같은 그림을 파비콘으로 등록하였다. (이 글에는 편의상 .png 파일로)




그런데 아이폰에서 확인해본 결과 제대로 아이콘이 안뜨고 .ico 파일에 포함된 색깔에 따라서

나침반 아이콘의 배경색만 연두색으로 바뀌는 것을 확인하였다.




2.

좀 더 찾아보니 iOS 계열 사파리에서는 다음 태그를 써야 먹힌다고 한다. 추가할 위치는 똑같다.


<link rel="apple-touch-icon" href="그림 파일 경로" />


요즘 나오는 폰 해상도가 높다보니 그림 파일 크기는 최소 57*57 이상이어야 하는 것 같다.



아이콘 파일은 http://www.iconarchive.com/ 여기에서 구했다.

합주시간표에 쓸 거다보니 음표 표시되어있는 아이콘이 괜찮을 것 같아서 새로 다운받았다.


(http://www.iconarchive.com/show/ios8-setting-icons-by-uiconstock/sound-icon.html)

제작자 웹사이트: http://uiconstock.com/ios8-setting-icons-2014-ai/


png 파일을 크기별로 다운받고 용량을 확인했다. 72*72 짜리 아이콘은 용량이 꽤 크길래 48*48 짜리 png 파일을 ico 파일로 변환해서 쓰는 게 나을 것 같았다.


보통 그림파일을 아이콘 파일로 변환하는 것은 http://www.convertico.com/ 이곳에서 했다.


위쪽 창에 그림파일의 주소를 복사해서 붙여넣거나,

아래쪽의 BROWSE 버튼을 눌러 컴퓨터에 저장된 그림파일을 선택한 후에 GO 버튼을 누르면

오른쪽에서 이런 창이 떠서 변환된 아이콘 파일을 다운받을 수 있다.

이걸 FTP 클라이언트로 서버에 업로드를 하면 된다.


128*128 크기의 png 파일과 48*48 크기의 ico 파일을 둘 다 업로드하고 태그도 둘 다 추가했다.

이제 컴퓨터에서도 잘 확인되고 아이폰에서도 제대로 표시가 된다.




예쁘네 :)

ㅋㅋㅋㅋㅋㅋㅋㅋ

'엥그니어링 > 도움글' 카테고리의 다른 글

합주시간표 설치하기  (2) 2014.06.02
무료 웹호스팅 얻기 / 관리  (2) 2014.06.01
JavaScriptCore  (0) 2014.04.24
Sublime Text 2  (0) 2014.03.06
LaTeX  (2) 2014.01.06

WRITTEN BY
Chaz
서울소재 모 대학교 공대 졸업하고 일개미가 된 일명 비둘기가 거주하는 곳입니다

,