파비콘 가이드
파비콘을 만들 때 궁금한 크기, 형식, 삽입 코드에 대한 구체적인 답을 확인하세요.
파비콘 크기: 형식별 용도와 권장 규격
파비콘 크기를 검색하면 아직도 2014년부터 내려온 15개 파일 목록이 나옵니다. 실제로는 여섯 가지 규격으로 브라우저 탭, 검색 결과, iOS, Android, PWA를 지원할 수 있습니다. 필요한 크기와 그 이유를 살펴보겠습니다.
가이드 읽기PNG를 ICO로 무료 변환하기
사이트 루트에는 여전히 .ico 형식이 기본으로 기대됩니다. 그러나 대부분의 온라인 변환기는 이미지를 서버로 업로드하도록 요구합니다. 아무것도 업로드하지 않고 PNG에서 올바른 다중 크기 favicon.ico를 만드는 방법을 알아보세요.
가이드 읽기apple-touch-icon: 크기, 형식, 삽입 코드
Apple Touch 아이콘은 방문자가 사이트를 iPhone 홈 화면에 추가할 때 사용할 이미지를 명시합니다. 브라우저 탭 파비콘이나 웹 앱 매니페스트의 아이콘과는 별도입니다.
가이드 읽기SVG로 만드는 다크 모드 파비콘
투명 배경의 검정색 로고는 밝은 탭에서는 잘 보이지만 어두운 탭에서는 사라집니다. ICO는 테마에 맞춰 바뀌지 않지만 SVG 파비콘은 가능합니다. 브라우저 테마에 따라 색상을 바꾸는 CSS 규칙을 담을 수 있기 때문입니다.
가이드 읽기HTML에 파비콘 추가하기
안정적인 HTML 파비콘은 태그 하나만으로 완성되지 않습니다. 접근 가능한 몇 가지 파일과 head에 넣은 링크가 함께 필요합니다. 이 절차는 오래된 변형을 무작정 늘리지 않고 최신 브라우저 탭, 구형 클라이언트, 모바일 바로가기를 지원합니다.
가이드 읽기파비콘이 안 보이거나 바뀌지 않을 때
파비콘이 보이지 않을 때 파일 자체가 원인인 것은 아닙니다. 브라우저, CDN, 서비스 워커, 검색 엔진이 서로 다른 버전을 보관할 수 있습니다. 순서대로 진단하면 여러 조건을 동시에 바꾸는 일을 피할 수 있습니다.
가이드 읽기Next.js App Router의 파비콘 설정
App Router는 정해진 이름의 파일이나 metadata 객체에서 아이콘 요소를 생성할 수 있습니다. 두 방식 모두 유효하지만 명확한 기준 없이 섞으면 서로 경쟁하는 선언이 생기기 쉽습니다.
가이드 읽기SVG 파비콘 가이드
SVG는 모든 픽셀 밀도에서 가장자리를 선명하게 유지하고 테마에 따라 색상을 바꿀 수 있습니다. 이 유연성을 활용하려면 파일이 외부 리소스에 의존하지 않아야 하며, 단순하고 작은 공간에서도 알아보기 쉬워야 합니다.
가이드 읽기