favicons.zip에 들어 있는 것
이미지 한 장을 올리면, 요즘 웹사이트에 필요한 파일을 모두 브라우저 안에서 만들어 줍니다.
| 파일 | 크기 | 쓰이는 곳 |
|---|---|---|
favicon.ico |
16·32·48 px를 한 파일에 | 브라우저 탭, 북마크, Windows, /favicon.ico를 찾는 모든 도구 |
favicon-16x16.png |
16×16 | 일반 화면의 탭 |
favicon-32x32.png |
32×32 | 고해상도 화면의 탭, 바로가기 |
favicon-48x48.png |
48×48 | Google 검색 결과, 바탕화면 바로가기 |
apple-touch-icon.png |
180×180 | iPhone·iPad의 "홈 화면에 추가" |
android-chrome-192x192.png |
192×192 | Android 홈 화면 |
android-chrome-512x512.png |
512×512 | 앱처럼 설치된 사이트(PWA)와 시작 화면 |
site.webmanifest |
— | Android/Chrome에 큰 아이콘 두 개의 위치를 알려 줌 |
README-favicon.html |
— | 붙여 넣을 HTML 태그 |
어떤 원본 이미지가 좋을까
- 정사각형, 단순하고 굵게. 16 px에서는 픽셀이 모두 256개뿐입니다. 슬로건까지 들어간 로고는 얼룩처럼 보이지만, 글자 하나나 심볼은 알아볼 수 있습니다. 파비콘 전용으로 단순화한 마크를 쓰는 브랜드도 많습니다.
- 최소 512×512. 가장 큰 아이콘이 512 px라서, 그보다 작은 원본은 확대되어 흐릿해집니다. SVG 로고가 가장 좋습니다. 축소하기 전에 고해상도로 렌더링되기 때문입니다.
- 투명 PNG 또는 SVG.
.ico와 작은 PNG에는 투명도가 유지되므로 밝은 테마와 어두운 테마 모두에서 깔끔하게 보입니다. - 정사각형이 아니라면? 이미지를 자르지 않고 정사각형 안에 맞춰 넣으며, 양옆은 투명한 여백이 됩니다. 정사각형을 꽉 채우고 싶다면 먼저 자르기를 하거나 원형 자르기로 둥근 버전을 만드세요.
Apple touch 아이콘 배경
iOS는 홈 화면 아이콘의 투명도를 지원하지 않아 투명한 부분이 검게 변합니다. 그래서 180×180 apple-touch-icon.png에는 항상 단색 배경이 들어갑니다. 기본값은 흰색이며, 업로드 영역 옆의 색상 칸에서 브랜드 컬러로 바꿀 수 있습니다(컬러 피커로 로고에서 색을 뽑을 수 있습니다). 나머지 크기는 투명한 상태로 남습니다.
파일을 어디에 둘까
- ZIP을 풀고 모든 파일을 사이트의 루트에 업로드하세요.
https://yoursite.com/favicon.ico로 아이콘이 열리면 됩니다. README-favicon.html의 태그를 모든 페이지의<head>(또는 테마의 헤더 템플릿)에 붙여 넣으세요.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
- 사이트가 하위 폴더에 있다면 경로를 맞게 고치세요.
WordPress에서는 외모 → 사용자 정의하기 → 사이트 아이덴티티 → 사이트 아이콘에서 512×512 이미지 한 장으로 설정할 수 있습니다. android-chrome-512x512.png를 쓰세요. 티스토리, Shopify, Wix, Squarespace 등에도 비슷한 "파비콘" 항목이 있습니다.
함께 들어 있는 site.webmanifest에는 아이콘 목록만 있습니다. 방문자가 사이트를 앱처럼 설치할 수 있게 하려면 name, short_name, theme_color, background_color, "display": "standalone"을 추가하세요.
"파비콘을 바꿨는데 예전 것이 보여요"
파비콘은 사이트의 거의 모든 것보다 끈질기게 캐시됩니다.
https://yoursite.com/favicon.ico를 직접 열고 강력 새로고침을 하세요(Ctrl + F5, Mac은 Cmd + Shift + R).- 링크에 버전을 붙이세요. 예를 들어
href="/favicon.ico?v=2"로 하면 브라우저가 새 파일로 인식합니다. - CDN이나 캐시 플러그인을 쓴다면 그 캐시도 비우세요.
- 북마크와 홈 화면 바로가기는 새로 만들기 전까지 옛 아이콘을 유지합니다.
- Google 검색 결과의 아이콘은 홈페이지를 다시 크롤링한 뒤에야 바뀌며, 며칠에서 몇 주가 걸릴 수 있습니다. Google은 한 변이 48 px의 배수인 정사각형 아이콘을 요구하는데, 48×48 PNG와
.ico가 이를 충족합니다.
관련 도구
- 사진을 아이콘으로 만들기 전에 배경을 지우려면 배경 제거.
- 로고가 WebP뿐이라면, 편집 프로그램에서 열리지 않을 때 PNG로 변환하세요.
- 쇼핑몰이나 프로필용으로 512×512 이미지가 필요하다면 512×512로 크기 조정.