PWA 아이콘이 바뀌지 않을 때: 매니페스트, 경로와 캐시 확인
공개된 PWA 매니페스트와 이미지 응답, 실제 크기 및 설치 캐시를 확인하세요. 파비콘과 설치 아이콘을 구분하고 잘못된 경로부터 순서대로 조사하는 방법입니다.
PWA 아이콘이 갱신되지 않으면 브라우저가 실제로 받는 매니페스트와 이미지 URL부터 조사하세요. 탭의 파비콘을 교체한다고 설치된 앱의 아이콘이 함께 바뀌지는 않습니다. 선언과 캐시가 서로 다를 수 있습니다.
파비콘 및 PWA 생성기는 이미지와 기본 매니페스트를 준비합니다. 사이트에 배포할 때 매니페스트의 경로를 실제 공개 파일 위치에 맞춰야 합니다.
일러스트: 독자적인 생성 개념입니다. 화면, 고객 성과 또는 플랫폼 검증 기록이 아닙니다.
탭 아이콘과 설치된 아이콘 구분하기
HTML의 파비콘 선언은 브라우저 탭용입니다. 매니페스트의 아이콘 항목은 웹 애플리케이션의 이미지를 설명합니다. 따라서 페이지에는 새 파비콘이 보이지만 기존 설치 바로가기는 다른 그림을 사용할 수 있습니다.
문제가 나타나는 곳을 적어 두세요. 탭, 설치 안내, 런처 또는 이미 설치한 앱인지에 따라 조사 대상이 달라집니다. 브라우저와 운영체제도 기록하면 막연한 신고를 재현 가능한 확인으로 바꿀 수 있습니다.
페이지가 연결한 매니페스트 열기
매니페스트 링크를 확인하고 그 URL을 직접 엽니다. 의도한 JSON이 반환되어야 합니다. 로그인 페이지, 반복 리디렉션이나 일반 HTML 응답인지 살펴보세요. 편집기의 파일뿐 아니라 배포된 응답을 확인해야 합니다.
현재 생성기는 Web/site.webmanifest, android-chrome-192x192.png와 android-chrome-512x512.png를 내보냅니다. 기본 매니페스트는 루트 기준 경로를 사용합니다. 이미지를 다른 디렉터리에 놓았다면 참조도 바꾸세요.
/로 시작하는 주소는 현재 페이지의 폴더가 아닌 오리진 루트에서 시작합니다. 앱을 하위 디렉터리에 배포할 때 이 차이를 확인해야 합니다. 파일이 존재하는 위치와 선언한 주소를 비교하세요.
각 아이콘 URL과 실제 파일 확인하기
MDN 매니페스트 아이콘 문서는 src, sizes, type과 purpose를 설명합니다. 상대 경로는 매니페스트 URL에서, /로 시작하는 경로는 오리진 루트에서 해석됩니다.
선언한 이미지를 각각 열고 응답을 살펴보세요. URL이 .png로 끝나도 오류 페이지는 이미지가 아닙니다. 로컬에서 열린 파일이 배포에 빠졌거나 페이지의 이미지 정책에 막힐 수 있습니다.
선언한 치수와 실제 픽셀도 비교합니다. 생성 후 리사이즈했다면 매니페스트 항목도 갱신하세요. 파일명에 192나 512가 있다고 해당 크기의 증거가 되지는 않습니다.
그림이 지원하는 용도만 선언하기
현재 출력은 일반 아이콘 과정입니다. 별도로 검증한 maskable 이미지를 만들지 않습니다. 기존 아이콘에 purpose: "maskable"을 추가해도 구도와 안전 영역이 다시 설계되지는 않습니다.
maskable 소재가 필요하면 그 잘라내기에 맞게 준비하고 시험하세요. 적절한 경우 일반 아이콘도 유지합니다. 크기 가이드로 현재 파일을 정리하고 지원할 브라우저의 설치 요구 사항을 확인하세요.
브라우저에서 확인한 manifest와 아이콘 예시
2026년 10월 1일 현재 출력 manifest와 아이콘을 포함한 독자적인 로컬 테스트 사이트를 Chrome 154로 열었습니다. manifest는 200, application/manifest+json으로 응답했고 상대 경로 start_url과 scope는 테스트 사이트 루트로 해석됐습니다. 두 아이콘 모두 200으로 응답했으며 비트맵 디코딩으로 192 × 192, 512 × 512 px를 확인했습니다. favicon과 Apple touch icon 선언도 각각 확인했습니다.
압축을 푼 디렉터리에서 다음 명령을 실행하고 http://localhost:8892/를 여세요. 파일을 하위 디렉터리로 옮기면 루트 기준 아이콘 URL을 수정해야 합니다.
python3 -m http.server 8892 --bind localhost파싱, 응답과 이미지 디코딩을 확인한 기록입니다. 설치 안내 이벤트나 설치 완료는 관찰되지 않았고 standalone은 false였습니다. maskable 그림이나 service worker는 제공하지 않으므로 실제 설치는 별도로 검증하세요.
모두 삭제하기 전에 브라우저로 조사하기
애플리케이션 또는 매니페스트 검사 도구를 엽니다. 파싱된 매니페스트, 아이콘 미리보기와 가져오기 오류를 확인하세요. 네트워크의 JSON과 이미지 응답도 보면 잘못된 URL과 오래된 캐시를 구분할 수 있습니다.
지워도 되는 테스트 설치라면 새 리소스를 확인한 뒤 테스트 앱을 제거하고 다시 설치할 수 있습니다. 사이트 데이터까지 지우면 앱의 로컬 정보가 사라질 수 있습니다. 실제 사용자 데이터를 삭제하기 전에 필요한 범위부터 조사하세요.
의도적으로 버전을 넣은 이미지 URL은 배포와 캐시를 추적하기 쉽습니다. 참조를 갱신하고 어떤 버전을 설치했는지 기록하세요. 매 요청에 임의 주소를 만들기보다 안정된 버전 파일을 쓰는 편이 조사와 캐시에 유리합니다.
설치를 별도 과정으로 확인하기
MDN의 PWA 설치 가이드는 이미지 외의 조건도 설명합니다. 아이콘 내보내기만으로 모든 브라우저와 운영체제에서 설치 가능한 사이트가 되지는 않습니다.
관리할 수 있는 테스트 사이트, 실제 배포 매니페스트와 대상 브라우저를 사용하세요. JSON과 이미지가 로드되었는지, 설치된 표시가 원하는 그림을 쓰는지 기록합니다. 데스크톱 확인을 휴대전화 설치 시험이라고 보고하지 않습니다.
Safari에서 실제 설치한 사례
2026년 10월 2일 동일한 테스트 사이트를 격리된 iPhone 17 시뮬레이터의 iOS 26.5 Safari에서 홈 화면에 추가했습니다. 웹 앱으로 열기가 켜져 있었습니다. My App 아이콘에는 원본 XY 그림이 표시됐고, 누르면 Safari 주소 막대가 없는 별도의 Web 앱에서 사이트가 열렸습니다. 이 결과는 해당 로컬 Safari 흐름을 확인한 것으로, Chromium 설치나 오프라인 지원, 실제 기기 동작을 증명하지 않습니다.
Apple의 Safari 안내에 따라 사이트를 열고 더 보기 → 공유 → 홈 화면에 추가를 선택합니다. 웹 앱으로 열기를 켠 상태로 추가한 다음 새 아이콘을 눌러 그림과 목적지를 확인합니다. 테스트 사이트에는 여전히 service worker나 전용 maskable 그림이 없습니다.
PWA 아이콘 질문
파비콘은 바뀌었는데 설치 아이콘은 그대로인 이유는 무엇인가요?
파비콘과 매니페스트 선언을 따로 보고 기존 설치의 캐시를 확인하세요. 파비콘이 새것이어도 매니페스트가 다른 파일을 가리킬 수 있습니다.
파일명만 맞추면 되나요?
이름은 맞출 수 있지만 실제 형식과 크기도 확인해야 합니다. 이름 변경은 변환이나 리사이즈가 아닙니다.
모든 브라우저의 표시가 같아야 하나요?
아니요. 설치 인터페이스와 지원하는 아이콘 용도가 다릅니다. 대상 브라우저와 기기에서 시험하세요.
재현 가능한 확인 남기기
매니페스트를 열고 이미지 참조를 따라가 실제 파일을 검사한 뒤 새 테스트 설치를 진행하세요. 교체 소재는 PWA 생성기로 준비할 수 있습니다.
더 많은 게시물
Android 적응형 아이콘이 잘릴 때: 전경과 안전 영역 확인
Android 아이콘의 잘림, 흰 테두리와 오래된 리소스를 구분하세요. 전경 배율과 배경을 조정하고 XML 참조 및 설치된 런처 표시를 확인하는 방법입니다.
엠블럼 로고 디자인: 작은 크기에서도 읽히는 배지 만들기
유용한 테두리, 읽기 쉬운 이름과 명확한 심벌로 엠블럼을 설계하세요. 원형과 방패, 작은 표시, 투명도와 PNG 및 SVG 출력을 비교하는 가이드입니다.
AI 앱 아이콘 내보내기: 원본과 리소스 확인
AI 결과를 App Icon Maker로 옮기고 작은 크기의 가독성과 플랫폼 마스크를 확인하세요. 자동 전달 제한, 수동 복구와 프로젝트에 넣을 실제 파일 검사까지 설명합니다.
뉴스레터
최신 소식 받기
받은 편지함으로 최신 앱 디자인 팁과 아이콘 트렌드를 받아보세요.