Utility Edition

파비콘 생성기

글자나 이모지, 이미지 하나로 브라우저 탭부터 휴대폰 홈 화면까지 필요한 파비콘 파일을 한 번에 만듭니다.

만드는 방법
글꼴
특수문자 복사★ ♥ 같은 특수문자영어 폰트 변환기𝓐 𝔸 같은 꾸밈 글자
배경 모양
RGB 색상 변환기색 코드 변환, 어울리는 색 찾기
추천 색 조합
66%

미리보기

브라우저 탭과 북마크
내 사이트
내 사이트
내 사이트
내 사이트
검색 결과
내 사이트https://example.com
휴대폰 화면
내 사이트
아이폰
내 사이트
안드로이드

내려받기

두 단계면 사이트에 적용됩니다.

파일 받기

ZIP을 풀어 사이트의 최상위 폴더(/)에 올립니다. 파일을 누르면 하나씩 받을 수 있습니다.

HTML 코드 넣기

모든 페이지의 <head> 안에 붙여 넣습니다. 파일을 다른 폴더에 올렸다면 경로를 바꿉니다.

<head>
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
rel="icon"
브라우저 탭, 북마크, 구글 검색 결과
rel="apple-touch-icon"
아이폰·아이패드 홈 화면. iOS는 rel="icon"을 쓰지 않습니다.
rel="manifest"
안드로이드 홈 화면과 웹 앱 아이콘

적용한 뒤 새 창이나 시크릿 창에서 사이트를 열어 탭의 아이콘을 확인하세요. 브라우저가 예전 아이콘을 기억하고 있을 수 있습니다.

입력한 내용은 이 브라우저에서만 처리됩니다.

파비콘 생성기

파비콘은 브라우저 탭, 북마크, 방문 기록, 검색 결과에서 사이트를 나타내는 작은 아이콘입니다. 휴대폰에서 사이트를 홈 화면에 추가하면 앱 아이콘으로도 쓰입니다.

이 도구는 글자, 이모지, 이미지 중 하나로 아이콘을 디자인하고, 쓰이는 곳마다 필요한 크기와 여백에 맞춘 파일 다섯 개와 manifest 파일을 만듭니다. 이미지와 글자는 서버로 보내지 않고 브라우저 안에서 처리합니다.

사용법

  1. 글자, 이모지, 이미지 중 만드는 방법을 고릅니다.
  2. 배경 모양, 색, 크기를 바꾸면서 오른쪽 미리보기로 브라우저 탭, 북마크, 검색 결과, 휴대폰 화면에서 어떻게 보이는지 확인합니다.
  3. "ZIP으로 모두 내려받기"를 눌러 파일을 받고, 사이트의 최상위 폴더에 올립니다.
  4. HTML 코드를 복사해 모든 페이지의 <head> 안에 넣습니다.

관련 용어

favicon.ico

윈도우 아이콘 형식(ICO) 파일입니다. 사이트 최상위의 /favicon.ico에 둡니다. RSS 리더 같은 일부 도구는 다른 곳은 보지 않고 이 주소만 찾기 때문입니다. 이 도구는 32×32 한 장을 넣습니다.

apple-touch-icon

아이폰과 아이패드에서 사이트를 홈 화면에 추가할 때 쓰는 180×180 PNG입니다. iOS는 HTML의 rel="icon"을 쓰지 않고 이 링크를 씁니다. 둘레에 20px 정도 여백을 두고 배경색을 채우면 보기 좋습니다.

웹 앱 매니페스트

사이트 이름과 아이콘 목록을 담은 JSON 파일입니다. 안드로이드는 192×192를 홈 화면에, 512×512를 웹 앱을 여는 동안 보이는 화면에, 마스커블 512×512를 여러 런처 모양에 씁니다.

마스커블 아이콘

manifest에서 purpose가 maskable인 아이콘입니다. 안드로이드는 기기에 따라 원, 물방울, 둥근 사각형으로 잘라 쓰므로, 중요한 부분을 가운데의 안전 영역(지름이 아이콘 너비의 80%인 원) 안에 두고 배경은 끝까지 채웁니다.

파일 여섯 개면 대부분의 환경을 덮습니다

예전에는 크기별로 파일을 수십 개 만들었지만, 지금은 아래 구성으로 충분합니다.

파일크기와 쓰이는 곳
favicon.ico32×32, 브라우저 탭, 북마크
apple-touch-icon.png180×180, 아이폰·아이패드 홈 화면
icon-192.png192×192, 안드로이드 홈 화면
icon-512.png512×512, 웹 앱을 여는 동안 보이는 화면
icon-mask.png512×512, 안드로이드 마스커블 아이콘
manifest.webmanifest위 아이콘 목록

apple-touch-icon은 180 중 가운데 140 정도에 그림을 두고 둘레에 배경을 채우면 보기 좋고, 마스커블 아이콘은 512 중 가운데 409 안에 그림을 둡니다. 이 도구는 같은 디자인을 파일마다 이 비율에 맞춰 다시 그립니다.

구글 검색 결과에 파비콘이 나오려면

구글은 홈페이지에 있는 rel="icon" 또는 rel="apple-touch-icon" 링크로 파비콘을 찾습니다. 정사각형이어야 하고, 48×48보다 큰 이미지를 권장합니다. 지원하는 형식은 ICO, PNG, GIF, JPEG, BMP 등이며 SVG는 목록에 없습니다.

Googlebot이 홈페이지와 아이콘 파일을 모두 크롤링할 수 있어야 하고, 바꾼 아이콘이 검색 결과에 반영되기까지 며칠에서 몇 주가 걸릴 수 있습니다.

작은 탭에서도 알아보게 만드는 법

브라우저 탭의 파비콘은 아주 작게 보입니다. 로고를 그대로 줄이면 가는 선과 작은 글자가 뭉개지므로, 로고의 첫 글자나 상징 하나만 굵게 크게 쓰는 편이 잘 보입니다.

배경을 없애면 밝은 탭과 어두운 탭 중 한쪽에서 잘 안 보일 수 있습니다. 미리보기의 두 탭을 모두 확인하세요.

이 도구가 SVG 파비콘을 만들지 않는 이유

SVG 파비콘은 어떤 크기에서도 선명하고 다크 모드에 맞춰 색을 바꿀 수도 있지만, 글자와 이모지를 SVG에 넣으면 보는 사람의 기기에 있는 글꼴로 그려져 기기마다 모양이 달라집니다. 구글 검색도 SVG를 지원 형식에 넣지 않습니다.

그래서 이 도구는 지금 화면에 보이는 모양 그대로 고정되는 ICO와 PNG만 만듭니다.

자주 묻는 질문

파비콘을 바꿨는데 탭에는 예전 아이콘이 보여요.

브라우저가 예전 아이콘을 저장해 두고 계속 쓰는 경우가 많습니다. 새 창이나 시크릿 창에서 열어 확인하세요. 구글 검색 결과는 다시 크롤링될 때까지 며칠에서 몇 주가 걸릴 수 있습니다.

이모지로 만든 파비콘을 써도 되나요?

이모지 그림은 기기에 들어 있는 글꼴(Apple, Microsoft, Google 등)로 그려지고, 글꼴마다 사용 조건이 다릅니다. 오래 쓸 사이트 아이콘이라면 사용 조건이 공개된 Twemoji(CC BY 4.0)나 Noto Emoji(Apache 2.0) 이미지를 받아 이미지로 넣는 방법이 안전합니다.

favicon.ico에 16×16은 왜 없나요?

브라우저가 필요한 크기로 줄여 쓰므로 32×32 한 장이면 충분하다는 것이 요즘 권장 구성입니다. 다만 아주 가는 선이 있는 로고는 작게 줄였을 때 흐릿할 수 있으니 미리보기의 브라우저 탭을 확인하세요.

올린 이미지가 서버에 저장되나요?

아니요. 이미지와 글자는 브라우저 안에서만 그리고, 서버로 보내거나 저장하지 않습니다. 새로고침하면 처음 상태로 돌아갑니다.

참고 자료

다른 도구