블로그 파비콘 만들기 | 하루페이퍼 파비콘 제작기 (Favicon.io 사용 후기)

1. 블로그 파비콘 만들기 | 하루페이퍼 파비콘 제작기 (Favicon.io 사용 후기)

안녕하세요, 하루일기입니다. 오늘 아침. 새로 만든 하루일기 블로그를 위해 파비콘을 만들었습니다.

파비콘(favicon)은 favorite icon을 줄여서 만든 말이에요. 브라우저의 주소 표시줄이나 페이지 탭, 북마크 메뉴와 같은 데에 나오는 작은 아이콘이죠.

아래 사진은 제 컴퓨터 화면을 캡처한 건데요, 이렇게 인터넷을 사용할 때 주소창 앞머리에 나와 웹 사이트를 구분하기 쉽게 하는 역할도 합니다.

하루페이퍼 캡처화면 – 주소창 위에 보이는 빨간색 파비콘

제가 만든 하루일기 파비콘은 가장자리를 둥글게 한 네모 판 위에 하루일기의 ‘ㅎ’를 올린 모습이에요. 빨강도 종류가 많은데, 어떤 빨강을 할까 고민하다 토마토 레드를 골랐답니다. 싱싱한 완숙 토마토의 탱탱함과 싱그러움이 느껴지지 않나요!

아무쪼록 이 하루일기 블로그가 이 파비콘처럼 따뜻하고 생생한 이야기로 가득 채워지기 바라요.

2. 파비콘 만드는 방법

전 이번에 파비콘을 만들기 위해 Favicon.io 라는 곳을 이용했어요.

이곳에서 3가지 방법으로 파비콘을 만들 수 있어요.

가. PNG 파일을 ICO파일로

이 방법은 미리 만들어 놓은 파비콘 이미지를 파비콘으로 쓸 수 있는 파일로 바꿀 때 사용합니다. jpeg, png, gif 등등 일반 이미지 파일은 파비콘으로 바로 쓸 수 없어요. 파일 이름 뒤에 .ico라는 확장자가 붙은 파일만 파비콘으로 쓸 수 있답니다.

나. 이모지를 ICO파일로

이것은 그림문자인 이모지 파일을 파비콘 파일로 바꾸는 방법입니다. 이모지(에모지)는 우리가 요즘 이모티콘이라고 부르는 바로 그 그림 아이콘을 말해요.

우리는 이모지를 이모티콘이라고 부르지만, 사실 이모티콘은 ㅜㅜ나 :)처럼 문자를 사용해 감정을 표현하는 걸 가리키는 말이에요. 세월이 흘러 문자로만 표현하던 이모티콘을 그림 아이콘인 이모지가 대체하게 되었지만, 우리는 그냥 예전대로 이모티콘이라고 부르고 있는 것 뿐이죠.

다. 텍스트를 ICO파일로

제가 사용한 방법이 바로 이 방법입니다! 전 미리 만들어 놓은 이미지도 없고, 이모지를 사용할 생각도 없었어요. 그냥 하루일기의 첫글자 ‘ㅎ’을 파비콘으로 삼기로 했거든요.

한글을 처음 접하는 사람들이 가장 이쁘고 귀엽다고 느끼는 글자가 바로 ‘ㅎ’라지요?

저도 어릴 적 이 글자를 보고는 모자를 쓰고있는 눈사람이 생각났어요. 특히 ‘흥’이란 글자를 쓸 때면 눈사람을 그리는 마음이었답니다. ㅎㅎㅎ

파비콘을 만드는 3가지 방법 (Favicon.io)

3. 텍스트를 파비콘으로 만드는 순서

Favicon.io에서 가운데 빨간색 TEXT – ICO 단추를 누르면 글자를 입력해 파비콘 파일로 만드는 페이지로 이동하게 됩니다.

전 아까 말했던 것처럼 ‘ㅎ’으로 파비콘을 만들거라 text를 입력하는 빈칸에 ‘ㅎ’을 썼어요.

그다음은 배경이 되는 백그라운드를 정해야 합니다. 살짝 부드러운 느낌을 주기 위해 ’rounded’를 택해 모서리를 굴려줬어요.

텍스트로 만들기 때문에 폰트도 정해줘야 해요. Noto-Sans로 할까 하다가 그냥 나눔고딕, 엑스트라 볼드 800을 골랐어요. 폰트 크기는 원래 110으로 되어있는데, 그렇게 했더니 여백이 좀 많고 글씨는 작아보이더군요. 전 120으로 정했어요.

이제 오른쪽 색상표에서 글자와 배경 색깔만 골라주면 됩니다.

전 하얀 텍스트에 토마토레드로 정해줬어요. 제가 사용한 토마토레드의 컬러코드는 #e74c3c에요. 같은 토마토레드라고 해도 종류가 상당히 많더라고요. 하지만 전 이 컬러가 가장 마음에 들었답니다. 🙂

이렇게 몇가지만 입력하면, 그걸로 끝! 완성이에요. 정말 쉽죠? ㅎㅎㅎ

이제 옆에있는 파란색 다운로드 단추를 눌러 저장해두고 쓰면 됩니다.

텍스트 파비콘 만드는 법 (제가 사용한 방법)

이 작은 아이콘 하나 덕분에 블로그에 애정이 더 생긴 것 같아요.
여러분도 직접 만들어보세요. 생각보다 훨씬 쉽고 재미있답니다. 🙂

함께 읽으면 좋은 글

블로그 정체성과 콘텐츠에 관하여

댓글 남기기