파비콘이 뭔가요
브라우저 탭에 보이는 작은 아이콘입니다. 16x16 픽셀 크기지만 브랜드 인식에 큰 영향을 줘요. 없으면 기본 아이콘이 표시되어 밋밋합니다.
만드는 방법
로고를 작게 만들거나, 이니셜로 간단히 만들 수 있습니다. 여러 크기를 준비하면 다양한 기기에서 잘 보여요. 파비콘 생성 도구로 쉽게 만들 수 있습니다.
적용 방법
HTML head에 link 태그로 연결하면 됩니다. 캐시 때문에 바로 안 바뀌면 강력 새로고침 해보세요. 다양한 웹 도구들과 함께 사이트를 완성하세요.
애플 터치 아이콘
iOS에서 홈 화면에 추가할 때 쓰이는 아이콘입니다. 180x180 크기가 권장돼요. apple-touch-icon 링크 태그로 지정합니다. 아이콘 생성기로 여러 크기를 한번에 만들 수 있어요.
manifest.json
PWA를 위한 설정 파일에도 아이콘 정보가 들어갑니다. 여러 크기의 아이콘을 등록해두면 기기에 맞게 표시돼요. 웹앱으로 설치되었을 때 앱 아이콘으로 사용됩니다. 완성도 있는 웹사이트라면 설정해두세요.
파비콘이 캐시되어 안 바뀔 때가 있습니다. 파일명에 버전 번호를 붙이거나 쿼리 스트링을 추가하면 강제로 새로고침할 수 있어요. 개발 중에는 시크릿 모드로 테스트하는 것도 방법입니다. 사소해 보이지만 완성도에 차이를 만듭니다.
파비콘이 캐시되어 안 바뀔 때가 있습니다. 파일명에 버전 번호를 붙이거나 쿼리 스트링을 추가하면 강제로 새로고침할 수 있어요. 개발 중에는 시크릿 모드로 테스트하는 것도 방법입니다. 사소해 보이지만 완성도에 차이를 만듭니다.