티스토리 블로그를 세팅하다 보면, 파비콘 설정하는 부분이 있다.
위 그림에서 빨간색으로 표시한 부분에 파비콘을 만들어 넣어주면 바로 위의 아이콘처럼 표시가 된다.
파비콘이란 무엇인가?
위의 그림과 같이 웹브라우저 주소창에 표시되는 아이콘이며, 현재는 티스토리 파비콘이 표시되어 있으나 나의 파비콘을 만들어 넣어주면 나의 파비콘으로 바뀌게 되는 것이다.
파비콘은 즐겨찾기(favorites)와 아이콘(icon)의 합성어로 주소창에 표시되는 아이콘이며, 16x16 픽셀 크기로 만들어서 이름과 확장자는 favicon.ico 으로 만들면 된다.
먼저 포토샵이나 그밖에 도구로 구조가 간단한 적당한 크기의 jpg, png, gif 이미지를 만들면 되는데, 이미지를 너무 복잡하게 만들면 16x16 픽셀로 표현이 안되기 때문에 복잡하게 만들면 안된다.
만들어진 이미지를 파비콘 형태의 ico 파일로 만들어 주는 웹사이트에서 변환을 하면 된다.
1. 파비콘으로 변환해주는 사이트 : www.degraeve.com/favicon/
파비콘 제너레이터(Favicon Generator)에서 직접 색깔을 지정하고 붓으로 그림을 그려서 만들거나, 'Import a picture'에서 만들어진 이미지 파일을 선택하고 'upload image' 버튼을 클릭하여 만들면 됩니다.
'Crop picture' 버튼을 클릭한 다음, 이미지에서 파비콘에 사용할 영역의 크기를 조절합니다.
업로드한 이미지가 '파비콘 제너레이터'에 축소되어 들어갔습니다.
'Make Favicon!' 버튼을 클릭합니다.
위의 그림처럼 조그만 파비콘이 완성되었습니다.
파비콘을 클릭하면 다운로드가 됩니다.
다운로드 된 파비콘 파일을 티스토리에 적용시킨 결과입니다.
파비콘과 웹브라우저 주소창에 파비콘이 표시된 모습이 보입니다.
2. 다양한 여러개의 파일로 만들어 주는 사이트 : www.favicon-generator.org/
Favicon & App Icon Generator
Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.
www.favicon-generator.org
이번 사이트는 16x16 픽셀 파비콘만 만들 수도 있고, 다양한 종류의 파비콘과 아이콘을 동시에 만들 수도 있습니다.
위의 사이트에서 만들어진 파비콘과 아이콘 파일은 압축형태로 다운로드됩니다.
위의 그림은 압축을 푼 파일에서 만들어진 다양한 파일을 보여줍니다.
이번 사이트에서는 키워드를 입력하여 파비콘 갤러리를 검색할 수도 있습니다.
'food'로 검색을 해보았습니다.
'food'로 검색한 파비콘 결과입니다.
파비콘을 다운로드 받으려면 이미지위의 작은 다운로드 표시를 클릭하면 됩니다.
3. 파비콘으로 변환해주는 사이트 : tools.dynamicdrive.com/favicon/
Dynamic Drive- FavIcon Generator
FavIcon Generator Use this online tool to easily create a favicon (favorites icon) for your site. A favicon is a small, 16x16 image that is shown inside the browser's location bar and bookmark menu when your site is called up. It is a good way to brand you
tools.dynamicdrive.com
이번 사이트는 위의 그림의 ① ② ③ 번호순으로 진행하면 파비콘을 만들고 다운로드 할 수 있습니다.