테마 색상 및 앱 아이콘

<meta name="theme-color" content="#1f2937"> 태그는 모바일에서 브라우저 주소 표시줄의 색상을, 데스크톱 PWA에서 제목 표시줄의 색상을 설정합니다. 콘텐츠를 변경하지 않고도 페이지에 세련되고 앱 같은 느낌을 줍니다.

라이트 모드와 다크 모드에 서로 다른 색상을 제공하십시오. <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">를 지정하고 어두운 색상을 사용하는 두 번째 태그를 추가하면 됩니다. 브라우저는 사용자의 OS 설정에 따라 일치하는 태그를 선택합니다.

매니페스트의 theme_color는 앱이 설치된 PWA로 실행될 때(독립 창의 제목 표시줄) 적용되는 색상을 지정합니다. 일관성을 위해 페이지 안의 테마 색상 메타와 일치시키십시오. 브라우저에서 실행할 때와 설치 후 실행할 때 모두 시각적 정체성이 동일하게 유지됩니다.

<link rel="icon" href="/favicon.ico">는 오랫동안 사용된 브라우저 탭 아이콘입니다. 이름과 달리 최신 브라우저는 ICO보다 PNG나 SVG를 선호합니다. 더 선명하게 표시하려면 <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png">를 사용해 32x32 PNG를 제공하십시오.

최신 브라우저는 SVG 파비콘을 허용합니다: <link rel="icon" type="image/svg+xml" href="/icon.svg">. 어떤 크기에서도 선명하고 파일 크기도 작습니다. 벡터 로고에 사용하고, SVG 파비콘을 지원하지 않는 브라우저를 위해 PNG 대체 항목을 함께 제공하십시오.

iOS 홈 화면에서는 애플 터치 아이콘을 사용합니다: <link rel="apple-touch-icon" href="/apple-touch-icon.png">. 180x180 PNG를 제공하십시오. iOS는 홈 화면 설치에 웹 매니페스트의 아이콘을 사용하지 않으므로 apple-touch-icon 링크가 필요합니다.

안드로이드 설치 과정에서는 매니페스트의 아이콘 배열에서 아이콘을 읽습니다. 192x192(홈 화면용) 및 512x512(시작 화면과 앱 서랍용) PNG를 포함하십시오. 안드로이드가 홈 화면 아이콘 모양(원형, 둥근 사각형, 정사각형)에 맞게 아이콘을 마스크 처리할 수 있도록 마스크 가능 목적의 사본도 추가하십시오.

마스크 가능 아이콘은 핵심 콘텐츠가 중앙의 80% 안전 영역 안에 들어오도록 배치해야 합니다. 바깥쪽 20%는 기기의 마스크 모양에 따라 잘릴 수 있습니다. 디자인하는 동안 maskable.app 같은 도구를 사용해 다양한 마스크 모양에서 아이콘을 미리 확인하십시오.

윈도우 8/10의 고정 타일에는 <meta name="msapplication-TileImage" content="/tile.png"> 및 <meta name="msapplication-TileColor" content="#1f2937">를 사용합니다. 현재는 다른 플랫폼보다 우선순위가 낮지만, 사이트를 고정하는 윈도우 사용자에게는 여전히 유용합니다.

구형 IE/엣지에서는 <meta name="msapplication-config" content="/browserconfig.xml">가 여러 크기의 타일 아이콘이 들어 있는 XML 파일을 가리킵니다. 오늘날에는 대부분 중요하지 않으므로 새 사이트에서는 browserconfig.xml을 생략해도 문제가 없습니다.

사파리 macOS 고정 탭에는 <link rel="mask-icon" href="/safari-icon.svg" color="#1f2937">를 사용합니다. SVG는 단색 아이콘이어야 합니다(color 속성이 색상을 덮어씁니다). macOS 사파리의 고정 탭 기능에서만 사용됩니다.

realfavicongenerator.net을 사용해 하나의 원본에서 모든 아이콘 변형을 생성하십시오. 실제 iOS 기기(홈 화면에 추가)와 안드로이드 기기(브라우저 메뉴에서 앱 설치)에서 테스트하여 아이콘이 올바르게 잘리지 않고 픽셀화되지 않는지 확인하십시오.

웹 앱 매니페스트에서 마스크 가능 아이콘 목적은 어떤 역할을 합니까?

테마 색상(미디어 쿼리 변형 포함)은 주소 표시줄의 색조를 바꾸고, 매니페스트의 테마 색상은 설치된 앱 제목 표시줄의 색조를 바꿉니다. 아이콘에는 파비콘(SVG + PNG), 애플 터치 아이콘(iOS, 180x180), 매니페스트 아이콘(안드로이드, 192 + 512 + 마스크 가능), 사파리 마스크 아이콘(단색 SVG), msapplication-TileImage(윈도우 고정 타일)가 있습니다. realfavicongenerator.net을 사용해 하나의 원본에서 모든 변형을 생성하십시오.