홈 화면에 추가하기 아이콘(Favicon) 완벽 설정 가이드

아이폰에서 '공유'를 누른 다음 '홈 화면에 추가'를 탭했을 때, 세련된 앱 아이콘을 기대했지만 알아볼 수 없을 정도로 작게 축소된 웹페이지 스크린샷이 나와 당황한 적 있으신가요? 저는 실제 서비스 중인 사이트에서 이런 현상을 아주 자주 봅니다. 데스크톱 탭에서는 아이콘이 잘 보일지 몰라도, 모바일의 홈 화면 추가 아이콘(add to home screen icon favicon) 설정은 불완전한 경우가 많습니다.

Toss나 GitHub를 보세요. 그들의 웹 앱을 휴대폰에 저장하면, App Store에서 다운로드한 네이티브 앱과 똑같이 완벽한 아이콘이 홈 화면에 자리 잡습니다. 그들은 이 과정을 브라우저의 기본 동작에 운으로 맡기지 않고, 운영 체제가 무엇을 표시해야 하는지 명확하게 정의합니다.

모바일 브라우저는 생각보다 게으릅니다. iOS Safari나 Android Chrome에 홈 화면 바로가기로 어떤 이미지를 사용할지 명확히 알려주지 않으면 브라우저는 당황합니다. Safari는 사이트를 그대로 캡처해버리고, Chrome은 32x32 크기의 작은 데스크톱 파비콘을 192x192의 거대한 정사각형으로 억지로 늘리려 합니다. 두 결과 모두 끔찍하며 브랜드의 신뢰도를 떨어뜨립니다.

완벽한 홈 화면 아이콘을 위한 3단계 설정

이를 해결하기 위해 오래된 HTML 태그를 잔뜩 작성할 필요는 없습니다. 2026년 현재, 우리는 Apple(iOS)과 Google(Android)이라는 두 주요 플랫폼만 만족시키면 됩니다. 정확한 방법은 다음과 같습니다.

1단계: Apple Touch Icon 생성 (iOS)

Apple은 홈 화면 아이콘에 대한 표준 웹 매니페스트(Web Manifest)를 고집스럽게 무시합니다. Safari에는 반드시 특정 link 태그를 제공해야 합니다. 이미지는 180x180 픽셀의 PNG여야 합니다.

(여기서 투명 배경을 사용하지 마세요. iOS는 투명한 영역을 검은색으로 채워버리기 때문에 로고가 흉측하게 보일 수 있습니다. 항상 단색 배경을 사용하세요).

<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>

이 태그를 <head> 안에 넣으세요. iOS의 독특한 특성에 대해 더 깊이 알고 싶다면 Apple Touch Icon 설정 가이드를 확인하세요.

2단계: 웹 매니페스트 구성 (Android)

Android 기기는 site.webmanifest 파일을 찾습니다. 이 JSON 파일은 사이트가 홈 화면에 저장될 때 어떤 아이콘을 사용할지, 브라우저 UI를 숨길지 등 Chrome이 어떻게 동작해야 하는지 정확히 알려줍니다.

루트 디렉토리에 site.webmanifest라는 파일을 만들고 다음 코드를 추가하세요:

{
  "name": "여러분의 앱 이름",
  "short_name": "앱",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

display: standalone 속성에 주목하세요. 사용자가 홈 화면에서 사이트를 열었을 때 URL 표시줄을 없애고 네이티브 앱 같은 느낌을 주는 마법의 코드입니다.

3단계: HTML에 매니페스트 연결

HTML 문서가 해당 매니페스트 파일을 가리키도록 해야 합니다. Apple touch icon 태그 바로 아래에 다음을 추가하세요:

<link rel='manifest' href='/site.webmanifest'>

피해야 할 흔한 실수들

시니어 개발자들도 여기서 실수를 하곤 합니다. 제가 매주 목격하는 흔한 함정들은 다음과 같습니다:

iOS에 SVG 사용하기: Safari는 아직 홈 화면 아이콘으로 SVG를 완벽하게 지원하지 않습니다. PNG를 고수하세요. SVG가 실제로 어디에 쓰여야 하는지는 SVG 파비콘 가이드를 읽어보세요.
배경색 잊기: 앞서 언급했듯, iOS는 투명도를 싫어합니다. PNG 배경을 브랜드 컬러로 채우세요.
캐싱의 악몽: 아이콘을 업데이트하더라도 iOS는 이전 아이콘을 고집스럽게 유지하려 합니다. HTML의 파일 경로에 ?v=2와 같은 버전 쿼리 문자열을 추가하여 강제로 업데이트하세요.

구현 테스트하기

데스크톱 브라우저의 개발자 도구를 너무 믿지 마세요. 홈 화면 추가 아이콘을 테스트하는 유일한 진짜 방법은 실제 기기를 사용하는 것입니다.

iPhone에서 사이트를 열고 공유 버튼을 탭한 다음 '홈 화면에 추가'를 선택하세요. 미리보기 아이콘을 확인합니다. 선명한 180x180 PNG가 보인다면 성공입니다. Android 기기에서도 Chrome 메뉴를 사용해 동일하게 수행하세요. 아이콘이 깨져 보인다면 매니페스트 경로를 다시 확인하세요.

이 과정을 너무 복잡하게 만들지 마세요. 2026년에 필요한 것은 표준 데스크톱 아이콘, 180px Apple Touch Icon, 그리고 Android 아이콘이 포함된 매니페스트라는 단 세 개의 파일뿐입니다. 고해상도 로고 하나로 이 정확한 파일들을 생성해야 한다면, Mzu favicondl에 넣고 출력된 파일을 루트 디렉토리에 놓기만 하면 됩니다.