로고는 이미 있습니다. 필요한 건 그 로고를 브라우저가 기대하는 작은 아이콘 파일 더미로 바꾸는 것입니다 — favicon.ico, 특정 크기의 PNG 몇 개, 웹 매니페스트, 그리고 그 모두를 연결하는 HTML. 그 변환은 기계적이고, 아무것도 설치하지 않고 약 1분이면 할 수 있습니다.
함정은 모든 로고가 우아하게 줄어드는 건 아니라는 점입니다. 그래서 빠른 경로와, 16픽셀에서 죽처럼 되는 로고를 고치는 법을 둘 다 다룹니다.
짧은 버전
- 로고를 정사각형 이미지로 준비하세요 — 이상적으로는 512×512 이상, 투명하거나 단색 배경에.
- 파비콘 생성기에 넣으세요.
- 생성된 세트를 내려받아 파일을 사이트 루트에 두세요.
- 제공된 HTML 스니펫을
<head>에 붙여넣으세요.
그게 전체 작업입니다. 생성기는 favicon.ico, 16, 32, 48, 180, 192, 512의 PNG, webmanifest, 그리고 정확한 <link> 태그를 출력합니다 — 그래서 이미지 여섯 개를 손수 자르거나 매니페스트 문법을 짐작하지 않아도 됩니다.
먼저 로고를 준비하세요 — 여기서 품질이 결판납니다
파비콘은 브라우저 탭에서 16×16으로 삽니다. 그 크기에서 살아남지 못하는 디테일은 무엇이든 낭비입니다. 여기에 2분을 쓰면 결과가 어디서나 선명해 보입니다.
정사각형으로 만드세요. 파비콘은 정사각형입니다. 넓은 가로 로고는 레터박스가 되거나 찌그러집니다. 가장 알아보기 쉬운 요소 — 보통 마크나 이니셜 하나 — 로 잘라 정사각형 프레임 가운데에 두세요.
워드마크를 버리세요. 회사 이름 전체는 탭 크기에서 읽히지 않습니다. "Acme Corporation"은 회색 얼룩이 됩니다. 심볼이나 글자 하나를 유지하고, 이름은 탭 제목이 담당하게 하세요.
두 테마 모두에서 대비를 확인하세요. 브라우저 탭은 밝은 것과 어두운 것이 있습니다. 짙은 남색 아이콘은 어두운 탭에서 사라지고, 옅은 아이콘은 밝은 탭에서 사라집니다. 마크가 단색이라면 그 색이 양쪽에서 읽히는지 확인하세요. 은은한 외곽선이나 작은 단색 배경 조각이 도움 될 수 있습니다.
숨 쉴 공간을 두세요. 정사각형 안에 약간의 여백을 더해 아이콘이 가장자리에 끼지 않게 하세요. 모든 슬롯에서 더 균형 있어 보입니다.
크게 시작하세요. 512×512(또는 그 이상) 소스가 생성기에 축소할 깔끔한 디테일을 줍니다. 작은 로고를 먼저 확대하면 흐림만 구워 넣을 뿐입니다.
투명 배경이냐 단색 배경이냐?
둘 다 됩니다 — 원하는 느낌에 달렸습니다.
- 투명 은 탭이나 홈 화면 배경이 비쳐 보이게 합니다. 깔끔하고 현대적이며, 밝은/어두운 주변에 적응합니다. 마크가 뚜렷한 모양일 때 가장 좋습니다.
- 단색 배경 조각(마크 뒤의 색깔 있는 둥근 사각형)은 뒤에 무엇이 있든 아이콘이 읽히도록 보장합니다. 대부분의 앱 아이콘이 하는 것이고, 로고가 가늘거나 대비가 낮으면 더 안전한 선택입니다.
애매하면 브랜드 색의 단색 조각이 견고한 옵션입니다 — 맞는 배경에 절대 사라지지 않습니다.
내려받은 뒤: 파일이 가는 곳
생성기가 파일 세트와 스니펫을 건넵니다. 배치 규칙 두 가지면 됩니다.
favicon.ico는 사이트 루트(/favicon.ico)에 둡니다. 브라우저와 Windows가<link>태그 없이도 이름으로 거기서 찾습니다.- 나머지는 HTML 스니펫의 경로만 맞으면 어디에 두어도 됩니다. 대부분은 모두 루트에 두고 스니펫을 그대로 붙여넣습니다.
그다음은 <head> 스니펫뿐입니다 — 아이콘 링크, apple-touch-icon, 매니페스트 참조. 붙여넣고, 배포하고, 강력 새로고침하면 탭에서 로고가 보일 것입니다.
왜 브라우저에서 하나?
여러분 로고가 절대 기기를 떠나지 않기 때문입니다. 전 과정 — 이미지 읽기, 모든 치수로 크기 조정, .ico 패킹, 매니페스트 작성 — 이 Canvas로 여러분 브라우저에서 로컬로 일어납니다. 아무것도 서버로 업로드되지 않고, 가입도 워터마크도 없으며, 첫 방문 이후 도구가 오프라인에서 작동합니다. 아직 공개하지 않았을 브랜드 자산이라면, 제3자 서버에서 떨어뜨려 두는 게 합리적인 기본값입니다.
로고가 정사각형이고, 대비가 높고, 작게도 읽히면, 전체 세트를 생성하는 건 쉬운 부분입니다.