홈페이지에 적절한 Favicon 사이즈는?

2020/02/24 - [프론트엔드 개발 놀이터/css, design] - 파비콘(Favicon)의 모든 것

 

 

홈페이지를 구축할때 favicon 정보를 입력하게 됩니다. 먼저 favicon은 무엇일까요? 아래에서 알아보세요.

 

! favicon이란

favicon은 어플리케이션의 대표 아이콘인 이미지를 의미하며 브라우저나 디바이스에서 해당 어플리케이션을 표시하는데 사용됩니다. 아이콘 목적으로 사용되므로 매우 작습니다.

일반적으로 favicon 아이콘은 ico 또는 png 포맷으로 사용됩니다. 대부분의 브라우저가 ico, png를 모두 지원하며 png를 사용하는 경우가 요즘은 더 많은 것 같습니다. svg의 경우 벡터로 더 편리할 수 있으나 지원하는 브라우저 제한이 있으므로 많이 사용되지 않습니다.

 

 

! favicon.ico 요청하지 않는 방법

브라우저에서 favicon 파일을 요청시 파일이 없는 경우 404 에러가 발생할 수 있습니다. 이를 회피하기 위한 방법으로 아래와 같이 코드를 추가할 수 있습니다.

<link rel="shortcut icon" href="data:image/x-icon" type="image/x-icon">

위 코드를 추가할 경우 임의적인 data값 favicon을 생성하여 주기 때문에 404 에러는 더 이상 발생하지 않게 됩니다.

 

 

# Favicon 사이즈 및 타입

이때 적절한 favicon 사이즈를 알 필요가 있습니다. 웹브라우저 또는 디바이스(핸드폰, 태블릿 등등)마다 요구하는 사이즈가 다를 수 있으며 일반적으로 16x16, 32x32가 많이 사용됩니다. 또한 favicon은 다양한 이미지 타입이 사용되나 가장 많이 사용되는 방법으로 ico 타입이 사용됩니다.

그럼 디바이스 또는 브라우저 마다 다른 favicon 사이즈에 대하여 간략히 알아보겠습니다.

 

@ 브라우저 및 디바이스 / 사이즈

• Browser(브라우저에 많이 적용되는 기본 사이즈) - 16 x 16
• IE9 사이트 - 24x24
• IE(Internet Explorer) - 16x16, 32x32, 48x48
• Windows site - 48x48, 64x64
• iPod touch - 72x72
• iPad home size - 76 x 76
• Google TV - 96x96
• iPhone retina touch - 120x120
• Chrome Web Store - 128x128
• Win 8.1 tile - 150x150
• iPhone iOS - 180x180​​​​​​
• Android Chrome home - 196x196

 

! 추천하는 방법

아래 방법은 제가 가장 많이 사용하는 방법입니다.

32x32  ,  196x196

<link rel="icon" type="image/png" sizes="32x32" href="/favicon_32.png" />
<link rel="icon" type="image/png" sizes="196x196" href="/favicon_196.png" />

# HTML에 favicon 추가하기 방법

favicon의 선언은 html의 meta 영역에 추가됩니다. 이때 아래와 같이 코드가 header 영역에 사용될 수 있습니다.

<header>
  <link rel="shortcut icon" href="/images/favicon.ico">
</header>

Android Chrome을 위한 경우 위 코드에 아래와 icon사이즈 favicon을 추가로 설정합니다.

<header>
  <link rel="shortcut icon" href="/images/favicon.ico">
  <link rel="icon" type="image/png" href="/images/favicon_192.png" sizes="192x192">
<header>

이제 위 태그를 추가하게 되면 브라우저를 띄울때 title이 출력되는 부분 앞에 아이콘이 나타나게 됩니다. 위에 보면 파일명을 아래와 같이 표기하였죠.

favicon_192.png
favicon_32.png

여러개의 favicon 사이즈를 사용한다면 이런식으로 파일명 뒤에 사이즈를 함께 표기하면 더 좋을 것입니다.

favicon 추가에 대한 방법으로 아래의 w3c 페이지를 참고하는 것도 좋습니다.

https://www.w3.org/2005/10/howto-favicon

 

 

 

 

 

 

 

출처 : https://webisfree.com/2017-05-23/%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90-%ED%95%84%EC%9A%94%ED%95%9C-%EC%A0%81%EC%A0%88%ED%95%9C-favicon-%EC%82%AC%EC%9D%B4%EC%A6%88%EB%8A%94