Favicon 파비콘이 나를 미치게 해요.. ㅠ.ㅠ

가장 간단하게는.. 
<link rel="shortcut icon" href="/favicon.png" />, 114*114 사이즈로 통일
<link rel="apple-touch-icon" href="/favicon.png" />, 114*114 사이즈로 통일
apple-touch-icon 이 없으면 애플 기기가 해당 화면을 화면캡처 하여 파비콘으로 사용해서 꼭 넣어야 하고..
apple-touch-icon-precomposed 의 경우에는 둥근 테두리 관련된 내용인데 그냥 무시해도 상관없고..
shortcut icon 이 꼭 .ico 파일일 필요는 없으며, 114*114 라도 옛날 버전의 애플기기든 PC 든 안드로이드든 제대로 사용하기 때문에..
114*114 픽셀 사이즈의 투명 .png 파일을 shortcut icon 과 apple-touch-icon 으로 채용하면 됨.
루트 밑에 꼭 있을 필요는 없고, favicon 이라는 파일명을 사용할 필요는 없으나 상기 link 태그를 사용해야함..

대체로는 괜찮은데, 넥서스7(2세대)의 경우..
도돌런처 상태에서 독에 아이콘을 올려 놓으면 파비콘 사이즈가 줄어들면서, 문서 아이콘 안에 넣어버려서 이상하다는..






아래 내용은 참고용으로.. ^^;;
--------------------------------------------------------------------------------------------------


아래 순서로 세팅.
<link rel="shortcut icon" href="/favicon.57.png" />, 57*57 PC용(안드로이드 Old 버전)
<link rel="apple-touch-icon-precomposed" href="/favicon.57.png" />, 57*57 모바일용(아이폰, 아이팟터치, 아이패드, 안드로이드)
<link rel="apple-touch-icon-precomposed" sizez="114x114" href="/favicon.114.png" />, 114*114 모바일용(아이패드, 안드로이드)

1. 파비콘 이미지 타입

위키피디아에 보니, http://en.wikipedia.org/wiki/Favicon

웹브라우저와 버전에 따라 그리고, .ico, .png, .gif 등에 따라 표시가 되고 안 되고 그러네요.

.png 는 IE 8.x 에서도 사용 불가..

2. 파비콘 이미지 사이즈

안드로이드는 72*72 픽셀
아이오에스는 iPhone 3G/3Gs 가 57*57 픽셀, iPad 72*72, iPhone 4/4s 114*114, New iPad 144*144.
애플은 디바이스에 따라 사이즈가 가변되기는 하는데, 깨끗하게 보이게 하려면 사이즈별로 준비를 해야 한다는 군요.

<link rel="apple-touch-icon" sizes="72x72" href="/favicon72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/favicon114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/favicon144.png" />



3. 애플 사파리 아이콘 효과
<link rel="apple-touch-icon_precomposed" href="/favicon72.png" />
아이콘 모서리를 둥글게 하고, 아이콘 전체 이미지에 광택효과를 적용하는 기본 설정을 따르지 않을때 사용.




*. 파비콘 만들어 주는 웹사이트
http://www.favicon.cc/?
http://converticon.com/