티스토리 파비콘(favicon) 만들기 및 적용 방법

안녕하세요! 개발쉽게하자곰 입니다.

 

오늘은 티스토리 블로그에 파비콘(favicon) 만드는 방법과 적용방법에 대해서 알아보려고 합니다.

 

우선 파비콘의 개념 간단히 설명하고 본론으로 넘어가도록 하겠습니다.

 

 

파비콘(favicon) 이란?

 

파비콘(영어: favicon, 'favorites + icon') 또는 파비콘이란 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다.

파비콘은 브라우저의 주소 표시줄에서 사이트 URL 옆에 표시되는 작은 16x16 아이콘 파일입니다. 또한 사용자의 열린 탭 목록과 책갈피 목록에서 사이트 이름 옆에 표시되는 경우가 많아 사용자가 다른 사이트를 쉽게 식별할 수 있습니다.

 

파비콘이 필요한 이유

 

 

작은 아이콘이지만 웹사이트를 보다 기억하기 쉽게 해주는 역할을 합니다.

 

위에 설명했다시피 웹사이트를 대표하는 아이콘인 만큼 브랜딩에 효과적입니다.

 

귀엽습니다.

 

파비콘 예

 

파비콘 예

 

위의 두 사진을 보시면 파비콘이 적용된 모습을 보실 수 있는데요

 

즐겨찾기 및 북마크 바, 심지어 탭에 보이는 이미지라고 할 수 있겠습니다.

 

만들기

 

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

Favicon & App Icon Generator

위의 링크로 들어가시게 되면 

이렇게 나오는 모습을 볼 수 있습니다.

 

이미지는 PNG형식의 이미지 파일을 선호하며 정사각형의 아이콘이 좋겠습니다.

 

파일 선택으로 해당하는 파일을 선택해주시고 Create Favicon을 눌러주세요.

저는 위의 이미지로 하겠습니다.

빨간색 표기된 부분을 클릭해주시면 zip 파일이 다운로드됩니다.

 

다운받은 파일을 압축 풀기로 풀어주시면

 

다양한 크기의 아이콘들이 있는 모습을 보실 수 있습니다.

 

지금 우리에게 필요한 건 ico 형식의 파일입니다.

 

favicon은 gif, png 같은 형식의 파일도 지원하지만 모든 버전의 Internet Explorer에서는 여전히 파비콘을 ICO 파일( Microsoft 아이콘 형식 )으로 저장해야 합니다. 

 

파비콘을 지원하는 브라우저 정보를 보자면

출처-위키백과

ico 형식의 파일이 익스플로러 저버 전에서도 지원된다는 점에서 우린 ico형식의 파일이 필요합니다.

 

적용 방법

우선적으로 티스토리 블로그 관리 탭을 열어야 합니다.

 

밑부분에 아이콘과 파비콘을 추가해줄 겁니다.

 

불러오기를 눌러 아이콘은 32x32 사이즈와 64x64 사이즈를 최적의 사이즈라고 표기되어있습니다.

 

저는 32x32 사이즈로 불러왔습니다.

 

아래의 파비콘은 파일 형식 ICO라고 적혀 있습니다.

 

불러오기 하신 후 전에 압축 풀었던 파일 보시면 하나의 아이콘 밖에 없을 겁니다 ㅎㅎ

 

변경사항을 저장하시고 블로그를 새로고침 해주시면 끝입니다.

 

어때요? 조그마한 아이콘만 넣었을 뿐인데 블로그의 분위기가 바뀌지 않나요??ㅎㅎ

 

파비콘에 평소에 관심 없으셨던 분들 있으셨던 분들 다들 파비콘 적용하고 달라진 블로그 생활 즐겨보아요 ㅎㅎ

 

이상으로 마치겠습니다 좋은 하루 보내세요!