티스토리·워드프레스·노션에 파비콘 넣는 법
파비콘 파일을 만드는 것까지는 금방인데, 정작 어디에 올려야 하는지가 플랫폼마다 전부 다릅니다. 관리자 화면에 업로드 버튼이 있는 곳도 있고, 코드를 직접 넣어야 하는 곳도 있고, 아예 바꿀 수 없는 곳도 있습니다. 플랫폼별로 필요한 파일과 올리는 자리를 정리했습니다.
최종 업데이트: 2026년 7월 · 메뉴 이름은 플랫폼 개편에 따라 조금씩 바뀔 수 있습니다
1. 시작 전: 손에 들고 있어야 할 파일
플랫폼이 요구하는 파일은 대부분 이 셋 중 하나입니다.
- favicon.ico: 여러 크기가 한 파일에 담긴 표준 아이콘. "파비콘" 항목은 대개 이 파일을 받습니다.
- 정사각 PNG: 32px, 180px, 512px처럼 크기를 지정해서 받는 곳이 많습니다.
- HTML 코드: 직접 만든 사이트라면
<head>에 넣을<link>태그가 필요합니다.
아직 파일이 없다면: 파비콘 생성기에서 이미지·글자·이모지로 만들면 위 파일 전부(ICO + 크기별 PNG + HTML 코드)가 ZIP 하나로 나옵니다. 아래 설명은 그 ZIP 안의 파일명을 기준으로 합니다.
2. 티스토리
- 블로그 관리 홈으로 들어가 블로그 설정 화면을 엽니다.
- 아이콘과 파비콘 업로드 항목이 나란히 있습니다.
- 파비콘:
favicon.ico를 올립니다. 브라우저 탭에 뜨는 아이콘입니다. - 아이콘: PNG를 올립니다(
apple-touch-icon.png권장). 모바일 홈 화면 등에서 쓰입니다.
- 파비콘:
- 저장하면 끝입니다. 탭에 바로 안 보이면 강력 새로고침(Ctrl+F5)을 해 보세요.
스킨 HTML을 직접 편집할 줄 안다면 꾸미기의 스킨 편집에서 <head>에
<link> 태그를 넣는 방법도 있지만, 파일을 외부에 호스팅해야 해서
관리 항목 업로드가 훨씬 간단합니다.
3. 워드프레스
- 관리자에서 외모 → 사용자 정의하기 → 사이트 아이덴티티로 들어갑니다. (버전에 따라 설정 → 일반에 사이트 아이콘 항목이 있기도 합니다.)
- 사이트 아이콘에
android-chrome-512x512.png를 올립니다. 워드프레스는 512px 이상 정사각 이미지를 요구하고, 크기별 파일은 알아서 만들어 줍니다. - 게시(저장)하면 적용됩니다. 별도 플러그인은 필요 없습니다.
주의: 캐시 플러그인(WP Super Cache 등)이나 CDN을 쓰고 있다면 그쪽 캐시를 비워야 새 아이콘이 보입니다.
4. 노션으로 만든 사이트
경우가 갈립니다.
- 노션 기본 공유 링크(notion.site 무료 공유): 파비콘을 바꿀 수 없습니다. 노션 로고가 뜹니다.
- 노션 사이트 기능(유료 플랜의 사이트 설정): 사이트 사용자화 설정에 파비콘 업로드
항목이 있습니다.
favicon-48x48.png나favicon-32x32.png를 올리면 됩니다. - 우피(oopy)·수퍼(super) 같은 배포 서비스: 각 서비스의 사이트 설정에 파비콘 항목이
있습니다. PNG를 받는 곳이 많으니
favicon-32x32.png를 준비하세요.
5. 카페24·아임웹 등 빌더
쇼핑몰·홈페이지 빌더는 대부분 관리자 화면에 파비콘 업로드 항목을 두고 있습니다. 메뉴 위치가 서비스·개편마다 달라서, 관리자 화면의 검색 기능에 "파비콘"을 입력하는 것이 가장 빠릅니다. 보통 디자인 설정이나 기본 정보 설정 아래에 있습니다.
favicon.ico를 받는 곳: 그대로 올리면 됩니다.- PNG만 받는 곳:
favicon-32x32.png를 올리세요. - 권장 크기를 명시한 곳: 그 크기에 맞는 파일을 고르면 됩니다(생성기 ZIP에 16~512px가 다 들어 있습니다).
6. 직접 만든 사이트 (HTML)
- ZIP을 풀어 나온 파일 전부를 사이트 최상위(루트) 폴더에 올립니다.
내도메인.com/favicon.ico로 열리는 위치입니다. - 모든 페이지의
<head>에 아래 코드를 넣습니다.
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<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">사실 루트에 favicon.ico만 올려도 브라우저가 알아서 찾아가지만,
아이폰 홈 화면과 안드로이드까지 챙기려면 위 코드를 함께 넣는 것이 안전합니다.
크기별 용도는 파비콘 사이즈·포맷 총정리를 참고하세요.
7. 공통: 적용됐는지 확인하는 법
- 시크릿 창에서 사이트를 열어 봅니다. 캐시 없이 새로 받으므로 가장 정확합니다.
- 주소창에
내도메인.com/favicon.ico를 직접 입력해 파일이 열리는지 확인합니다. 404가 뜨면 업로드 위치가 잘못된 것입니다. - 구글 검색결과의 파비콘은 구글이 다시 수집해야 바뀌므로 며칠 걸릴 수 있습니다. 탭에는 보이는데 검색결과만 예전 것이라면 기다리면 됩니다.
했는데도 안 보인다면 원인별 점검 순서를 정리한 파비콘이 안 보일 때 체크리스트를 따라가 보세요.
올릴 파일이 아직 없다면, 이미지·글자·이모지로 1분 안에 만들 수 있습니다. ICO와 크기별 PNG가 ZIP 하나로 나옵니다.
파비콘 생성기 열기8. 자주 묻는 질문
티스토리 파비콘은 어떤 크기로 올려야 하나요?
파비콘 항목에는 favicon.ico(16·32·48px 멀티 크기)를 올리는 것이 가장 무난합니다.
아이콘 항목에는 180px 이상 PNG를 올리면 모바일에서도 선명합니다.
워드프레스에 ico 파일을 올렸더니 거부돼요.
사이트 아이콘 기능은 PNG·JPG 같은 일반 이미지를 기대합니다. android-chrome-512x512.png처럼
512px 이상 PNG를 올리세요. ico는 워드프레스가 직접 만들어 처리합니다.
플랫폼에 업로드 항목이 아예 없어요.
테마·스킨의 HTML 편집이 열려 있다면 <head>에 <link> 태그를 직접
넣을 수 있습니다. 그것도 막혀 있다면 그 플랫폼에서는 파비콘 변경이 불가능한 경우입니다(노션 무료 공유 링크 등).