포토샵으로 파비콘 제작하고 티스토리 또는 홈페이지 적용

포토샵으로 파비콘 제작하고 티스토리 또는 홈페이지 적용

2016. 1. 3. 12:38ㆍIT, INTERNET

인터넷 서핑을 하면서 접하게 되는 다양한 홈페이지들은 파비콘이라는 아이콘으로 브라우저 상단 탭에서 보여지게 되는데 이 부분을 설정하기 위해서는 favicon.ico 파일을 제작한 뒤 티스토리 또는 홈페이지에 업로드 한 뒤 HTML에 한 줄의 태그를 만들어줘야 합니다.

먼저 아이콘으로 만들기 위해서 포토샵을 활용해서 favicon.ico 파일을 제작하고 티스토리 블로그 또는 일반 홈페이지에 적용하는 단계까지 설명하겠습니다.

▲ 포토샵으로 파비콘을 만들 수 있는 플러그인을 제공하는 홈페이지로 이동한 뒤 사용하는 윈도우 버전에 맞는 버전을 다운로드 합니다.

▲ 다운로드한 파일의 압축을 풀고 확장자가 '8bi'인 파일을 선택한 뒤 [Ctrl + C]키를 눌러 복사합니다.

▲ 포토샵 플러그인 폴더를 찾아서 [Ctrl + V]키를 눌러 붙여 넣습니다.

포토샵 버전에 따라 플러그인 폴더의 경로가 다릅니다. 64비트는 Program Files 폴더 하위에 Adobe 폴더 내부에 존재하며 32비트는 Program Files (x86) 폴더의 Adobe 하위 폴더에 위치합니다.

현재 포스트에서 설명하는 '포토샵 CC 2015 64 비트'의 풀 경로는 다음과 같습니다.

C:\Program Files\Adobe\Adobe Photoshop CC 2015\Plug-ins

▲ 포토샵을 실행하고 'Help > About Plug-in > ICO Windows Icon/Favicon…'으로 표시되면 설치가 완료된 것입니다.

▲ [Ctrl + N] 단축키를 누른 뒤 이름은 favicon / Width와 Height는 16픽셀 / 배경은 Transparent로 투명하게 설정합니다.

▲ 배경에 색을 넣고 이니셜 H만 넣어 간단하게 파비콘을 만들었는데요.

제작이 완료되었으면 포토샵 메뉴에서 File > Save As를 클릭해서 저장을 하겠습니다.

▲ 파일형식을 ICO Windows Icon/Favicon(*.ICO)를 선택하고 [저장] 버튼을 클릭합니다.

▲ 팝업창이 뜨면 Standard ICO로 지정하고 [OK] 버튼을 클릭합니다.

| 티스토리 또는 홈페이지에 적용

▲ 티스토리 관리 페이지로 이동 후 [환경설정]-[기본 정보] 메뉴에서 아이콘 항목에 파비콘 파일을 지정한 뒤 [저장] 버튼을 눌러줍니다.

스킨의 종류에 따라 위와 같이 해도 적용이 안 되는 경우가 있는데 그럴 때는 일반 홈페이지에 적용하는 방법으로 직접 HTML 소스를 수정해주면 됩니다.

▲ [꾸미기]-[HTML/CSS 편집] 메뉴에서 [파일업로드] 탭을 선택한 뒤 제작한 파비콘을 추가합니다.

그리고 등록된 파일에 마우스 오른쪽 클릭 후 [링크 주소 복사]를 클릭합니다.

▲ <head> 태그 안에 <link rel = "shortcut icon" href = "복사한 주소">를 넣어주고 [저장]버튼을 클릭합니다.

▲ 티스토리 블로그에 설정한 파비콘이 적용되었습니다.

※ 일반 홈페이지는 FTP 프로그램을 활용해서 서버에 업로드 후 <link rel = "shortcut icon" href = "/favicon.ico"> 코드를 <head> 태그 안에 넣어줍니다.

홀리지