favicon 만들기

경험이 기록으로·2022년 9월 7일
0

WEB

목록 보기
1/1

무턱대고 코드 복붙으로 구현하였던 favicon..

이번 프로젝트에서는 favicon에 대해 궁금증이 생겨 관련된 article을 여러개 읽게되었다.

오늘은 보고 읽은 favicon에 대해 정리해보는 시간을 가져보려 한다.


favicon 개념 정리

:: favicon?

일반적으로 사이트 title 정보와 함께 표시되는 웹 페이지를 대표하기 위해 사용되는 16x16픽셀의 작은 image를 의미한다.

favicon은 브라우저 탭, 북마크, 방문기록, 검색 결과등에 표시되며 웹상에서 내 웹사이트임을 알아볼 수 있는 시각적인 식별자가 된다.


:: favicon의 중요성

  1. favicon을 사용하는 경우 내 웹사이트가 기억에 남도록 하여 사용자 경험을 향상 시킨다.
  2. 또한 보여주는 이미지를 통해 웹사이트의 브랜딩 및 가시성에 기여한다.
  3. 또한 favicon을 사용하는 사이트의 경우 사용들에게 유령 사이트가 아닌 관리되고 있는 웹사이트라는 이미지를 주어 신뢰도를 높인다.
  4. 방문 기록에도 favicon이 사용되기 때문에 재방문 사용자에게 웹사이트를 눈에띄게 노출시킬 수 있다.

:: 크기

일반적으로 파비콘을 만들 때 가장 적합한 크기는 16x16픽셀라고 한다.

파비콘은 다양한 기기에서 보여지는 만큼 다양한 크기로 제공될 수 있다. 용도에 따라 표준 파비콘 크기가 존재하고 내용은 아래와 같다.

16x16: 브라우저용

32x32: 작업표시줄 단축키용

96x96: 데스크탑 단축키용

180x180: 애플 터치용

좀더 자세한 내용을 확인하고 싶다면 아래의 링크를 추천한다.


:: 파일

파비콘 파일로 지원되는 파일의 형식에는 ICO, PNG, JPEG, SVG, GIF가 있다.

  • ICO
    • ICO 파일은 모든 브라우저에서 지원하며 파일 하나가 여러가지 크기의 이미지를 포함할 수 있다.
    • 이러한 특징 때문에 브라우저에 의존하지 않고도 이미지의 크기와 비율을 조정할 수 있다.
  • PNG
    • 만들기 쉬운 파일 형식이며 일반적으로 이미지 및 파비콘을 고화질로 전송한다.

    • 파일이 가볍기 때문에 파일들이 빠르게 로드될 수 있다.

      💡 **투명도** 디자인에 투명 배경이 있는 경우, 투명도 설정이 켜져 있는 상태에서 파일을 PNG로 저장해야 한다.
  • SVG
    • 가볍기 때문에 페이지 속도나 사이트의 성능을 저하시키지 않으면서 고화질 이미지를 전송할 수 있다.
    • 아직은 호환성 문제가 있지만 점점 개선되고 있다.
    • SVG 파비콘 사용하기 : https://brunch.co.kr/@ultra0034/129
  • GIF
    • 움직이는 이미지를 파비콘으로 넣을 수 있다.
    • 크기가 작으면 보기가 어려울 수 있다.


favicon 만들기

:: 파비콘 설정하기 - 기본편

웹소스 최상단에 16x16 32x32의 이미지를 멀티 사이즈(여러 사이즈의 이미지를 가지고 있는 상태)나 단일 사이즈의 favicon.ico 파일을 올려놓으면 끝난다.

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


:: 파비콘 설정하기 - 심화편

현재는 다양한 디바이스와 브라우저를 지원하기 위해서 기기에 맞게 설정도 다양하게 작업해줘야한다.

단, 다양한 디바이스를 지원할 필요가 없는 경우 불필요한 설정을 제외하고 필요한 내용만 작성해주는 것이 좋다.

범용으로 설정하기

<head> 

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

</head>

홈페이지, 모바일웹용으로 설정하기1

<head> 

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> 
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> 
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> 
<link rel="manifest" href="/manifest.json"> 
<meta name="theme-color" content="#ffffff"> 

</head>

홈페이지, 모바일웹용으로 설정하기2

<head> 

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> 
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> 
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> 
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> 
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> 
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> 
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> 
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> 
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> 
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> 
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png"> 
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> 
<link rel="manifest" href="/manifest.json"> 
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> 
<meta name="msapplication-TileColor" content="#da532c"> 
<meta name="msapplication-TileImage" content="/mstile-144x144.png"> 
<meta name="theme-color" content="#ffffff"> 

</head>


:: 파비콘 설정하기 - SVG 편

SVG 파비콘은 아직 모든 브라우저에서 지원하지는 않기 때문에 웹사이트 루트에 32 x 32 favicon.ico를 지정해줄 필요가 있다.

HTML code

<head> 
<!-- 
메인 favicon
	- link rel 속성으로 "icon" 값을 이용하기
	- 크기 상관없이 SVG로 구현한다.
	- type="image/svg+xml은 작성하지 않아도 된다.
-->
	<link rel="icon" href="favicon.svg">

<!-- 
Mask icon
	- 사파리 브라우저에서 favicon 이용하기
	- link rel 값으로 "mask-icon"을 이용한다.
	- svg를 단색으로 사용하는 경우 투명 배경 위에 작업하여 마크업에서 색상 속성을 추가할 수 있다.
-->
	<link rel="mask-icon" href="mask-icon.svg" color="#000000">

<!-- 
Touch icon
	- iOS 전용 디바이스에서 favicon 이용하기
	- link rel 값으로 "apple-touch-icon" 값을 이용한다.
	- 180 x 180 크기가 필요하며 크기 지정은 따로 안해도 된다.
-->
	<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- 크롬 브라우저 color를 위해서 여전히 theme-color 지정이 필요하다.-->
	<meta name="theme-color" content="#ffffff">
</head>

manifest.json 설정

icon을 위한 mainfest.json 설정은 아래와 같이 해주면 된다. svg 아이콘을 사용하기 위한 설정은 최대 사이즈인 512 x 512 설정만 해주면 된다. 그뿐이다.

아래의 icon 설정은 안드로이드와 크롬에서 쓰이는 설정이다.

{
    "name": "Starter",
    "short_name": "Starter",
    "icons": [{
        "src": "google-touch-icon.png",
        "sizes": "512x512"
    }],
    "background_color": "#ffffff",
    "theme_color": "#ffffff",
    "display": "fullscreen"
}

SVG favicon 원본 글 : https://brunch.co.kr/@ultra0034/129



References


profile
언제나 작성한 코드에 대해 이유를 말할 수 있도록

0개의 댓글