파비콘 만들기: ICO 생성부터 사이즈·HTML 코드까지

파비콘을 만들려면 정사각형 원본 이미지를 준비해 16·32·48px이 들어간 favicon.ico로 변환하면 됩니다. 이어서 180px 애플 터치 아이콘과 192·512px PNG를 함께 만들고, HTML의 <head>에 link 태그 몇 줄을 넣으면 끝납니다. 프로그램을 설치하지 않아도 브라우저에서 무료로 만들 수 있습니다.

이 글은 ICO 파일을 만드는 방법에서 그치지 않고, 실제로 필요한 사이즈 세트와 그대로 붙여 넣으면 되는 적용 코드, WordPress 설정 방법까지 순서대로 설명합니다.

파비콘에 필요한 사이즈 세트

예전에는 favicon.ico 하나면 충분했습니다. 지금은 브라우저 탭, 북마크, 스마트폰 홈 화면처럼 아이콘이 쓰이는 곳이 많아서 몇 가지 크기를 같이 준비하는 편이 좋습니다. 대부분의 사이트는 아래 세트면 충분합니다.

파일	크기	쓰이는 곳
favicon.ico	16×16, 32×32, 48×48 (한 파일에 포함)	브라우저 탭, 북마크, 구형 브라우저
icon.svg (선택)	벡터라 크기 무관	SVG를 지원하는 최신 브라우저, 고해상도 화면
apple-touch-icon.png	180×180	iPhone·iPad 홈 화면에 추가할 때
icon-192.png	192×192	Android 홈 화면, 웹 앱 매니페스트
icon-512.png	512×512	PWA 실행 화면, 앱 스토어식 큰 아이콘

ICO 파일은 여러 크기의 이미지를 한 파일 안에 담을 수 있는 형식입니다. 브라우저는 상황에 맞는 크기를 골라 쓰기 때문에, 16px만 넣은 ICO보다 16·32·48px을 모두 담은 ICO가 고해상도 화면에서 더 선명하게 보입니다.

원본 이미지 준비하기

변환 결과는 원본에 따라 달라집니다. 아래 기준으로 준비하면 작은 크기에서도 형태가 뭉개지지 않습니다.

정사각형으로 만듭니다. 직사각형이면 늘어나거나 여백이 생깁니다.
512×512px 이상 PNG를 권장합니다. 큰 이미지를 줄이는 것은 괜찮지만 작은 이미지를 키우면 흐려집니다.
배경을 투명하게 하려면 PNG로 저장합니다. JPG는 투명도를 지원하지 않습니다.
16px에서는 글자가 거의 읽히지 않습니다. 긴 로고 대신 첫 글자나 심볼 하나만 쓰는 편이 알아보기 쉽습니다.
가는 선보다 굵은 면 위주로 디자인하고, 가장자리 여백은 조금만 둡니다.

무료로 ICO 파일 만드는 방법

설치 없이 바로 하려면 ssdown의 파비콘 생성기를 쓰면 됩니다. 이미지를 올리면 브라우저에서 ICO 파일로 변환합니다.

파비콘 생성기 페이지를 엽니다.
준비한 정사각형 PNG 또는 JPG 이미지를 업로드합니다.
미리보기로 작은 크기에서 모양이 잘 보이는지 확인합니다.
생성된 ICO 파일을 내려받아 이름을 favicon.ico로 맞춥니다.
180·192·512px PNG는 이미지 편집 프로그램에서 원본을 해당 크기로 줄여 저장합니다.

Photoshop이나 GIMP 같은 편집 프로그램으로도 ICO를 만들 수 있지만, 기본 상태에서 ICO 저장을 지원하지 않거나 여러 크기를 한 파일에 담는 설정이 번거로운 경우가 있습니다. 파비콘 용도라면 온라인 생성기가 더 간단합니다.

HTML에 파비콘 적용하는 코드

만든 파일을 사이트 최상위 폴더(루트)에 올린 뒤, 모든 페이지의 <head> 안에 아래 코드를 넣습니다. 파일 이름과 경로가 다르면 href 값만 바꾸면 됩니다.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

SVG 아이콘을 만들지 않았다면 두 번째 줄은 지웁니다. 192·512px 아이콘은 HTML이 아니라 매니페스트 파일에서 지정합니다. 루트에 manifest.webmanifest 파일을 만들고 아래처럼 적습니다.

{ "name": "사이트 이름", "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" } ] }

홈 화면 추가나 PWA 기능이 필요 없는 일반 블로그라면 매니페스트 줄은 생략하고 ICO와 애플 터치 아이콘만 적용해도 됩니다. 참고로 link 태그가 없어도 대부분의 브라우저는 루트의 /favicon.ico를 자동으로 찾아 읽습니다. 그래도 명시적으로 적어 두는 편이 확실합니다.

WordPress에서 파비콘 설정하기

WordPress는 코드를 직접 넣지 않아도 되는 사이트 아이콘 기능을 기본으로 제공합니다. 이미지 하나를 올리면 필요한 크기를 자동으로 만들고 link 태그도 알아서 출력합니다.

관리자 화면에서 외모 → 사용자 정의하기로 들어갑니다.
사이트 아이덴티티 메뉴를 엽니다.
사이트 아이콘 항목에서 이미지를 선택합니다. 512×512px 이상 정사각형 이미지를 권장합니다.
필요하면 자르기 영역을 조정하고 공개를 눌러 저장합니다.

블록 테마를 쓰면 사용자 정의하기 메뉴가 보이지 않을 수 있습니다. 이 경우 WordPress 버전에 따라 설정 → 일반 화면이나 사이트 편집기의 사이트 로고 블록 설정에서 사이트 아이콘을 지정할 수 있습니다. 메뉴 위치는 버전과 테마마다 달라질 수 있으니 WordPress 공식 사이트의 문서에서 최신 정보를 확인하세요.

이미 테마나 플러그인이 파비콘 코드를 따로 넣고 있다면 아이콘이 중복되거나 예전 아이콘이 계속 보일 수 있습니다. 한 곳에서만 설정하는 것이 좋습니다.

파비콘이 바뀌지 않을 때 확인할 것

파비콘은 브라우저가 강하게 캐시하는 파일이라, 올바르게 적용해도 바로 보이지 않는 경우가 많습니다.

캐시: 강력 새로고침(Windows는 Ctrl+F5, Mac은 Cmd+Shift+R)을 하거나 시크릿 창에서 열어 봅니다.
파일 경로: 브라우저 주소창에 사이트주소/favicon.ico를 직접 입력해 파일이 열리는지 확인합니다.
파일 이름 변경: 캐시가 계속 남으면 href 뒤에 ?v=2처럼 버전 값을 붙여 새 파일로 인식시킵니다.
CDN·캐시 플러그인: 서버나 CDN 캐시를 비워야 새 파일이 전달됩니다.
검색 결과 아이콘: 구글 검색 결과에 보이는 파비콘은 검색엔진이 다시 수집해야 바뀌므로 며칠 이상 걸릴 수 있습니다.

자주 묻는 질문

PNG 파일을 확장자만 .ico로 바꿔도 되나요?

일부 브라우저에서는 보이기도 하지만 실제 ICO 형식이 아니므로 권장하지 않습니다. 파비콘 생성기로 제대로 변환하면 여러 크기가 한 파일에 들어가 호환성도 좋습니다.

ICO 없이 PNG나 SVG만 써도 되나요?

최신 브라우저는 PNG와 SVG 파비콘을 지원합니다. 다만 link 태그 없이 /favicon.ico를 자동으로 찾는 도구나 오래된 환경이 있어 ICO 하나는 함께 두는 편이 안전합니다.

파비콘 파일 용량은 어느 정도가 적당한가요?

16·32·48px을 담은 ICO는 보통 수십 KB 이내면 충분합니다. 너무 큰 이미지를 그대로 넣으면 용량만 늘어나므로 필요한 크기만 담습니다.

다크 모드에서 아이콘이 잘 안 보여요.

투명 배경에 어두운 색 심볼만 있으면 다크 모드 탭에서 묻힐 수 있습니다. 아이콘에 밝은 테두리나 배경색을 넣거나, SVG 파비콘 안에서 색 구성을 조정하는 방법이 있습니다.

정리

파비콘 만들기는 정사각형 원본을 준비하고, 16·32·48px이 담긴 favicon.ico와 180·192·512px PNG를 만드는 것으로 시작합니다. 파일을 루트에 올린 뒤 <head>에 link 태그를 넣으면 브라우저 탭과 모바일 홈 화면 모두에 아이콘이 적용됩니다. WordPress는 사이트 아이콘 기능에 이미지 하나만 올리면 됩니다. 아이콘이 안 바뀌면 대부분 캐시 문제이니 강력 새로고침부터 해 보세요.