파비콘 만들기(포토샵 없이도 가능)

728x90

안녕하세요, 짱테크 입니다.

여러분 파비콘이 뭔지 아시나요?

홈페이지를 들어가면 해당 탭옆에 뜨는 아이콘을 파비콘이라고 하는데요.

Favorite + ICON의 합성어라고 해요.

저는 다운받고 방치해놨던 포토샵과 윈도우에서 제공해주는 기본 이모지를 활용해서

아주 쉽고 간단하게 만들었습니다.

5분정도 걸렸던거 같아요 ㅋㅋㅋㅋ

여튼!

오늘 파비콘 만들기 포스팅의 목표는 다음과 같습니다

💡 파비콘 만들기 목표
1. 블로그를 한방에 쉽게 나타내기
2. 포토샵 없이 만들기✨
3. 포토샵을 사용한다면 복잡하지 않고 빠르게 만들수 있기

Ctrl + F로 빠르게 보고싶은 내용 찾기

내가 포토샵을 사용한다 → 바로 아래에 있음

RNG파일 ICO파일 변환하기→ '하나' 검색

포토샵 사용하지 않는경우 → '둘' 검색

포토샵으로 파비콘 만들기

준비된 로고나 포토샵이 없으신분들은 스크롤을 아래로 내려주세요.

일단 윈도우에서 제공하는 기본 이모지가 뭐지???

하시는 분들이 꽤 있으실거 같은데 바로 알아볼게요.

윈도우버튼(게임할 때 짜증나는 그버튼 맞습니다.) + 마침표( . ) 를 동시에 눌러주시면

벌써 제가 뭘 썼는지 아시겠죠? ㅋㅋㅋ

'짱'을 나타내기에 아주 좋은 이모지가 있더라구요.

본인만의 로고를 준비해주신다음 포토샵을 열어주세요.

다음과 같이 세팅해주시면 됩니다.

투명한 배경사용을 해주셔야 파비콘 적용시 하얀 배경이 안나와요.

작업할 로고물을 가지고 오신다음 배경 제거 작업을 해주세요.

투명해진 배경 , 밋밋해서 기울기를 추가하고 크기를 조금 더 키웠습니다.

이후에 저는 기울기를 추가하고 잘 안 보일까봐 크기를 조금 더 키워줬어요.

이제 저장하면 되는데요,

이때 주의하실점은 웹용으로 저장하기를 해주셔야 합니다.

(파일→내보내기→ 웹용으로 저장)

PNG 형식으로 저장해주세요

자이제 PNG 파일을 ICO 파일로 변환해준다음에 파비콘으로 적용해주시면 끝이나는데요.

포토샵을 이용하신 분들도

포토샵을 이용하지 않은 분들도 해당 부분을 참고해주시기 바랍니다.

https://www.xiconeditor.com/

해당 사이트를 이용해봅시다.

X-Icon Editor

Define the Favicon To indicate that the icon is available to the browser, use the tag in the element of the page, pointing to the location of the favicon: Optimize Performance In order to optimize network performance, please use the following best pra

www.xiconeditor.com