hexo 블로그를 꾸며보자!! 나만의 파비콘을 만들고 블로그에 적용해 보자!!

안녕하세요.

굳헬로 @goodhello 입니다.

새로운 한주가 시작되었네요.

오늘부터는 지난주에 만든 hexo 블로그를 꾸며보려고 하는데요.

며칠전 hexo 블로그에 테마를 적용할 때 테마 내의 _config.yml설정파일을 수정하여

widgets:
    -
        # Widget name
        type: profile
        # Where should the widget be placed, left or right
        position: left
        # Author name to be shown in the profile widget
        author: Goodhello
        # Title of the author to be shown in the profile widget
        author_title: 굳헬로의 블로그
        # Author's current location to be shown in the profile widget
        location: 한국

간단하게 위젯 수정과 avatar.png 파일을 수정하여 블로그 아바타도 수정해 보았는데요.

오늘은 이어서 블로그를 계속 꾸며보도록 하겠습니다.

먼저 파비콘을 한번 바꿔보도록 하겠습니다.

파비콘이란 즐겨찾기 아이콘을 말하는데요.

이렇게 웹 브라우저에서 아이콘을 확인할 수 있으며, 즐겨찾기시에도 이름 옆에 아이콘이 생성되어 웹 사이트를 표현하기에 좋은 아이템인데요.

우선 파비콘을 하나 만들어 보겠습니다.

저는 파워포인와 포토스케이프 프로그램을 이용하였는데요.

맑은고딕 폰트를 적용하여 굳 이라는 글자를 입력하고 이를 포토스케이프에 붙여 넣기 하였습니다.

그리고 하단의 편집 도구에 크기조절을 누르고

가로 세로 크기를 17 픽셀로 맞추어 주었습니다.

그러면 위와같이 크기가 작게 변하는데 이제 저장 버튼을 눌러

원하는 이름으로 저장을 해줍니다.

저는 my_favicon 이라는 이름에 png 파일 형식으로 저장을 해주었습니다.

이제 이 파일을 블로그 아래 themes 폴더 아래 현재 적용된 테마 이름 아래 source 내에 images 폴더에 복사를 합니다.

icarus 테마를 적용한 저는 다음 경로에

D:\blog\steemblog\themes\icarus\source\images

붙여 넣고 my_favicon.png 파일 확장자를 my_favicon.ico으로 바꿔줍니다.

그리고 테마의 _config.yml을 열어보면

favicon: /images/favicon.svg

favicon 이라고 나오는 부분의 코드를 방금 만든 my_favicon.ico 으로 변경해 줍니다.

favicon: /images/my_favicon.ico

이제 hexo 블로그를 들어가보면

상단에 굳이라는 파비콘이 적용된 것을 확인할 수 있으며

즐겨찾기(북마크)를 해보면

역시 굳 파비콘이 적용된 것을 확인할 수 있습니다.

소소하지만 나만의 파비콘이 적용되니 블로그가 약간은 더 멋있어(?) 진 것 같네요.

그럼 다음 시간에도 계속해서 hexo 블로그를 멋지게 꾸며나가보도록 하겠습니다.

오늘 하루도 파이팅 하시고~ 행복한 하루 보내시길 바래요~