티스토리 뷰
Head Favicon 사용법
png 표기법
<link rel="icon" type="image/png" href="./imgs/favicon.png" />ico 표기법
<link rel="shortcut icon" type="image/x-icon" href="./imgs/favicon.ico">차이점
파비콘은 브라우저 탭의 아이콘 뿐만 아니라 북마크, 바로가기 등 활용됩니다.
png 확장자의 경우 16픽셀 사이즈만 올려놓게 되면 다른곳에 저해상도로 깨져보일 수 있어서 여러 size를 추가해 적절하게 사용할 수 있게 해야합니다.
예시
<link rel="icon" type="image/png" href="./imgs/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="./imgs/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="./imgs/favicon-64x64.png" sizes="64x64">
ico 확장자의 경우 여러가지 픽셀의 이미지를 포함해서 저장할 수 있기 때문에 한줄로 해결 가능합니다.
(다만, 사이즈를 하나로 저장할 경우 png와 차이점이 없습니다.)
참고사이트 : https://simigeum.tistory.com/18