가이드 / Finipix / 공개하기

로고 이미지로 파비콘 세트 만들기 (ICO, PNG, 애플 터치 아이콘)

Qorlize 팀 작성 · 마지막 검토 2026년 11월 12일

Finipix 가이드 · 웹용 이미지 줄이기 · 크기 바꾸기. Finipix 열기

파비콘은 5분이면 끝날 일처럼 보입니다. 로고를 가져다 줄이면 그만일 것 같지만, 막상 해 보면 탭에는 회색 얼룩이 보이고, 아이폰 홈 화면에는 로고와 상관없는 그림이 뜨고, 고쳐 놓고 나서도 옛 아이콘이 자꾸 되살아납니다. 이런 문제는 대부분 세 가지에서 나옵니다. 로고가 아주 작은 크기를 염두에 두고 만들어지지 않았거나, 파일이나 태그가 하나 빠졌거나, 캐시가 이전 아이콘을 붙들고 있는 경우입니다.

이 글은 아이콘 파일 자체를 다룹니다. 채팅 앱에서 링크를 공유할 때 나오는 미리보기 이미지는 파비콘과 카카오톡 링크 미리보기(오픈그래프) 설정하기를 보십시오.

실제로 쓰이는 크기

인터넷에는 아이콘 크기를 스무 가지 넘게 늘어놓은 목록도 있지만, 대부분은 예전 윈도우 타일과 옛 브라우저 시절의 것입니다. 지금 사이트라면 파일 네 개로 아이콘이 보이는 자리를 거의 다 챙길 수 있습니다.

구글 검색 결과에도 사이트 아이콘이 함께 나옵니다. 구글 문서는 정사각형에 최소 8×8픽셀이어야 하고 48×48픽셀보다 큰 아이콘을 권한다고 안내하므로, ICO와 함께 192픽셀 PNG도 연결해 두면 더 선명한 쪽을 쓸 수 있습니다. 새 아이콘이 검색 결과에 반영되기까지 며칠에서 몇 주가 걸릴 수 있다는 점도 구글 문서에 적혀 있습니다.

정교한 로고가 16픽셀에서 뭉개지는 이유

16×16 아이콘은 화소가 모두 256개입니다. 회사 이름 글자, 가는 테두리, 작은 기호가 함께 들어간 로고라면 그 모든 획을 이 칸 안에 밀어 넣어야 합니다. 1픽셀보다 가는 선은 옅은 회색이 되고, 글자는 서로 붙어 번지고, 비슷한 두 색은 하나로 합쳐집니다. 32픽셀이면 조금 낫지만 여전히 빠듯합니다.

로고를 살리는 방법은 이렇습니다.

• 로고 전체가 아니라 기호만 씁니다. 회사명과 슬로건은 뺍니다. 글자로만 된 로고라면 첫 글자 한두 자를 로고 서체로 씁니다.
• 정사각형을 꽉 채웁니다. 기호 둘레의 빈 여백을 대부분 걷어 냅니다. 여백이 넓으면 탭에서는 점 하나로 보입니다.
• 가는 선은 굵게, 대비는 강하게 합니다. 흰 바탕 위의 연회색 테두리는 사라집니다. 그라데이션보다 뚜렷한 색 한두 가지가 잘 읽힙니다.
• 정사각형 이미지에서 시작합니다. 512픽셀 이상의 정사각형 버전을 따로 준비하십시오. 가로로 긴 로고를 가운데 기준으로 정사각형으로 자르는 도구에 넣으면 양 끝이 잘려 나갑니다.
• 실제 크기로 판단합니다. 16픽셀과 32픽셀 결과를 확대하지 말고 100%로 보십시오. 방문자가 보는 크기가 그것입니다.

투명 배경과 아이폰 홈 화면 아이콘

탭에서는 투명 배경이 잘 어울리지만 함정이 하나 있습니다. 탭 막대는 테마에 따라 밝기도 하고 어둡기도 합니다. 투명 배경 위의 검은 기호는 어두운 테마에서 사라지고, 흰 기호는 밝은 테마에서 사라집니다. 기호가 어두운 단색이라면 밝은 테두리를 두르거나, 모서리가 둥근 단색 사각형 위에 올려 양쪽 테마에서 다 보이게 하십시오.

홈 화면 아이콘은 사정이 다릅니다. iOS는 홈 화면에서 아이콘을 둥근 사각형 모양으로 그리고, 투명한 부분이 탭에서처럼 투명하게 남지 않아 예상과 다른 모습이 나올 수 있습니다. 안전한 방법은 직접 고른 단색 배경(보통 브랜드 색이나 흰색)을 깔고, 그 가운데에 여유를 두고 기호를 놓은 apple-touch-icon을 쓰는 것입니다. 모서리는 직접 둥글게 깎지 마십시오. 시스템이 자기 모양을 씌웁니다.

파일과 태그를 넣을 자리

파일은 사이트 맨 위 폴더, 즉 index.html과 같은 곳에 둡니다. 그러면 favicon.ico의 주소가 https://www.example.com/favicon.ico가 됩니다. 그다음 모든 페이지의 <head> 안에 링크 태그를 넣습니다.

<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

512픽셀 파일은 보통 링크 태그가 아니라 웹 앱 매니페스트에서 가리킵니다. 안드로이드에서 사이트를 앱처럼 설치할 수 있게 하려는 경우에만 매니페스트가 필요하고, 일반 페이지라면 위 태그로 충분합니다.

맨 앞의 빗금(/)을 조심하십시오. /favicon.ico는 "도메인 맨 위에서부터"라는 뜻입니다. 사이트가 하위 폴더에 있다면, 예를 들어 GitHub Pages 프로젝트 사이트처럼 username.github.io/project/에 있다면 맨 위는 username.github.io/이므로 아이콘을 찾지 못합니다. 이럴 때는 빗금을 빼고 href="favicon.ico"처럼 페이지 기준 상대 경로로 쓰십시오. 여러 단계 폴더로 된 사이트라면 하위 폴더 이름까지 넣은 전체 경로를 쓰는 편이 안전합니다.

확인하기, 그리고 옛 아이콘이 안 바뀔 때

파일을 올린 뒤에는 다음 순서로 확인합니다.

1. 브라우저 주소창에 https://내-주소/favicon.ico와 PNG 주소를 직접 넣어 엽니다. 열리지 않는다면 태그가 아니라 파일 위치가 문제입니다.
2. 페이지 소스(Ctrl+U)를 열어, 내 컴퓨터의 파일이 아니라 실제로 올라간 페이지의 head에 태그가 있는지 봅니다.
3. 시크릿 창으로 페이지를 열어 캐시 없이 아이콘을 확인합니다.
4. 아이폰 Safari에서 페이지를 열고 공유 버튼, 홈 화면에 추가 순으로 눌러 결과를 봅니다.

브라우저는 파비콘을 페이지와 따로 오래 저장해 두기 때문에, 그냥 새로 고침해서는 옛 아이콘이 계속 보이는 일이 많습니다. 아이콘을 바꿨는데 그대로라면 파일 이름이나 링크에 버전을 붙이십시오. icon-192-v2.png나 /favicon.ico?v=2처럼 쓰고 태그도 함께 고칩니다. 주소가 새로우면 브라우저가 새로 내려받습니다. 다만 구글은 파비콘 주소를 자주 바꾸지 말라고 하므로, 아이콘을 바꿀 때 한 번만 하십시오. 이미 만든 즐겨찾기나 홈 화면 아이콘은 다시 추가하기 전까지 옛 그림이 남아 있을 수 있습니다.

Finipix로 세트 만들기

Finipix의 파비콘 세트 탭에서는 이미지 한 장으로 위 세트를 한 번에 만듭니다. 처리는 브라우저 안에서 끝나고 아무것도 올라가지 않습니다.

1. Finipix를 열고 파비콘 탭으로 갑니다.
2. 정사각형 로고를 끌어다 놓습니다. 512픽셀 이상이면 좋습니다. 정사각형이 아닌 이미지는 가운데를 기준으로 정사각형으로 잘리므로, 기호가 가운데에 있지 않다면 정사각형 버전을 먼저 만들어 두십시오.
3. 애플 터치 아이콘에 깔 배경색을 고릅니다.
4. ZIP 파일을 내려받습니다. 안에는 favicon.ico(16, 32, 48px 포함), icon-192.png, icon-512.png, apple-touch-icon.png(180px)와, 복사해 붙여 넣을 HTML <link> 태그가 들어 있습니다.
5. 파일을 사이트 맨 위 폴더에 넣고, 태그를 각 페이지의 head에 붙여 넣습니다. 사이트가 하위 폴더에 있다면 경로를 맞춰 고치십시오.

다른 방법도 있습니다. 이미지 편집 프로그램이라면 어느 것이든 PNG 크기별로 내보낼 수 있고, 매니페스트 파일까지 만들어 주는 온라인 파비콘 생성기도 있습니다. 그중에는 이미지를 서버로 올리는 곳도 있으니, 아직 공개하지 않은 로고라면 미리 확인하십시오. head를 직접 고친다면 VS Code 같은 텍스트 편집기에 태그를 붙여 넣는 것이 가장 간단합니다.

다음에 할 일

아이콘을 넣었다면 링크를 공유할 때 보일 미리보기 이미지와 제목을 정할 차례입니다. 파비콘과 링크 미리보기 설정하기에 방법이 있습니다. 미리보기 사진은 Finipix의 공유 이미지 프리셋으로 1200×630에 맞춰 자를 수 있고, 나머지 옵션은 웹페이지 이미지 용량 줄이기에서 설명합니다.

내 이미지로 바로 해 보려면 Finipix를 여세요. 브라우저에서 돌아가고 이미지는 내 기기 밖으로 나가지 않습니다.