파비콘 만들기, ICO·PNG·manifest 한 번에
내 사이트 주소창 옆에 뜨는 작은 아이콘(파비콘)을 로고 하나로 만들려면 어떻게 하나요?
한 줄 답
로고 이미지 한 장을 넣으면 favicon.ico와 크기별 PNG, site.webmanifest, head에 붙일 코드를 zip 하나로 만들어 줘요. 이미지는 이 브라우저 안에서만 다루고 어디에도 올리지 않아요.
여기에 로고 이미지 한 장을 끌어다 놓아요
캡처한 화면은 Ctrl+V(맥은 ⌘+V)로 바로 붙여 넣어도 돼요.
사진은 이 브라우저 안에서만 다루고 어디로도 올리지 않아요. 탭을 닫으면 사라져요.
크기별 미리보기
넣은 글과 파일은 이 브라우저 안에서만 처리합니다. 이 사이트의 서버로 올라가지 않고, 어디에도 저장되지 않습니다.
주의
- 16px 파비콘은 아주 작아서 가는 글자나 복잡한 그림은 알아보기 어렵습니다. 로고 전체보다 첫 글자나 심볼만 넣은 이미지가 더 또렷합니다.
- 파비콘을 바꿔 올려도 브라우저가 예전 아이콘을 한동안 기억해서 바로 바뀌지 않을 수 있습니다. 새 창이나 시크릿 창에서 확인합니다.
어떻게 만드나요
로고 이미지를 끌어다 놓거나 「사진 선택」으로 고릅니다. 512px 이상의 정사각 이미지가 가장 선명하게 나옵니다. 넣자마자 크기별 미리보기가 나오고, 「파비콘 세트 zip 내려받기」를 누르면 favicon.zip이 저장됩니다.
- 정사각이 아닐 때: 로고 전체를 담고 남는 곳을 여백으로 둘지, 가운데를 잘라 꽉 채울지 고릅니다.
- 바탕: 투명으로 두면 브라우저 탭의 색이 그대로 비칩니다. 흰색을 고르면 모든 아이콘에 흰 바탕을 깝니다.
- 사이트 이름: 안드로이드에서 홈 화면에 추가할 때 아이콘 아래 나오는 이름입니다. 비워 둬도 됩니다.
아이폰 홈 화면 아이콘(180px)은 투명한 부분을 검게 채우는 기기가 있어서, 바탕을 투명으로 골라도 이 파일만은 흰 바탕으로 만듭니다.
zip에 들어 있는 것
| 파일 | 쓰이는 곳 |
|---|---|
| favicon.ico | 브라우저 탭(16·32·48px을 한 파일에) |
| favicon-16x16.png, favicon-32x32.png | 브라우저 탭 |
| apple-touch-icon.png | 아이폰·아이패드 홈 화면(180px) |
| android-chrome-192x192.png, android-chrome-512x512.png | 안드로이드 홈 화면과 설치 화면 |
| site.webmanifest | 안드로이드가 아이콘과 이름을 읽는 파일 |
| favicon-head.html | head에 붙일 코드 |
사이트에 넣는 방법
zip을 풀어 나온 파일을 사이트의 맨 위 폴더, 곧 도메인 바로 아래에 올립니다. 그다음 화면의 「head에 붙일 코드」를 복사해 모든 페이지의 <head> 안에 붙입니다. 코드는 파일이 맨 위 폴더에 있다고 보고 적혀 있으니, 다른 폴더에 올렸다면 코드의 주소도 그 폴더로 고칩니다.
깃허브 페이지처럼 파일을 직접 올리는 사이트라면 저장소의 맨 위에 파일을 넣으면 됩니다.
자주 묻는 것
- 파비콘은 어떤 크기로 만들어야 하나요?
- 브라우저 탭에는 16px과 32px이, 아이폰 홈 화면에는 180px이, 안드로이드 홈 화면과 설치 화면에는 192px과 512px이 쓰입니다. 여기서 내려받는 세트에 이 크기가 모두 들어 있습니다.
- ICO 파일 하나만 있으면 안 되나요?
- 브라우저 탭에는 favicon.ico 하나로도 뜹니다. 휴대폰 홈 화면에 추가했을 때 선명한 아이콘이 나오게 하려면 큰 PNG와 manifest가 함께 있어야 합니다.
- 정사각이 아닌 로고는 어떻게 되나요?
- 기본은 로고 전체를 담고 남는 곳을 여백으로 둡니다. 「가운데를 잘라 꽉 채우기」를 고르면 짧은 쪽에 맞춰 가운데를 잘라 냅니다.
출처
본문의 숫자와 조건은 아래 출처에서 가져왔습니다. 직접 잰 값은 따로 표시합니다.
- 1Add a web app manifest
크로미움은 매니페스트에 최소 192×192와 512×512 아이콘을 요구한다는 설명
- 2Configuring Web Applications
apple-touch-icon 링크의 sizes="180x180" 예시와, 링크가 없으면 사이트 맨 위 폴더에서 apple-touch-icon 파일을 찾는다는 설명