티스토리 파비콘(Favicon) 만들기

티스토리 관리자 화면 나만의 개성 있는 파비콘(Favicon) 만들기입니다.

파비콘을 통해 사용자는 여러 모든 사이트 중에서 당신의 웹 사이트를 훨씬 쉽게 알아볼 수 있도록 돕는 역할을 합니다.

즐겨 찾기에 보면 보통 아이콘으로 표시가 되는데 이 즐겨찾기 아이콘을 파비콘 을 적용하면 자신의 로그 아이콘으로

변경 할 수가 있습니다.

제공되는 멋진 파비콘 생성기로 사용자는 웹 사이트에 사용할 자신만의 파비콘을 쉽게 생성할 수 있습니다.

 

파비콘

파비콘(Favicon)은 브라우저의 주소 표시줄에 있는 웹 사이트 URL옆에 표시되는 작은 아이콘(16x16)입니다.

파비콘은 또한 사용자의 오픈탭 및 북마크 목록에 있는 웹 사이트 이름 옆에 당당히 표시되기도 합니다.

파비콘을 하기 위해서는 먼저 자신이 로고 이미지가 있어야 됩니다.

티스토리에 파비콘을 주사용 하기 위해서는 먼저 자신이 로고 이미지가 있어야 됩니다.

저번 내용에서 로고 만들기 내용을 참조 하세요.

https://in-lucky.tistory.com/28

티스토리 나의 로고 만들기

이미지를 만들어 두었습니다

그럼 이 이미지를 가지고 파비콘 을 만들어주는 사이트로 접속을

해보겠습니다

해당 사이트는 Favicon 및 앱 아이콘 생성기 사이트 입니다

로고 이미지를 자동으로 파비콘 으로 만들어 주는 사이트를 이용해서 파비콘을 만들어 보겠습니다.

◎파비콘 생성기 사이트로 이동 하겠습니다.

◎Favicon 및 앱 아이콘 생성기입니다.

https://www.favicon-generator.org/

Favicon & App Icon Generator

사용하는 방법은 간단합니다.

Favicon 및 앱 아이콘 생성기

◎파일선택을클릭하고

◎파비콘만들기를 클릭

 

◎Generate icons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps 

   웹, Android, Microsoft 및 iOS (iPhone 및 iPad) 앱용 아이콘 생성를 체크 합니다. 

   [생성 된 즐겨 찾기 아이콘을 다운로드하고]를 클릭합니다

   여러가지 파비콘이생성됩니다

파비콘생성

파일을 내컴퓨터 내사진에 다운로드 받고 파일을 압축을 풀고
열어보시면.

파비콘

◎Generate only 16x16 favicon.ico

   16x16 favicon.ico 만 생성에 체크하면 파비콘

   16x16 하나 이미지만 생성됩니다

[생성 된 즐겨 찾기 아이콘을 다운로드하고]를 클릭합니다

파일선택을 클릭해서 자신의 로고를 불러옵니다.

그런 다음 옆에 있는 크레이트 파비콘 이라는 버튼을 클릭하면 자동으로 만들어 줍니다.

 

작게 있을 때느 여기 위 이미지 처럼 선명하게 보이지 않을

수가 있습니다.

그래서 강조할 부분만 잘라서 파비콘을 만들면 더 효과적으로 넣을 수

있겠습니다.

파비콘 이미지를 만들었으니 이제 티스토리 관리자 로 이동을

해보겠습니다

 

티스토리 관리자 화면의에서 왼쪽 메뉴 중에 관리 아래에 있는

블로그를 클릭을 합니다.

관리에 블로그 페이지에 중간쯤 위치에 파비콘 을 넣을 수 있는 곳이

있습니다

파비콘 바로 위해 아이콘을 넣는 부분도 있습니다

파피콘은 즐겨찾기에 들어가는 이미지 아이콘 이고

위에 있는 아이콘은

티스토리에 댓글을 작성 할 때 관리자 이름 앞에 붙는 댓글 아이콘 으로

보시면 됩니다

 

▶관리자화면 ▶ 관리 ▶ 블로그

 

관리자 화면

아이콘에서 파일  불러오기를 클릭 합니다.

좀전의 파비콘 을 만들어주는 사이트에서 다양한 크기 아이콘을

생성했습니다 그중에 최적 사이즈 가로 세로 32x32 픽셀 이미지를 불러 오면 됩니다

파바콘32x32

 

파비콘에서 파일 불러오기를 클릭 합니다.

이번에는 파비콘을 넣기 위해서 파비콘 의 확장자가 ico 파일 입니다

불러오기를 클릭해 서 파비콘 ioc파일을 열기를 합니다

파비콘에 파비콘 이미지가 들어갔습니다

이 두 개의 [변경사항 저장]을 클릭하고 저장합니다.

티스토리를 다시시작하시거나 새로고침을 하시면 파비콘 생성을 확인 할수 있습니다