favicon 추가는 어떻게? ico, png 확장자 차이

브라우저 탭에 제목은 title 태그를 head태그안에 넣는 걸로 나타낼 수 있고

그 제목 옆에 작은 아이콘은  link 태그를 head태그안에 넣는 걸로 나타낼 수 있다.

 

내 포트폴리오를 점검해 보면서 이 부분을 항상 빠뜨려서 뭔지모를 허전함을 주었는데

 ico png차이와 그에 따른 살짝 다른 표기법에 대해 찾아보면서 정리해 보았다.

 

 1.표기법

<link rel="icon" type="image/png" href="http://example.com/image.png" />

<link rel="shortcut icon" type="image/x-icon" href="http://example.com/myicon.ico" />

ico파일은 png파일과 비교해보면 rel속성에 shortcut을 추가해주고 type속성은 image/png대신 image/x-icon으로 변경해준다.

 

2.차이점

 

이 파비콘은 브라우저 탭에 작은 아이콘뿐아니라 북마크, 바로가기 아이콘 등등 활용되는데

png의 경우 16픽셀 사이즈만 덜렁 올려놓게 되면 다른곳에 활용될때 저해상도라 깨져보일 수 있어서

아래와 같이 size속성을 추가해 값에 따라 여러개를 추가해서 브라우저가 적절한 픽셀이미지를

사용할 수 있게합니다.

<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-64x64.png" sizes="64x64"> 
...

이를 한 줄로 해결한 것이 ico인데

이 파일 확장자는 애초에 여러가지 픽셀의 이미지를 포함해 저장할 수 있어서

사이즈별로 필요한 크기이미지를 브라우저가 알아서 사용하게 된다.

(물론 사이즈를 하나로 저장하면 png랑 다른점이 없고 또 여러가지 픽셀 별로 이미지를 많이 저장하면

파일용량이 무겁게 된다.)

 

ico로 저장하는 툴이 보편화 되어있진 않아서 png를 자주사용하게 될것같고 ico로 저장하겠다 하시면

convertio 웹에서 변환하면 될것같다. 256픽셀 png파일을 저장해서 변환하면

원하는 픽셀이미지를 체크하면 해당 픽셀이미지가 저장된다.

(16픽셀png파일로 256픽셀이미지는 만들수없음)

 

유료강의를 듣고 알게된 사이트.

Favicon Generator for perfect icons on all browsers

200픽셀이상의 png 파일 또는 svg파일을 업로드 한 뒤, 여러 옵션을 변경해주면 된다.

다크모드, 라이트모드에서의 탭, 윈도우에서, 맥북 터치바에서 보이는 모습까지 세세하게 설정해줄수있다.

zip파일을 내려받고 열어준뒤 파일들을 해당 프로젝트 루트파일에 최상단 폴더에 위치시킨 후

head태그안에 복붙해주면 끝!