홈페이지 제작도중 되게 사소한거지만 디테일이라고 생각될 수 있는 부분이 홈페이지 파비콘입니다.

파비콘이란 인터넷 브라우저 상단에 표시되는 홈페이지 아이콘을 말합니다. 로고와 이어서 홈페이지의 아이덴티티를 바로 보여줄 수 있는 기능으로 예전엔 작은 파일의 크기였지만 요즘에는 바로가기 아이콘, 스마트폰 링크등에서 앱 아이콘으로써 고화질로 노출되어 이용되는 경우도 많습니다.

생각보다 대응해야하는 기기와 경우가 많기때문에 일일히 하나씩 조사해가면서 만들기는 당연히 불편하겠죠?

웹페이지에서 파비콘에 대해 검색을 해보면 자동생성을 해주는 서비스 페이지가 참 많습니다.

저는 그중에서 출처에서 참고한 사이트인 Favicon Generator. For real.을 이용해볼껍니다.

우측의 "Select your Favicon picture"을 클릭해서 파비콘으로 쓸 파일을 업로드합니다. 홈페이지에선 적어도 가로세로 70픽셀의 그림파일을 올리거나 260픽셀 정도의 파일을 요구하네요. 일부 파비콘 디자인을 위해 배경을 투명하게 적용하기 위해서는 png 파일을 업로드 해야합니다.

파일이 업로드되면 파비콘용 메니페스트 설정을 할 수 있는 페이지가 나타납니다.

iOS 설정의 경우에는 배경색에 대한 부분입니다. 지정된 크기에 대해서 비어있는 백그라운드는 검정색으로 대체되는데 이 색을 다른 색으로 대체할까에 대해서 물어봅니다. 전 백색으로 바꾸었습니다.

이어서 안드로이드의 경우에는 좀 선택지가 많은데요. 그냥 아이콘을 그대로 쓸지, 배경 패딩을 넣을것인지, 안드로이드 아이콘에 적용되는 그림자효과를 넣을지에 대해서 입니다. 전 그림자를 선택했고 아이콘 이름또한 eruLabo로 고정했습니다.

이어서 윈도우 매트로 바로가기 설정입니다. 여긴 별거없습니다. 타일 색 지정정도?

마지막으로는 macOS에서의 고정탭 모양입니다. 아웃라인만 따서 제공할지, 아이콘 그대로 제공할지, 터치바에서 배경을 어떤색으로 지정할지에 대해서 설정합니다.

모든 작업이 끝나면 설정에 대한 결과물을 어떻게 제공할지 물어봅니다. 전 웹페이지에 직접 업로드후 패스로 접근할것이기 때문에 그대로 놔두고 아래 생성 버튼을 누릅니다. (이 방법이 제일 좋긴합니다.)

잠시 후 작업결과와 적용방법이 가득담긴 페이지가 제공됩니다.

탭에서 보면 아시다시피 정말 여러 환경에 대해서 파비콘을 어떻게 적용해야 하는지 보여주고있습니다. "Favicon package"를 눌러서 파비콘 파일이 든 폴더를 다운받습니다.

그리고 위의 지시대로 파일을 웹 서버에 복사하고 패스연결을 진행해주시면 됩니다.

파비콘 파일들은 가능하면 루트위치에 두는게 보편적으로 좋은것 같네요.

파비콘이 잘 적용되었는지 확인은 4번 "Check your favicon"을 클릭하면 아래처럼 확인할 수 있습니다.

경로 몇개가 잘 체크되지 않아서 빨간불이 뜨네요! 체크 페이지에서 누락된 설정은 마저 진행해줍시다!

끝!