이 글은 2년 이상 지난 이야기에요. 읽으실때 참고!
개발

홈페이지 파비콘(favicon) 만들고 등록하기

522 views as of March 18, 2019.

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

 

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

 

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

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

 

Favicon Generator for perfect icons on all browsers
Favicon Generator for perfect icons on all browsers
The ultimate favicon generator. Design your icons platform per platform and make them look great everywhere. Including in Google results pages.
https://realfavicongenerator.net


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

 

 

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

 

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

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

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

 

 

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

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

 

 

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

 

 

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

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

 

 

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

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

 

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

 

 

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

 

 

끝!

 

개발 favicon 파비콘
×