웹 사이트를 열다 보면 이런 아이콘을 볼 수 있다.
블로그를 운영하기 전에는 무심코 지나갔던 이런 아이콘들..
무튼 이렇게 웹사이트 옆에 표기된 아이콘을 "파비콘(favicon)" 이라고 한다.
파비콘.. 음 뭔가 생소한 단어이지만, 단어의 뜻을 보면 아! 하고 바로 이해할 수 있다.
크롬이나 익스플로어에서 자주 방문하는 사이트를 즐겨찾기에 추가하는 경우가 있는데,
그때 즐겨찾기 목록에서도 파비콘을 확인할 수 있다.
무튼 파비콘은 즐겨찾기와 아이콘의 합성어이다!
파비콘(favicon) = 즐겨찾기(favorities) + 아이콘(icon)
이 파비콘은 모든 웹사이트에서 적용할 수 있는데..
나같은 일반인들은 코딩을 할 줄 모르기 때문에 사이트를 뚝딱 만들 수는 없지만
티스토리 블로그에서는 적용이 가능하다.
< 파비콘 설정 및 등록 방법 - 티스토리 블로그 기준 >
우선 [티스토리블로그-설정-관리-블로그] 탭에 들어가면
파비콘 등록하는 화면이 나온다.
위 화면처럼 파비콘 - 파일형식 ico 라고
적혀있는 문구를 발견할 수 있는데,
파비콘의 경우 우리가 흔히 알고있는 jpg나 png파일로는 등록이 불가능하다.
그렇기 때문에 내가 원하는 이미지 파일이 있다고 하면
이 이미지를 반드시 ico 확장자로 변환을 해야한다!
이 부분은 아래 변환사이트와 함께 소개하겠음.
우선 파비콘을 만들기 위해 가장 먼저 해야하는 일은
step 1 >> 파비콘으로 사용할 나만의 이미지(로고) 만들기
로고를 만들어야 한다고 하면 디자인 프로그램
(ex. 포토샵, 일러스트, 스케치 등)을
필수로 다뤄야 한다고 알고있지만..
그런 프로그램이 다운로드 되어 있지 않은 상태이거나
or 다룰 줄 모른다면
파워포인트나 엑셀로도 만들 수 있다!
게다가 여기서 제공하는 아이콘들이 많아서
간단하게 색상이나 크기도 변형할 수 있다..!
아이콘에 들어가면 스마일 표정부터 시작해 동물 아이콘도 다양하다.
아이콘 삽입 후, 더블 클릭하면 색깔을 입힐 수 있다.
혹은 난 이런 아이콘말고 직접 그리고 싶다고 하면
간단한 도형으로 만들어도 무방하다.
+ 사이즈를 크게 만들면
용량제한이 있기 때문에 일단은 작게 만드는걸 추천
여기서 로고를 만들었다면
[로고-마우스 우클릭-그림으로 저장]
을 클릭한다!
그리고 png 혹은 jpg로 저장할 수 있는데
두개다 같은 이미지 확장자이지만
차이가 있다.
그래서 일단은 png로 저장하기!
step 2 >> 나만의 이미지(로고)를 ico 파일로 변환하기
이미지로 저장을 했다면 아래의 사이트에 접속한다.
https://convertio.co/kr/png-ico/
이 사이트는 내가 만든 png이미지를 ico파일로 변환해준다!
무.료 & NO 회원가입
위 사이트 화면 페이지가 나왔다면,
파일 선택에서 내가 저장한 이미지 파일 png를 불러온다.
그리고 ico로 변환하는건지 한번 더 체크
(왜냐면 이 사이트는 확장자 변환 사이트이기때문에 잘못 클릭하면
다른 확장자로 변환될 수도 있음)
그럼 이렇게 변환이 완료되고
하단의 파란색 다운로드 버튼을 클릭하면
내가 지정한 이미지의 ico파일이
저장된다! (생각보다 간단 ㅋ )
step 3 >> 티스토리 블로그에서 ico파일을 업로드
다시 이 화면으로 돌아와 파비콘 우측 불러오기 버튼을 클릭하면 끝!
+ 그리고 png 파일로 제작을 하면 깔끔하고 편한 이유가 있다.
파비콘을 네모 모양으로 만들면 상관없지만
원형이나 다른 모양으로 제작을 하려면
png 확장자와 jpg 확장자가 좀 차이가 있다.
jpg의 경우 아래 이미지 처럼
뒷 배경이 하얀색으로 지정이 되어 있기 때문에 좀 덜깔끔한 인상을 준다.
반면 png로 저장을 하게 되면
흰 배경이 투명으로 지정되기 때문에 더 깔끔한 느낌..!
그래서 가급적이면 png로 저장해서 변환하는게
더 예쁘고 깔끔한 파비콘을 제작할 수 있다!
나만의 블로그를 좀 더 관리하고 싶다면
파비콘을 제작하는 걸 추천한다.
방법이 그리 어렵지도 않다
'IT ::: it's IT' 카테고리의 다른 글
코스트코 내돈내산 가전, 삼성 공기청정기 블루스카이 5000 (0) | 2020.10.08 |
---|---|
코스트코 울산점에서 구매한 애플 매직마우스2 (0) | 2020.09.09 |
유튜브 영상편집 입문자 프로그램, 모바비(movavi) 결제! (+할인코드) (4) | 2020.06.28 |
티스토리 블로그 구글맵(GoogleMaps) 지도 첨부하는 방법! (0) | 2018.02.22 |
댓글