HTML: 파비콘에 대해서 알아봅시다!

파비콘 (favicon)

웹페이지에 접속했을때, 상단 탭에 보여지는 아이콘

• 파비콘(favicon) 기본 설정

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

  • 크기와 용도
    • 16x16 : IE9 주소 표시줄, 고정된(pinned) 사이트의 점프목록/툴바/오버레이
    • 32x32 : IE의 새로운 탭 페이지, 윈도우7 이상에서 작업 표시줄 단추, Safari 나중에 읽기 사이드바
    • 48x48 : 윈도우즈 사이트 아이콘
    • 24x24 : IE9 고정된(pinned) 사이트 브라우저 UI
    • 64x64 : 윈도우즈 사이트 아이콘, HiDPI/Retina 에서 Safari 나중에 읽기 사이드바
• 파비콘(favicon) 추가 설정

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

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

• 파비콘(favicion) 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">

  <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">

출처