홈페이지에 필요한 적절한 favicon 사이즈는?

Last Modified : 2020-03-31 / Created : 2017-05-23

33,320
View Count

주소 복사하기

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

! favicon이란

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

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

# 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

! 추천하는 방법

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

# HTML에 favicon 추가하기 방법

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

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

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

favicon_192.png
favicon_32.png

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

favicon 추가에 대한 방법으로 아래의 w3c 페이지를 참고하는 것도 좋습니다.
https://www.w3.org/2005/10/howto-favicon

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

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

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

favicon 아이콘

아래의 글도 찾고 계시지 않나요?

웹개발에서 병렬처리가 의미하는 것은?

AWS 누구나 쉽게 만들고 사용하기