이미지 생성과 파비콘 만들기까지!

파비콘

파비콘은 페이지를 열때 상당 탭에 표시되는 작은 아이콘을 말한다. 아이콘으로 해당 사이트를 식별할 수 있게 해주는 역할을 한다.

해당 아이콘만 보고도 직관적으로 구글페이지인지, 티스토리 페이지인지 한번에 인지할 수 있다. 오늘은 나만의 페이지에 나만의 파비콘을 추가하는 플로우에 대해서 가볍게 알아보고자 한다. 자신만의 페이지를 만들때 이런 부분도 체크해서 만들어준다면 페이지의 완성도를 더 높일 수 있지 않을까 싶다.

 

 

이미지 생성

https://www.canva.com/

나는 위의 페이지를 이용해서 나만의 이미지를 먼저 만들었다. 멋쟁이 ai가 만들어주는 이미지이다. 나는 페이지 이름다운 이미지를 만들어 달라고 부탁했다. 생각보다 웅장한 댕댕이가... 참고로 유료 버전에는 이미지를 더 야무지게 만들어줄 옵션들이 있다. 이미지의 주변을 투명하게(transparent) 로 바꿀 수도 있는데, 이는 생각보다 영향을 미치기는 한다.

 

 

 

이는 미리 보는 결과물인데, 구글이나 다른 페이지와는 다르게 원하는 이미지 주변으로 배경까지 하얀색이 들어가있는것을 확인할 수 있다. 

고퀄을 원한다면 유료버전을 사용하거나, 다른 방법을 이용해야할듯하다! (나는 일단 만드는것에 조금 집중!)

웅장력 맥스;

 

여러 포맷으로 변환

https://www.favicon-generator.org/

해당 페이지에 들어가서 원하는 이미지를 올려준다.

 

 

그리고 'Download the generated favicon' 을 클릭하면 파일을 다운로드 할 수 있다.

여러 형식으로 바꿔주는데, 우리에게 필요한건 확장자가 .ico 인 파일뿐!

 

파비콘 반영하기

React :  프로젝트를 만들면 favicon.ico 파일이 있다. 해당 파일을 교체해주면 된다

티스토리 : 관리 > 블로그 설정 에서 파비콘 파일을 넣어주면 된다! 

 

그러고 나면 원하는 결과를 확인할 수 있다!