파비콘 생성기는 글자 한 개나 이모지, 그리고 배경색·글자색만 정하면 브라우저 탭에 표시되는 파비콘(favicon)과 소셜 공유용 OG 이미지를 즉시 만들어 PNG로 내려받게 해 주는 도구입니다. 디자인 프로그램을 열거나 이미지 편집 기술 없이도, 사이트 이름의 첫 글자를 딴 심플한 아이콘을 몇 초 만에 완성할 수 있습니다.
파비콘은 브라우저 탭, 즐겨찾기(북마크) 목록, 방문 기록, 모바일 홈 화면 바로가기 등 사용자가 여러 사이트를 오갈 때 내 사이트를 식별하는 작은 로고입니다. 파비콘이 없으면 탭에 회색 빈 문서 아이콘이 표시되어 어떤 페이지인지 한눈에 알기 어렵고, 신뢰도와 완성도가 떨어져 보입니다. 개인 블로그, 사이드 프로젝트, 사내 도구처럼 로고가 아직 없는 사이트에 특히 유용합니다.
이 도구는 글자·이모지를 배경 위에 가운데 정렬해 렌더링하고, 파비콘용 32px, 애플 터치 아이콘용 180px, 소셜 공유용 512px 세 가지 크기의 PNG를 각각 다운로드해 줍니다. 원형(둥근 원) 옵션도 제공합니다. 아래에서는 파비콘의 개념, 실제로 필요한 권장 크기와 용도, HTML에 삽입하는 정확한 방법, 그리고 .ico와 PNG 형식의 차이까지 정리했습니다.
사용 방법
- 가운데에 넣을 글자나 이모지를 입력합니다. 여러 글자를 넣어도 실제로는 첫 글자(또는 첫 이모지) 하나만 그려지므로, 사이트 이름의 머리글자나 대표 이모지 하나를 넣는 것이 좋습니다.
- 배경색과 글자색을 지정합니다. 두 색은 탭의 작은 크기에서도 또렷하게 구분되도록 명도 차이가 큰 조합(예: 진한 배경 + 흰 글자)을 고르는 것이 좋습니다.
- 원형 옵션을 켜거나 끕니다. 켜면 정사각형을 원으로 잘라내어 둥근 아이콘이 되고, 끄면 모서리가 각진 정사각형 아이콘이 됩니다.
- 미리보기를 확인한 뒤 파비콘 32, 애플터치 180, OG 512 버튼을 눌러 필요한 크기의 PNG 파일을 각각 내려받습니다. 내려받은 파일을 사이트에 업로드하고 HTML <head>에 link 태그로 연결하면 됩니다.
파비콘이란 무엇인가요
파비콘(favicon)은 'favorite icon'의 줄임말로, 웹사이트를 상징하는 아주 작은 아이콘입니다. 브라우저는 페이지를 열 때 이 아이콘을 찾아 탭 제목 왼쪽, 주소창, 즐겨찾기·방문 기록 목록 등에 표시합니다. 파비콘은 사이트의 '작은 로고'이자 시각적 명함 역할을 합니다.
여러 탭을 동시에 열어 둔 상황에서 파비콘은 특히 중요합니다. 탭이 좁아지면 제목 글자는 잘려 보이지 않지만 파비콘은 끝까지 남기 때문에, 사용자는 아이콘만 보고도 원하는 탭을 빠르게 찾습니다. 스마트폰에서 웹페이지를 홈 화면에 추가할 때도 이 아이콘이 앱처럼 표시됩니다.
파비콘과 OG 이미지는 다릅니다
파비콘은 브라우저 탭·북마크에 쓰이는 수십 픽셀 크기의 작은 아이콘이고, OG 이미지(Open Graph 이미지)는 카카오톡·페이스북·슬랙 등에 링크를 공유할 때 미리보기 카드에 크게 뜨는 대표 이미지입니다. 이 도구의 512px 출력은 홈 화면 아이콘이나 간단한 OG 썸네일 용도로 활용할 수 있습니다.
권장 파비콘 크기와 용도
파비콘은 쓰이는 위치마다 필요한 크기가 다릅니다. 예전에는 16×16 하나로 충분했지만, 고해상도(레티나) 디스플레이와 모바일 홈 화면 아이콘이 늘면서 여러 크기를 함께 준비하는 것이 표준이 되었습니다. 아래는 실무에서 자주 쓰는 크기와 그 용도입니다.
| 크기(px) | 주요 용도 | 비고 |
|---|---|---|
| 16×16 | 브라우저 탭·주소창 | 가장 작게 표시되는 기본 크기 |
| 32×32 | 탭·북마크(고해상도) | 레티나 화면 탭에서 선명하게 표시 |
| 180×180 | 애플 터치 아이콘 | iOS 홈 화면 바로가기 아이콘 |
| 192×192 | 안드로이드 홈 화면 | Chrome/안드로이드 웹 앱 아이콘 |
| 512×512 | PWA·소셜 공유 | 설치형 웹 앱 스플래시·OG 썸네일 |
이 도구가 만드는 크기
이 생성기는 32px(파비콘), 180px(애플 터치 아이콘), 512px(OG·PWA) 세 가지 PNG를 제공합니다. 16px·32px 탭 아이콘은 큰 이미지를 브라우저가 자동으로 축소해 표시하므로, 32px 파일 하나로 일반적인 탭 표시는 충분히 대응됩니다. 안드로이드 192px가 별도로 필요하면 512px 파일을 축소해 사용할 수 있습니다.
HTML에 파비콘 삽입하는 방법
내려받은 PNG 파일을 사이트 루트나 이미지 폴더에 올린 뒤, HTML 문서의 <head> 안에 link 태그로 연결합니다. rel 속성으로 아이콘의 종류를, sizes로 크기를, type으로 파일 형식을 알려 주면 브라우저가 상황에 맞는 아이콘을 골라 씁니다.
- rel="icon": 일반 브라우저 탭·북마크에 쓰이는 기본 파비콘을 지정합니다. type과 sizes를 함께 적어 주면 좋습니다.
- rel="apple-touch-icon": iOS 사파리에서 홈 화면에 추가할 때 쓰는 180×180 아이콘을 지정합니다. 애플 터치 아이콘은 모서리를 iOS가 자동으로 둥글게 처리합니다.
- rel="manifest": 안드로이드/PWA용 아이콘(192·512)은 보통 site.webmanifest 파일에 등록하고, 그 파일을 manifest로 연결합니다.
삽입 예시 코드
<head> 안에 다음처럼 넣습니다. <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> 와 <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png"> 를 함께 적으면, 일반 탭과 iOS 홈 화면 아이콘이 모두 적용됩니다. 경로(href)는 파일을 올린 실제 위치에 맞게 바꾸세요.
.ico와 PNG, 어떤 형식을 쓸까
전통적으로 파비콘은 favicon.ico라는 전용 형식을 사이트 루트에 두는 방식이 오래 쓰였습니다. .ico 파일은 한 파일 안에 16·32·48px 등 여러 크기를 함께 담을 수 있고, 브라우저가 link 태그가 없어도 /favicon.ico 경로를 자동으로 찾아 준다는 장점이 있습니다.
오늘날의 모든 주요 브라우저는 PNG 파비콘도 완벽하게 지원하며, PNG는 투명 배경과 선명한 고해상도 표현에 유리합니다. 그래서 요즘은 PNG를 link 태그로 명시적으로 연결하는 방식이 널리 쓰입니다. 이 도구는 PNG를 출력하므로, <head>에 link 태그로 연결해 사용하면 됩니다.
| 구분 | .ico | PNG |
|---|---|---|
| 다중 크기 | 한 파일에 여러 크기 포함 | 크기별로 파일 분리 |
| 투명 배경 | 제한적 | 완전 지원 |
| 자동 탐색 | /favicon.ico 자동 인식 | link 태그로 직접 연결 |
| 이 도구 출력 | 미지원 | 지원(PNG 다운로드) |
구형 브라우저까지 챙기려면
아주 오래된 브라우저나 link 태그 없이도 아이콘이 뜨길 바란다면, PNG를 온라인 변환기로 .ico로 바꿔 사이트 루트에 favicon.ico로 두면 폭넓게 호환됩니다. 다만 최신 환경만 대상으로 한다면 PNG + link 태그만으로 충분합니다.
자주 묻는 질문
- 글자를 여러 개 넣었는데 왜 하나만 나오나요?
- 파비콘은 아주 작게 표시되기 때문에 글자가 많으면 알아볼 수 없습니다. 그래서 이 도구는 입력한 값의 첫 글자(또는 첫 이모지) 하나만 가운데에 크게 그립니다. 사이트 이름의 머리글자 한 글자나 대표 이모지 하나를 넣어 주세요.
- 이모지도 파비콘으로 만들 수 있나요?
- 네. 글자 입력란에 이모지를 넣으면 그 이모지가 아이콘 가운데에 그려집니다. 다만 이모지 모양은 사용자의 운영체제·브라우저 폰트에 따라 조금씩 다르게 보일 수 있다는 점은 참고하세요.
- 16px, 32px 같은 작은 파비콘은 왜 따로 안 만드나요?
- 브라우저는 지정된 파비콘 이미지를 필요한 크기로 자동 축소해 표시합니다. 이 도구가 주는 32px PNG 하나로 일반적인 탭·주소창 표시는 충분히 대응됩니다. 더 작은 16px가 반드시 필요하면 32px 파일을 그대로 사용해도 브라우저가 알아서 줄여 보여 줍니다.
- 다운로드한 PNG를 어디에 올려야 하나요?
- 웹사이트의 파일 저장 위치(보통 루트 폴더나 public·static·img 같은 폴더)에 올린 뒤, HTML <head>의 link 태그 href에 그 경로를 적으면 됩니다. 예를 들어 파일을 루트에 두었다면 href="/favicon-32.png"처럼 지정합니다.
- 파비콘을 바꿨는데 탭에 그대로 예전 아이콘이 보여요.
- 브라우저가 파비콘을 캐시(임시 저장)하기 때문입니다. 강력 새로고침(Windows는 Ctrl+F5, Mac은 Cmd+Shift+R)을 하거나, 브라우저 캐시를 지운 뒤 다시 접속하면 새 파비콘이 반영됩니다. 파일 이름을 바꿔 새 경로로 연결하는 것도 확실한 방법입니다.
- 애플 터치 아이콘은 꼭 필요한가요?
- iOS 사파리에서 사용자가 웹페이지를 홈 화면에 '추가'할 때 쓰이는 아이콘입니다. 홈 화면 바로가기를 앱처럼 보이게 하려면 180×180 애플 터치 아이콘을 넣어 두는 것이 좋습니다. 없으면 iOS가 페이지 스크린샷을 축소해 대신 쓰기 때문에 완성도가 떨어져 보입니다.