파비콘 만들기
로고 사진 한 장, 또는 글자 하나로 사이트 아이콘 세트를 만들어요.
내 사이트 — 브라우저 탭 미리보기
로고 사진 고르기 또는 끌어 놓기
정사각형 PNG(투명 배경)가 가장 좋아요 · 512px 이상 권장
head에 붙일 HTML
설치 방법
- ZIP을 풀어 파일 6개를 사이트 맨 위 폴더(index.html이 있는 곳)에 올립니다.
- 위 HTML 코드를 모든 페이지의 <head> 안에 붙입니다.
- 브라우저는 파비콘을 오래 기억하니, 바로 안 바뀌면 강력 새로고침(Ctrl+Shift+R)을 해 보세요. 구글 검색 결과에는 며칠~몇 주 뒤에 반영됩니다.
로고 배경을 지우려면 배경 제거, 사진을 정사각형으로 자르려면 이미지 자르기를 먼저 쓰세요.
자주 묻는 질문
파비콘이 뭔가요?
브라우저 탭, 즐겨찾기, 휴대폰 홈 화면에 보이는 작은 사이트 아이콘입니다. 구글 검색 결과에도 사이트 이름 옆에 표시돼서, 없으면 회색 지구본 모양이 나옵니다.
어떤 파일이 만들어지나요?
favicon.ico(16·32·48 크기를 한 파일에), favicon-16x16.png, favicon-32x32.png, 아이폰 홈 화면용 apple-touch-icon.png(180), 안드로이드용 192·512 PNG, 그리고 site.webmanifest가 ZIP 한 개로 내려받아집니다. 사이트 맨 위 폴더에 올리고 아래 HTML 코드를 head에 붙이면 끝입니다.
워드프레스·티스토리·윅스에서도 쓸 수 있나요?
네. 워드프레스는 "외모 → 사용자 정의 → 사이트 아이콘"에 512 PNG를, 티스토리는 "블로그 관리 → 블로그 → 파비콘"에 favicon.ico를 올리면 됩니다. 대부분의 사이트 빌더는 512×512 PNG 한 장이면 충분합니다.
사진이 서버로 올라가나요?
아니요. 로고 사진은 이 기기(브라우저) 안에서만 아이콘으로 바뀝니다.