클라이언트가 여러분의 웹앱을 Microsoft Edge 사이드바에 고정했을 때, 아름다웠던 로고가 깨진 픽셀 덩어리로 변하는 것을 본 적이 있다면 그 고통을 아실 겁니다. Edge가 Google Chrome과 같은 Chromium 엔진으로 구동될지는 몰라도, favicon for microsoft edge setup을 Chrome과 완전히 똑같이 취급하는 것은 초보적인 실수입니다.

Edge는 고유한 UI 영역을 가지고 있습니다. 사용자에게 '사이트를 앱으로 설치'(Windows 작업 표시줄에 고정)하도록 적극적으로 유도하며, Edge 사이드바 기능을 강력하게 밀고 있습니다. 파비콘이 이러한 Microsoft 특화 환경에 최적화되어 있지 않다면, Windows에서 여러분의 브랜드는 매우 엉성해 보일 것입니다.

GitHub를 예로 들어보겠습니다. Edge에서 GitHub를 고정하면 단순한 16x16 ICO 파일을 가져오지 않습니다. 웹 매니페스트에 정의된 고해상도의 마스커블(Maskable) 아이콘을 가져와서, 작은 탭이든 거대한 Windows 시작 메뉴 타일이든 Octocat이 선명하게 보이도록 보장합니다. 자, 이제 여러분의 Edge 설정을 바로잡아 봅시다.

사전 준비

마스터 이미지가 필요합니다. 투명한 배경의 512x512 PNG 또는 가급적이면 SVG를 권장합니다. 크기가 이상한 JPEG만 가지고 있다면, 먼저 Mzu favicondl을 통해 깨끗한 정사각형 PNG로 변환하세요.

1단계: Chromium 기본 설정

Edge의 내부는 Chromium이므로 브라우저 탭에 대한 표준 HTML 링크 태그를 준수합니다. 최신 스케일링을 위한 SVG와 구버전 Edge를 위한 PNG 폴백이 필요합니다.

<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>

이것들을 <head>에 넣으세요. 이것으로 표준 브라우저 탭과 Bing 검색 결과가 처리됩니다. (네, Bing은 파비콘에 대해 Google과 동일한 크롤러 로직을 사용하지만, 대비에 있어서는 악명 높을 정도로 까다롭습니다).

2단계: Edge 웹 앱 매니페스트 (핵심 비법)

여기서부터 Edge가 일반 브라우저와 달라집니다. Edge는 여러분의 사이트가 프로그레시브 웹 앱(PWA)이 되기를 원합니다. 사용자가 Edge 주소 표시줄에서 '앱 설치'를 클릭하면 Windows가 제어권을 넘겨받습니다. 매니페스트가 없으면 Windows는 아이콘을 추측하고, 대개는 틀립니다.

루트 디렉토리에 site.webmanifest 파일을 만드세요. 192x192와 512x512 아이콘을 정의해야 합니다. 가장 중요한 것은 maskable 목적(purpose)을 포함하는 것입니다. Edge는 사이드바와 Windows 작업 표시줄에서 아이콘이 OS 수준의 둥근 사각형을 완벽하게 채우도록 이를 사용합니다.

{
  "name": "여러분의 멋진 앱",
  "short_name": "App",
  "icons": [
    {
      "src": "/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icon-512.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "any maskable"
    }
  ],
  "display": "standalone"
}

HTML에 연결하세요: <link rel='manifest' href='/site.webmanifest'>. 특정 크기를 생성하는 방법을 모르겠다면, PWA 요구 사항을 심도 있게 다룬 웹 앱 매니페스트 파비콘 가이드를 확인하세요.

3단계: Edge 사이드바 최적화

Edge 사이드바는 2026년 Microsoft의 핵심 포커스입니다. 사용자들은 모바일 버전의 사이트를 여기에 고정합니다. 고정될 때 Edge는 먼저 Apple Touch Icon을 찾고(아이러니하죠), 그다음 매니페스트로 폴백합니다.

어두운 테마의 Edge 사이드바에서도 로고가 선명하게 보이도록 하려면 고대비의 180x180 PNG를 제공하세요.

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

이 아이콘은 반드시 단색 배경을 가져야 합니다. Edge 사이드바에서 투명한 배경은 사용자가 다크 모드일 때 로고가 보이지 않게 만드는 원인이 됩니다.

Edge의 흔한 함정들

Edge를 나중에 생각할 문제로 치부하는 것은 완성도를 떨어뜨리는 일입니다. SVG를 설정하고, Windows 통합을 위한 웹 매니페스트를 구성하며, 사이드바를 위해 Apple Touch Icon을 준비하세요. Windows 사용자들이 감사해할 것입니다.