티스토리 뷰
안녕하세요 AimHo 입니다.
블로그를 시작한지 열흘이 다되어 가는데...블로그를 너무 안꾸몄네요
스킨만 약간 수정한거 말고 거의 기본 상태입니다.
그래서 제 블로그의 파비콘(Favicon)을 만들고 적용까지 시켜보도록 하겠습니다.
파비콘이란?
파비콘은 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘입니다.
주소창 뿐만 아니라 즐겨찾기, 최근 방문 사이트 등 많은 곳에서 사용됩니다. 쉽게 생각해서 웹사이트를 대표하는 로고라고 생각하시면 됩니다.
아래 사진은 크롬 브라우저에서 보이는 파비콘 예시입니다.
파비콘의 아이콘 크기는 16x16 / 32x32 / 48x48 / 64x64 픽셀이 될 수 있고, 8비트, 24비트, 32비트 색상이 가능합니다. 보통 아래와 같이 용도에 따라 파비콘을 제작합니다.
- 16x16 - IE9 주소 표시줄, 고정된(pinned) 사이트의 점프목록 / 툴바 / 오버레이
- 32x32 - IE의 새로운 탭 페이지, 윈도우7 이상에서 작업 표시줄 단추, Safari 나중에 읽기 사이드바
- 48x48 - 윈도우즈 사이트 아이콘
좀 더 완벽하게 설정하길 원하고 1~3kb 정도 용량 증가가 상관없다면 아래 크기로 사용해도 된다고 합니다.
- 24x24 - IE9 고정된(pinned) 사이트 브라우저 UI
- 64x64 - 윈도우즈 사이트 아이콘, HiDPI/Retina에서 Safari 나중에 읽기 사이드바
그럼 이제 파비콘을 만들고 적용해보도록 하겠습니다.
파비콘 적용
저는 포토샵으로 만들었는데 각자 편하신걸로 만드시면 됩니다.
우선 32x32 크기의 캔버스를 만들고 바탕을 투명으로 만들었습니다.
포토샵에 익숙하지 않아서 투명으로 만드는 법 고생 좀 했는데
그냥 레이어마스크 추가해서 다 지워버리면 되더군요ㅎ
제 블로그의 AimHo에서 Aim은 '조준'이라는 뜻인데요 보통 '+' 이렇게 생겼습니다. FPS게임을 하시는 분들은 많이 보셨을겁니다 그래서 Aim과 제 블로그 타이틀 AimHo의 알파벳 'A', 'H'를 가지고 파비콘을 만들었습니다.
처음에는 왼쪽 형태로 만들고 블로그에 파비콘을 등록했는데 프로필에 마땅한 사진이 없어서 만든 파비콘을 프로필에도 적용했습니다. 그런데 오른쪽 형태처럼 동그랗게 나오더라구요 보니까 오른쪽 형태가 더 이뻐서 추가로 수정을 했습니다.
티스토리에서 파비콘을 적용한다면 만든 아이콘을 JPG, GIF, PNG 형식으로 저장하면 되지만 직접 제작한 웹사이트에 파비콘을 적용하고 싶으시면 ICO 형식의 파일이 필요합니다.
(일반적인 이미지 - JPG, 움직이는 이미지 - GIF, 투명도가 포함된 이미지 - PNG)
ICO형식은 포토샵에서 지원하지 않습니다. 그럼 어떻게 만드느냐??
이미지 파일을 해당 형식으로 생성해주는 사이트가 있습니다.
빨간 네모친 부분에 제작한 파비콘 파일을 올리거나 적용할 웹 URL을 입력하시면
오른쪽 부분에 ICO 파일로 자동변환해서 다운로드 할 수 있게 표시됩니다.
티스토리는 블로그관리에서 만들어놓은 파비콘 파일을 추가해주시면 끝입니다.
그러면 개인 웹사이트나 홈페이지에는 어떤 작업이 추가로 필요할까요?
일단 도메인의 루트폴더에 만든 파비콘 이미지를 넣습니다.
그리고 index.html의 <head> 부분에 해당 파비콘을 사용하겠다는 코드를 추가해야 합니다.
저는 <head>맨 마지막 줄에 해당 코드를 추가했습니다.
<link rel="icon" type="image/png" sizes="32x32" href="AimHo-favicon-2018.ico">
이제 ftp에 업로드하고 사이트를 새로고침 하면 이쁘게 적용된 것을 확인하실 수 있습니다.
이상 파비콘 만들고 적용까지 완벽하게 이루어졌네요 다들 이쁜 파비콘 만들어보세요!!
