ng new를 실행하고 즉시 앱을 배포해 본 적이 있다면, 당신은 작은 실수를 저지른 것입니다. 바로 기본 Angular 'A' 아이콘을 그대로 둔 것이죠. 브라우저 탭에 떠 있는 그 빨간 삼각형만큼 '미완성 프로젝트'임을 강하게 드러내는 것도 없습니다. 2026년의 사용자들은 세련된 경험을 기대하며, 그 시작은 Angular 앱을 위한 선명하고 고해상도인 파비콘 설정부터입니다.
Angular는 표준 정적 HTML 사이트와는 다르게 에셋을 처리합니다. Angular CLI가 Esbuild나 Webpack을 사용하여 애플리케이션을 번들링하기 때문에, 단순히 폴더에 파일을 던져 넣는 것만으로는 충분하지 않습니다. 프레임워크에 브랜드 에셋을 어떻게 처리해야 할지 정확히 알려줘야 합니다. 혼자 개발하더라도 대규모 팀이 만든 것처럼 전문적으로 설정하는 방법을 살펴보겠습니다.
1단계: 에셋 준비하기
코드를 작성하기 전에 고품질 소스 이미지가 필요합니다. 저는 항상 SVG로 시작할 것을 권장합니다. 왜냐하면 무한히 확장 가능하고 다크 모드를 기본적으로 지원하기 때문입니다. 여전히 16x16 ICO 파일 하나만 사용하고 있다면, 당신은 2012년에 머물러 있는 것입니다. 고해상도 화면에서 그 작은 아이콘은 흐릿하게 보일 뿐입니다.
로고를 Mzu favicondl과 같은 도구에 넣어 필요한 크기를 생성하세요. 최소한 32x32 PNG, 안드로이드용 192x192 PNG, 그리고 180x180 Apple Touch Icon이 필요합니다. 이러한 크기가 왜 중요한지 더 자세히 알고 싶다면 SVG 파비콘 가이드를 확인하세요. 파일이 준비되면 src/assets/favicons/ 디렉토리에 배치합니다.
2단계: angular.json 구성하기
이 부분은 많은 개발자들이 실수하는 지점입니다. angular.json 파일에 새 아이콘을 등록하지 않으면 빌드 프로세스에서 무시됩니다. angular.json을 열고 build 타겟 아래의 assets 배열을 찾으세요.
'assets': [
'src/favicon.ico',
'src/assets',
{
'glob': '**/*',
'input': 'src/assets/favicons',
'output': '/'
}
]위의 객체 구문을 사용하면 favicons 폴더 내의 모든 파일을 최종 빌드의 루트에 배치하도록 Angular에 지시할 수 있습니다. 이렇게 하면 index.html에서 복잡한 경로 대신 /favicon-32x32.png와 같이 간단하게 참조할 수 있습니다. 이는 GitHub와 같은 대형 서비스들이 에셋을 관리하는 방식과 유사합니다.
3단계: index.html 업데이트
이제 빌드 시스템이 파일 위치를 알았으니 브라우저에 알려줄 차례입니다. src/index.html을 열고 기본 favicon.ico 라인을 삭제한 뒤, 모든 환경을 커버하는 현대적인 코드로 교체하세요.
<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='alternate icon' type='image/png' href='/favicon-32x32.png'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/manifest.webmanifest'>rel='alternate icon'을 사용하는 것은 SVG를 이해하지 못하는 구형 브라우저를 위한 영리한 폴백(fallback) 방법입니다. 배포 후에도 변경 사항이 보이지 않는다면 캐시 문제일 가능성이 높습니다. 파비콘 캐시 삭제 방법 가이드에서 해결책을 찾아보세요.
Angular에서의 일반적인 실수
자주 하는 실수 중 하나는 base href를 잊는 것입니다. 앱이 하위 폴더에서 호스팅되는 경우 절대 경로를 쓰면 아이콘이 깨질 수 있습니다. 또한 PWA를 구축 중이라면 manifest.webmanifest 파일이 HTML에 정의된 것과 동일한 아이콘 파일을 가리키고 있는지 확인하세요. 작은 디테일이 브랜드의 신뢰도를 결정합니다.