웹사이트를 만들었는데 브라우저 탭에 기본 아이콘이 표시됩니다. 다른 사이트들처럼 나만의 아이콘을 넣고 싶은데, 그래픽 디자인 프로그램을 다룰 줄 모릅니다. 포토샵 없이도 간단하게 파비콘을 만들 수 있는 방법이 없을까요? 파비콘 생성기를 사용하면 텍스트나 이모지로 파비콘을 쉽게 만들 수 있습니다.
파비콘이란?
파비콘(Favicon)은 "Favorite Icon"의 줄임말로, 브라우저 탭, 북마크, 주소창 등에 표시되는 작은 아이콘입니다. 보통 16x16 또는 32x32 픽셀 크기입니다. 웹사이트의 정체성을 나타내는 중요한 요소이고, 여러 탭을 열어둘 때 사이트를 구분하는 데도 도움이 됩니다.
텍스트로 파비콘 만들기
파비콘 만들기 도구에서 텍스트 모드를 선택하고 글자를 입력합니다. 보통 사이트 이름의 첫 글자나 약자를 사용합니다:
- 회사명 "TechCorp"라면 "T"
- 블로그 "My Blog"라면 "M"
- 쇼핑몰 "Fashion Store"라면 "FS"
한 글자 또는 두 글자가 가장 보기 좋습니다. 작은 크기에서도 잘 보여야 하니까요.
이모지로 파비콘 만들기
이모지를 사용하면 더 쉽습니다. 이모지 모드로 전환하고 원하는 이모지를 선택하면 됩니다:
- 카페 사이트라면 커피잔 이모지
- 여행 블로그라면 비행기 이모지
- 음악 사이트라면 음표 이모지
- 쇼핑몰이라면 쇼핑카트 이모지
이모지는 이미 디자인되어 있어서 별도 작업 없이 바로 사용할 수 있습니다.
색상 커스터마이징
웹사이트 아이콘 생성기에서 색상을 조절할 수 있습니다:
- 배경색: 아이콘의 배경 색상. 사이트 브랜드 컬러에 맞추면 좋습니다
- 글자색: 텍스트 모드에서 글자 색상
- 테두리: 원형, 사각형, 둥근 사각형 등 모양 선택
배경색과 글자색의 대비가 충분해야 작은 크기에서도 잘 보입니다.
미리보기로 확인
설정을 바꾸면 실시간으로 미리보기가 업데이트됩니다. 16x16, 32x32, 48x48 등 다양한 크기에서 어떻게 보이는지 확인할 수 있습니다. 작은 크기에서도 식별 가능한지 꼭 확인하세요.
다운로드 형식
파비콘은 여러 형식과 크기가 필요합니다:
- ICO: 전통적인 파비콘 형식. 여러 크기를 하나의 파일에 담을 수 있음
- PNG: 현대 브라우저에서 지원. 크기별로 별도 파일
- SVG: 벡터 형식. 크기에 관계없이 선명
일반적으로 favicon.ico와 다양한 크기의 PNG 파일을 함께 사용합니다.
웹사이트에 적용하기
다운로드한 파비콘을 웹사이트에 적용하는 방법입니다. HTML의 head 태그 안에 link 태그를 추가합니다. rel 속성에 icon을 지정하고 href에 파비콘 파일 경로를 넣습니다. 파일을 웹사이트 루트 디렉토리에 업로드하고 경로를 맞춰주면 됩니다.
필요한 크기들
다양한 환경을 지원하려면 여러 크기의 파비콘이 필요합니다:
- 16x16: 브라우저 탭, 주소창
- 32x32: 탭 바, 북마크
- 48x48: 윈도우 사이트 아이콘
- 180x180: iOS 홈 화면 (apple-touch-icon)
- 192x192: 안드로이드 크롬
- 512x512: PWA 스플래시 화면
마무리
웹사이트에 개성 있는 파비콘을 넣고 싶다면 파비콘 생성기를 사용해보세요. 텍스트 한 글자나 이모지로 간단하게 만들 수 있고, 색상과 모양도 커스터마이징 가능합니다. ICO, PNG 형식으로 다운로드해서 웹사이트에 바로 적용할 수 있습니다.