파비콘 만들기 ( favicon 만들기 ) favicon.ico 404 Not Found / PNG 파일을 파비콘으로

파비콘 만들기 / favicon 만들기 / faviconl.ico

 

웹사이트를 개발하다보면 크롬 개발자모드 화면의 콘솔에 다음과 같은 코드가 보이는 경우가 있습니다. 파비콘이라는 것은 바로가기 버튼/ 홈화면에 링크추가/ 브라우저 상단에 타이틀이 표시되는 부분등에 나타나는 일종의 아이콘이라고 보시면 됩니다. 

 

 

파비콘만들기 favicon 만들기 

 

 

 

브라우저에서 페이지를 열었을때 타이틀이 표시되는 부분 옆에 보면 작은 아이콘처럼 파비콘이 표시되는 걸 볼 수 있습니다. 

 

favicon 404 Not Found

 

또는, 모바일 화면에서 바로가기를 만들었을때 화면에 보이는 아이콘도 파비콘입니다. 

 

png 파비콘 만들기

 

 

파비콘 favicon 은 PNG 파일을 만든 후에 ico 형식의 파일로 변환이 가능합니다.  PNG 파일은 일러스트나 포토샵 등에서 만들 수가 있는데요, 크기는 16x16 / 32x32 / 48x48 / 64x64 픽셀로 만들면 됩니다.

 

 

PNG 파일로 파비콘을 만들어도 등록이 가능하지만, 익스플로러 11 이상에서만 PNG로 만든 파비콘을 사용할 수 있기 때문에 가능하면 ico 파일로 만드는 것이 좋습니다. icon 파일은 익스플로러 5 이상이면 지원이 가능하고, 크롬/ 오페라/ 사파리 등에서도 모두 지원합니다.

 

 

 

PNG 파일을 만든 후에는 아래 사이트에서 ico 파일로 변환할 수 있습니다.  중간의 빨간색 동그라미 부분을 클릭해서 PNG 파일을 업로드 하면, 바로 오른쪽에 파비콘 파일이 생성됩니다. 

 

파비콘만들리 favicon.ico 404 Not Found 해결

 

 

파비콘 파일을 다운로드 한 후에는 웹서버의 특정 디렉토리에 FTP로 올려놓고 다음과 같이 HTML 문서내에 파비콘 위치를 지정해 주면 됩니다.

 

<link rel = "icon" href = "/favicon.ico">