파비콘 만드는 방법
어디서나 표시되는 파비콘에 필요한 크기, 형식, 코드.
파비콘은 브라우저 탭, 북마크, Google 모바일 검색 결과에서 사이트 옆에 보이는 작은 아이콘이에요. 파비콘이 없으면 사이트가 덜 만들어진 것처럼 보이고, 흐릿한 파비콘은 더 나빠 보여요. 좋은 파비콘은 몇 분이면 만들 수 있어요.
알맞은 디자인으로 시작하세요
파비콘은 16 × 16픽셀만큼 작게 표시되기 때문에, 글자가 들어간 로고 전체는 알아볼 수 없어요. 로고의 심볼, 이니셜 한 글자, 브랜드 색상의 굵은 도형처럼 단순한 표시를 쓰세요. 화면에서 4분의 1 크기로 줄여 보세요. 그래도 무엇인지 알아볼 수 있다면 괜찮아요.
최소 512 × 512픽셀의 정사각형 이미지로 시작하세요. 투명 배경의 PNG가 가장 좋아요. 로고가 정사각형이 아니라면 비율을 1:1로 고정해서 정사각형으로 자르세요.
필요한 파일
| 파일 | 크기 | 사용처 |
|---|---|---|
| favicon.ico | 16, 32, 48픽셀 버전 포함 | 브라우저, 오래된 시스템, /favicon.ico 기본 요청 |
| PNG 아이콘 | 32 × 32와 192 × 192 | 최신 브라우저, Android 홈 화면 |
| apple-touch-icon.png | 180 × 180 | iPhone과 iPad 홈 화면 북마크 |
Google 검색 결과에도 파비콘이 쓰여요. 최소 48 × 48픽셀의 정사각형이어야 하고, 사이트에서 크롤링할 수 있어야 해요.
ICO 파일 만들기
정사각형 PNG를 PNG to ICO 변환 도구에 넣으세요. 브라우저가 요청하는 작은 크기들이 담긴 진짜 .ico 파일이 만들어져요. PNG 버전은 같은 정사각형 이미지를 180, 192, 32픽셀로 크기 조정하세요.
사이트에 추가하기
favicon.ico를 사이트 루트에 업로드해서 yoursite.com/favicon.ico로 접속할 수 있게 하고, 페이지의 head 안에 다음 줄을 추가하세요.
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/ko/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/ko/apple-touch-icon.png">
WordPress에서는 외모, 사용자 정의하기, 사이트 아이덴티티로 들어가 정사각형 이미지를 사이트 아이콘으로 업로드하세요. 필요한 크기는 WordPress가 만들어 줘요. Shopify, Wix, Squarespace는 각각 사이트 설정이나 테마 설정에 파비콘 항목이 있어요.
새 파비콘이 보이지 않을 때
브라우저는 파비콘을 끈질기게 캐시해요. 사이트를 시크릿 창에서 열거나, yoursite.com/favicon.ico에 직접 접속해서 새로고침하세요. Google은 홈페이지를 다시 크롤링한 뒤 검색 결과의 아이콘을 업데이트하는 데 며칠에서 몇 주가 걸릴 수 있어요.
흔한 실수
- 작은 글자가 들어간 로고 전체를 써서 16픽셀에서 얼룩처럼 보이는 경우.
- 투명 배경에 흰색 아이콘을 써서 밝은 브라우저 탭에서 사라지는 경우.
- 16픽셀짜리 작은 파일만 제공해서 고해상도 화면에서 흐릿하게 보이는 경우.
- /favicon.ico 파일을 빠뜨린 경우. 일부 브라우저와 크롤러는 페이지에 무엇이 적혀 있든 이 파일을 요청해요.