본문으로 바로가기

파비콘(Favicon)의 모든 것

category 웹코딩/HTML 2015.05.14 12:00

파비콘에 대해 궁금했던 내용들을 정리했습니다.

파비콘(favicon) 소개

파비콘은 웹페이지에 접속했을때, 상단 탭에 보여지는 아이콘을 일컫는다. 이 아이콘은 즐겨찾기에 웹페이지를 등록할때도 사용된다. 웹사이트를 대표하는 로고(logo)의 개념과 비슷하며, 사이트의 성격을 드러내기도 한다.

최근에는 터치(touch) 아이콘, 타일(tile) 아이콘의 등장으로 더욱 혼란스러움이 가중되었으며, 각각의 기기에 최적화된 파비콘의 크기를 재설정하여 개발자들에게 어려움을 주고 있다.

파비콘(favicon) 기본 설정

1999년에 인터넷 익스플로러(Internet Explorer)에 처음 도입된 후로, 파비콘의 사양은 거의 변경되지 않은 채로 대부분 아이콘(ico) 파일의 형태로 도메인(domain)의 루트(root) 디렉토리에 위치해 왔다.

크로스브라우징을 염두에 둔다면, 어떠한 HTML 코드도 작성하지 않고, 자신의 웹계정 루트(root) 디렉토리에 16x1632x32의 이미지를 하나에 품은(multiple sizes[각주:1]) favicon.ico 파일을 위치시킴으로써, 설정을 마무리한다.

이 방법은 씨몽키(SeaMonkey) 브라우저를 제외한 모든 데스크톱 브라우저/버전에서(IE6 포함) 작동한다.

CMS의 경우에는 테마(theme) 혹은 이미지(image) 디렉토리를 이용하기도 한다.

<link rel="shortcut icon" href="/path/to/favicon.ico">

rel 속성과 type 속성 자세히

전통적으로 favicon.ico 파일은 16컬러 24비트 알파 투명도(alpha transparency) 포맷의 16x16 아이콘(ICO) 파일이다. 최근의 파비콘은 32x32를 지원하는데, 모든 주요 인기 있는 브라우저들에서 적절하게 축소되어 이를 표현해준다. IE10의 매트로(Metro)에서는 32x32 아이콘이 주소창에 사용된다.

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

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

좀 더 완벽하게 설정하길 원하고 1~3kb 쯤의 여분의 용량증가가 상관없다면 아래의 크기도 포함시켜도 된다.

크기 용도
24x24 IE9 고정된(pinned) 사이트 브라우저 UI
64x64 윈도우즈 사이트 아이콘, HiDPI/Retina 에서 Safari 나중에 읽기 사이드바

파비콘(favicon) 추가 설정

iOS 2.0 이상과 Android 2.1 이상에서는 터치(Touch) 아이콘 지정이 가능하다. 고해상도 아이콘(152x152) 하나만 준비하면 저해상도에서는 알아서 아이콘의 크기가 변경된다. 다만, 기기의 홈스크린에 아이콘이 추가되면 성능에 부정적일 수는 있다.

<link rel="apple-touch-icon-precomposed" href="path/to/favicon-152.png">

apple-touch-icon 세분화 대응

IE10 매트로는 타일(tile) 아이콘이 추가되었는데(apple-touch-icon과 유사한) 방문자가 고정(pins)할 경우, 시작화면에 이를 표시한다. 타일 아이콘의 크기는 144x144 PNG 파일이며, 투명한 배경을 사용해야 최상의 결과를 얻을 수 있다.

<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/path/to/favicon-144.png">

원하는 타일의 색상으로 content="#ffffff"부분을 수정하면 된다.

파비콘(favicion) 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는 사용가능한 아이콘 중에서 하나를 임의로 선택하게 된다.

파비콘(favicon) 실전 정리

적어도 아래의 ICO 파일은 준비한다.

크기 파일명 용도
16x16 & 32x32 favicon.ico IE를 위해 필요한 기본이다.

조금 느려지더라도 iOS와 Android를 고려하겠다면 아래와 같은 PNG 파일을 준비한다.

크기 파일명 용도
152x152 favicon-152.png 일반적으로 iOS와 Android에서 사용하는 아이콘, 기기에 따라 자동으로 크기가 줄여진다.

좀 더 완벽한 파비콘을 설정하기 원한다면 아래의 표를 참고하여 PNG 파일을 준비하도록 하자.

크기 파일명 용도
32x32 favicon-32.png 일부 오래된 하지만 너무 오래된 Chrome은 ICO를 제대로 처리하지 못함.
57x57 favicon-57.png 표준 iOS 홈스크린(iPad Touch, iPhone 3G의 1세대)
72x72 favicon-72.png iPad 홈스크린 아이콘
96x96 favicon-96.png 구글TV 아이콘
120x120 favicon-120.png iPhone 레티나(retina) 터치 아이콘(Change for iOS 7: up from 114x114)
128x128 favicon-128.png Chrome 웹스토어 아이콘
144x144 favicon-144.png 고정(pinned)된 IE10 매트로 타일
152x152 favicon-152.png iPad 레티나 터치 아이콘(Change for iOS 7: up from 144x144)
195x195 favicon-195.png Opera 스피드 다이얼 아이콘
228x228 favicon-228.png Opera Coast 아이콘

파비콘(favicon)과 IE 브라우저 유의사항

  • IE8~10은 페이지의 첫 방문에 바로 파비콘을 표시해준다.
  • IE7은 첫번째 방문은 무시하고 재방문시에 파비콘을 표시해준다.
  • IE6은 사이트를 북마크를 한 후 브라우저를 다시 열면 표시해준다. IE6은 브라우저 캐시가 삭제 될 때마다 파비콘을 삭제하며, 사이트가 다시 북마크된다거나 파비콘이 어떻게든 다시 로드 될때까지 파비콘을 표시하지 않는다.

파비콘(favicon) 강제 새로고침

일반적으로는 필요치 않으나, 개발하는 동안이나 새로고침으로 파비콘이 표시되지 않을때를 고려한 방법이다.

  • 브라우저 캐시를 삭제한다(Ctrl + F5 혹은 Ctrl + Shift + R).
  • 만일 IE라면 브라우저를 닫고 다시 연다.
  • 만일 여전히 골머리를 썩고 있다면 새로운 탭을 열어보거나 How do I force a favicon refresh을 참고하라.
  • 일시적으로 명시적인 HTML 태그를 추가하고 쿼리 문자열을 추가한다. 확인이 완료된 후엔 이를 제거하자.

    <link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2">
    <link rel="icon" sizes="16x16 32x32" href="/favicon.ico?v=2">
    

도움이 되는 도구들

  • OptiPNG : ICO 파일안에 넣을 PNG 파일들을 최적화 한다.
  • x-icon editor : ICO 파일을 만들수 있는 웹용 도구이다.
  • Favicon & App Icon Generator : PNG 파비콘을 다양하게 생성해준다(위에서 다룬 apple-touch-icon을 크기별로, IE10용 타일 파비콘을 생성).



  1. 아이콘( ico) 파일은 하나의 파일에 여러가지의 크기의 이미지를 설정할 수 있다. [본문으로]

댓글을 달아 주세요

  1. ㅎㅎ 2015.05.28 23:10 신고

    속이 다 시원하네요 감사합니다ㅠㅠb

  2. BlogIcon 사목 2015.06.19 21:51 신고

    좋은 정보 감사합니다

  3. 파비콘 궁그미 2015.06.30 16:18 신고

    덕분에 많은 도움 되었어요!
    제가 더 궁금한게 있는데요..
    파이어폭스 에서 바탕화면에 사이트 바로가기 아이콘을 생성하면
    파비콘으로 설정된 이미지가 아이콘 이미지로 나올거라고 생각했는데 그러지 않아서요 그러니까, 익스와 동일한 결과를 보고싶은데 이게 아예 파폭에서는 불가한건지요?
    어디서도 원하는 대답을 찾을 수 없어서 그런데 실례 무릅쓰고 여쭤봅니다아
    아 그리고 참고로 파폭에서 파비콘 표시되는 확장 기능을 추가하였는데 url 창에는 아이콘 표시가 되나 바로가기 아이콘은 파비콘 이미지로 나오지 않네요.. 혹시 아시면 답변 부탁드려도 될까요 ㅠ
    감사합니당

    • BlogIcon 흉내쟁이 2015.06.30 16:34 신고

      안녕하세요! 문의주신 내용은 아마도 윈도우와 관련되어 있는 사항일껍니다. 윈도우와 IE는 마이크로소포트에서 만들었으니 바탕화면에 웹페이지의 바로가기를 만들어도 파비콘을 끌어다쓸 수 있는 기능이 있는 것이고, 기타 브라우저들은 그런 권한이 없는 것이지요.

      꼭 변경해야 한다면 일반 아이콘 변경하듯이 등록한 사이트들의 파비콘을 다운로드받고 그것을 바로가기 아이콘에 마우스 우클릭하여 아이콘 변경하는 방법뿐이 없습니다.

    • 파비콘 궁그미 2015.06.30 17:49 신고

      우왉!!!!! 정말 감사합니다 ㅠㅠㅠ
      많은 도움 되었어요!!!!!

    • BlogIcon 흉내쟁이 2015.06.30 17:57 신고

      비도 오고 날씨도 우중충한데, 머리싸맨 궁금중도 별다른 해결책이 없어 안타깝네요. 관련사항을 오픈하지 않은 마이크로소프트에 썩소한번 제가 날려드리지요. 쫌생이 마소! (-.-*)~

  4. 파비콘좋아 2016.03.21 16:51 신고

    파비콘 관련 좋은 정보 감사합니다.

    하나 궁금한 점이 있는데요.
    파비콘으로 96x96 사이즈 png 이미지를 지정했었는데요.
    즐겨찾기 후에 확인해보면 바로 아이콘이 보이는 것이 아니라 한번 접속 후에 보이는 현상이 있었습니다.
    혹시 이미지 사이즈가 문제일까 해서 180x180 사이즈 png 이미지로 변경 하니 즐겨찾기 후 바로 아이콘이 적용이 되었는데요.
    이와 관련하여 알고 계신 것이 있을까 해서 질문 드립니다.

  5. 파비콘좋아 2016.03.21 18:39 신고

    한 가지 더 궁금한 점이 있는데요.
    파비콘 적용 후 아이폰 사파리에서 '홈 화면에 추가'를 하면 파비콘이 잘 보이는데요.
    '즐겨찾기에 추가'나 '책갈피에 추가'를 하는 경우 최초에는 노출이 되지 않다가
    추가된 즐겨 찾기를 통해 한번 접속을 하고 나면 보이는데요.
    (위에 적어주신 내용 중 IE6와 유사한 증상인데, 다른 사이트의 경우에는 잘 노출 됩니다)

    혹시 관련 이슈 알고 계신 것이 있으신지요?

  6. 즈땜므레 2016.06.22 13:14 신고

    혹시 안드로이드 태블릿은 어떻게 설정 해야 하는지 아시나요? 32 ico와 favicon-152.png 2개 세팅 해놨는데요.
    홈화면 추가시 32. ico가 적용 되서..너무 흐리게 나오네요...

  7. 애봉이 2016.06.23 10:50 신고

    좋은자료 잘보고 갑니다.

  8. BlogIcon 달서구 지은 2016.08.16 10:48 신고

    좋은정보 감사합니다~!

  9. Noah 2016.09.22 11:19 신고

    좋은 정보 감사합니다^^

  10. jacksoneli 2017.01.18 10:35 신고

    정리를 너무 잘해주셨네요. 후반부엔 실전정리로 요약까지!! 정말 감사드립니다.

  11. 아콘 2017.02.09 13:51 신고

    와우 감사합니다 ㅎㅎㅎ 진짜 깔금하네요 마지막 정리도 너무 좋아요~

  12. coverboy 2017.02.10 05:40 신고

    좋은 정리 잘 보고 갑니다. 감사합니다.

  13. 바람현 2017.05.08 07:53 신고

    icon 이나 shortcut 아이콘 옵션들이 없을땐 어떻게 해야하나요?

    출처: http://webdir.tistory.com/337 [WEBDIR]

    • BlogIcon 흉내쟁이 2017.05.08 08:24 신고

      아이콘 옵션이 없다는 것은 무슨 뜻인가요? html이나 php 무엇이되었든 아래와 같이 head 영역안에 작성하실수 있습니다.

      <link rel="shortcut icon" href="/path/to/favicon.ico">


  14. 눈누우난나아 2017.07.13 15:18 신고

    감사합니다.. 어휴... 매번 몇가지 안쓰다가 다양하게 작성하려고 하니 막막했는데 너무 좋은 글이네요!

티스토리 툴바