파비콘 만들기 > 디자인

• 목록

추천 : https://www.favicon-generator.org/
위의 사이트에서 html 복사후, 아래를 추가로 넣어주기
<link rel="shortcut icon" href="/favicon.ico">


http://www.xiconeditor.com/
https://icoconvert.com/
https://www.favicon.cc/







iOS 2.0 이상과 Android 2.1 이상에서는 터치(Touch) 아이콘 지정이 가능하다.
고해상도 아이콘(152x152) 하나만 준비하면 저해상도에서는 알아서 아이콘의 크기가 변경된다.
다만, 기기의 홈스크린에 아이콘이 추가되면 성능에 부정적일 수는 있다.
<link rel="apple-touch-icon-precomposed" href="path/to/favicon-152.png"> 

IE10 매트로는 타일(tile) 아이콘이 추가되었는데(apple-touch-icon과 유사한) 방문자가 고정(pins)할 경우,
시작화면에 이를 표시한다.
타일 아이콘의 크기는 144x144 PNG 파일이며, 투명한 배경을 사용해야 최상의 결과를 얻을 수 있다.
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/path/to/favicon-144.png">


Chrome, Firefox, Opera 7+, 그리고 Safari 4+는 모두 PNG 파비콘을 지원하지만
Chrome과 Safari는 ICO 파비콘이 함께 지정되어 있으면
선언된 순서에 상관없이 PNG 파비콘을 무시하고 ICO 파비콘을 사용한다.

즉, PNG 파비콘을 지원하지 않는 IE를 위해 ICO 파일을 사용하게 되는 순간,
Chrome과 Safari는 PNG 파비콘을 무시하게 된다는 이야기다.

favicion.ico > favicon.png

<!-- Chrome, Safari, IE -->
<link rel="shortcut icon" href="path/to/favicon.ico">

<!-- Firefox, Opera (Chrome and Safari say thanks but no thanks) -->
<link rel="icon" href="path/to/favicon.png">


ICO 파비콘은 multiple sizes를 지원하기에
하나의 ICO 파일에 여러 사이즈의 아이콘을 넣어 두고 이를 활용할 수 있지만
PNG 파비콘은 이것이 불가능하다.
그런 이유로 각각의 필요한 사이즈를 아래와 같이 모두 선언해야 한다.
<link rel="icon" href="favicon-16.png" sizes="16x16">
<link rel="icon" href="favicon-32.png" sizes="32x32">
<link rel="icon" href="favicon-48.png" sizes="48x48">
<link rel="icon" href="favicon-64.png" sizes="64x64">
<link rel="icon" href="favicon-128.png" sizes="128x128">
 

PNG 파비콘을 사용시에 브라우저는 어떠한 파비콘을 사용할지 어떻게 결정하는가?

    Firefox와 Safari는 마지막에 제공되는 파비콘을 사용한다.
    맥(Mac) 용 Chrome은 ICO 포맷의 파비콘이 아니라면 32x32 파비콘을 사용한다.
    윈도우즈(Windows) 용 Chrome은 16x16이 먼저 선언되지 않는다면 ICO 파비콘이 사용된다.

    상기 옵션 중 아무것도 사용할 수 없는 경우,
    양쪽 Chrome은 먼저 선언되는 파비콘을 사용하고
    Firefox와 Safari는 마지막에 선언된 것이 사용된다.
    사실 맥 용 Chrome은 16x16 파비콘을 무시하고
    non-retina 기기에서 16x16으로 크기를 줄일때만 32x32 파비콘을 사용한다.

    Opera는 사용가능한 아이콘 중에서 하나를 임의로 선택하게 된다.



ICO 파일을 사용할 경우 아래와 같은 크기 정도는 포함하는 것을 추천한다.

크기     용도
16x16     IE9 주소 표시줄, 고정된(pinned) 사이트의 점프목록/툴바/오버레이
32x32     IE의 새로운 탭 페이지, 윈도우7 이상에서 작업 표시줄 단추, Safari 나중에 읽기 사이드바
48x48     윈도우즈 사이트 아이콘

좀 더 완벽하게 설정하길 원하고 1~3kb 쯤의 여분의 용량증가가 상관없다면 아래의 크기도 포함시켜도 된다.
크기     용도
24x24     IE9 고정된(pinned) 사이트 브라우저 UI
64x64        윈도우즈 사이트 아이콘, HiDPI/Retina 에서 Safari 나중에 읽기 사이드바