개발일지

파비콘 만들기 - 사이트 추천 / 티스토리 파비콘 만들기

숲속길 2023. 3. 25.
728x90
반응형

파비콘 만들기 - 사이트 추천 / 티스토리 파비콘 만들기

 

목차

  1. 파비콘이란?
  2. 파비콘 생성 예시
  3. 파워포인트로 파비콘 만들기
  4. 아이콘 다운로드 받아서 파비콘 만들기
  5. 티스토리에 파비콘 설치 방법

 

 

1. 파비콘이란?

Favorite + Icon = Favicon 

웹사이트 또는 웹 페이지를 대표하기 위해 웹 브라우저에서 사용되는 16x16 픽셀의 작은 이미지이다. 

확장자는 PNG, GIF 또는 ICO를 사용한다.

 

웹사이트를 브랜딩하는데 도움을 준다. 

다른 웹사이트를 함께 띄웠을 때 내 사이트 고유의 파비콘을 갖고 있다면 식별이 쉽다. 

내 블로그를 브랜딩 한다는 하는 방법으로 사용할 수 있기 때문에 블로그를 전문적으로 하려고 한다면 추천할만한 기능이다. 

1.1 파비콘 특징

  • 브라우저 종류에 따라 적용 가능한 확장자가 다르다. 확장자 .ICO는 거의 모든 브라우저에서 사용 가능하다.
  • 사용 목적에 따라 아이콘 사이즈가 달라진다. 

 

2. 파비콘 생성 예시

파비콘 생성 예시

 

3. 파워포인트로 파비콘 만들기

  1. 정사각형 틀을 만든다.
  2. 정사각형 틀 안에서 이미지, 글자를 넣는다.
  3. 파비콘(.ico)파일로 변환한다.
  4. Import를 클릭 후 파워포인트에서 만든 그림파일을 넣는다.
  5. Export 클릭 후 파일을 다운 받는다. 티스토리에서는 64x64, 32x32, 16x16 사이즈를 지원한다. 

파비콘 제작사이트 추천

 

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

 

3.1 X-Icon Editor 사용법

파비콘 만들기
Import로 파워포인트 파일 업로드 후 원하는 파비콘 크기 선택 후 Export를 클릭하여 다운로드받는다.

 

3.2 파비콘 만들 때 주의점

단순하게 만들어야 한다.

보이는 아이콘이 작기 때문에 여러 색깔을 많이 쓰거나 글자가 많으면 소용이 없다.

 

4. 다운로드 받아 파비콘 만들기

  1. 아이콘파인더에 들어간다.
  2. 검색어 입력한다.
  3. 무료로 사용 가능한 free 클릭
  4. 아이콘 선택하기
  5. 확장자명 .ICO를 선택하여 다운로드한다.

4.1 아이콘 파인더 사용법

https://www.iconfinder.com/

 

7,300,000+ free and premium vector icons, illustrations and 3D illustrations

Iconfinder is the world's largest marketplace for icons, illustrations and 3D illustrations in SVG, AI, and PNG format.

www.iconfinder.com

파비콘만들기
접속 후 검색어를 입력한다.
파비콘 만들기
무료로 사용할 수 있는 free선택
파비콘 만들기
확장자 ICO를 선택한 후 다운로드한다.

 

5. 티스토리에 파비콘 설치 방법

관리자모드 > 관리 > 블로그 > 파비콘 불러오기 > 변경사항 저장

티스토리 파비콘
관리자모드 > 관리 > 블로그 > 파비콘 업로드 후 변경사항 저장을 꼭 눌러준다.

 

 

 

 

728x90
반응형

댓글

추천 글