내 웹사이트 만들었는데 브라우저 탭에 아이콘이 안 뜬다. 다른 사이트들은 로고가 작게 보이는데 내 건 그냥 기본 아이콘이다. 파비콘이라는 걸 넣어야 한다고 한다.
파비콘이 뭔지
Favicon은 Favorite Icon의 줄임말이다. 브라우저 탭, 북마크, 모바일 홈 화면에 표시되는 작은 아이콘이다.
파비콘 생성기로 16x16 또는 32x32 픽셀의 작은 아이콘을 만들 수 있다. 보통 사이트 로고를 축소해서 쓰거나, 심볼만 따로 만든다.
텍스트로 파비콘 만들기
로고가 없으면 텍스트 파비콘으로 글자 하나를 아이콘으로 만들 수 있다. 사이트 이름 첫 글자를 넣으면 된다.
파비콘 만들기에서:
- 글자 입력 (예: "A")
- 배경색 선택
- 글자색 선택
- 폰트 선택
설정하고 생성하면 깔끔한 텍스트 아이콘이 나온다.
이모지로 파비콘
이모지 파비콘도 가능하다. 별, 하트, 전구 같은 이모지를 파비콘으로 쓸 수 있다.
이모지 선택하면 해당 이모지가 파비콘 크기에 맞게 렌더링된다. 빠르게 만들 때 유용하다.
ICO 파일 다운로드
ICO 변환된 파일로 다운로드할 수 있다. favicon.ico 형식은 모든 브라우저에서 지원하는 전통적인 포맷이다.
파비콘 다운로드에서 ICO 외에 PNG도 받을 수 있다. 여러 크기(16x16, 32x32, 180x180 등)가 포함된다.
웹사이트에 적용
웹사이트 아이콘 파일을 웹사이트 루트에 올리고 HTML head에 추가한다:
<link rel="icon" href="/favicon.ico">
PNG 파비콘이면:
<link rel="icon" type="image/png" href="/favicon.png">
이렇게 하면 탭에 아이콘이 표시된다.
다양한 크기가 필요한 이유
- 16x16: 브라우저 탭
- 32x32: 북마크바
- 180x180: iOS 홈 화면
- 192x192: Android 홈 화면
favicon 생성기에서 여러 크기를 한번에 만들어준다.
PNG to ICO
기존 이미지가 있으면 PNG to ICO 변환으로 파비콘 파일로 바꿀 수 있다. 정사각형 이미지를 올리면 ICO 형식으로 변환해준다.
웹사이트 파비콘 만드는 데 5분도 안 걸린다.
정리
웹사이트 탭에 아이콘 표시하려면 파비콘 생성기로 만들면 된다. 텍스트나 이모지로 빠르게 만들 수 있고, ICO/PNG 다운로드해서 HTML에 추가하면 끝이다.