스마트폰에서 더욱 중요해진 웹사이트 아이콘 자동 생성 서비스
홈페이지나 블로그 등 웹사이트를 운영하는 경우 해당 홈페이지의 타이틀 만큼이나 중요한 것이 아이콘이다.
특히 스마트폰에서는 특정 웹사이트를 즐겨찾기하는 경우 일반 앱과 같이 아이콘이 바탕화면에 만들어지므로 아이콘의 중요성은 이전보다 더욱 무게감이 생겼다.
위 이미지는 PC에서 즐겨찾기 폴더를 캡쳐한 것이다. 보다시피 웹사이트 아이콘인 파비콘(favicon)이 준비되어 있는 사이트는 해당 아이콘이 보이지만 그렇지 않은 곳은 웹브라우저 기본 아이콘이 표시된다. 당연히 아이콘이 있는 경우에 찾기가 더 쉽고, 이 화면은 스마트폰에서도 마찬가지다.
MS 윈도우, 구글 안드로이드, 애플 iOS 등 다양한 운영체제를 사용하는 디바이스에 모두 대응이 되는 아이콘과 파비콘을 한번에 만들어주는 'Favicon & App Icon Generator' 서비스를 소개한다.
서비스에 접속해서 아이콘으로 사용할 이미지 파일을 업로드하고 [Create Favicon] 버튼 클릭 한번으로 다양한 사이즈의 아이콘과 이를 웹사이트에 등록할 수 있는 스크립트까지 한번에 만들어 주는 아주 유용한 서비스다.
아이콘으로 사용할 이미지는 아래의 몇가지 사항을 지켜주는 것이 좋다.
- 정사각형
- 가로/세로 최소 300px 이상
- 이미지 타입 : PNG, JPG
- 가급적 복잡하지 않은 단순한 디자인
이미지 파일을 등록한 후 [Create Favicon] 버튼을 클릭하면 위와 같은 결과 화면을 보게 된다. 상단에 내가 올린 이미지가 좌측에 보이고 그 옆의 'Donwload the generated favicon' 을 클릭하면 다양한 환경에 맞게 자동 생성된 파일이 압축된 파일을 얻을 수 있다.
다운로드 받은 파일의 압축을 풀어보면 위와 같이 다양한 크기의 아이콘과 이를 적용하기 위해 필요한 몇몇 파일을 확인할 수 있다. 이 파일들을 홈페이지를 저장한 웹호스팅 서비스에 올리면 된다.
위 결과 화면 중 회색 박스 가득 채운 스크립트를 복사해서 원하는 홈페이지나 블로그의 헤더(header) 태그 안쪽에 붙여 넣으면 된다. 스크립트 적용 방법을 모르면 홈페이지를 보관하고 있는 웹호스팅 회사나 홈페이지를 제작한 업체에 문의하면 된다.
티스토리 블로그의 경우 관리자 -> 'HTML/CSS 편집' -> '파일업로드'에서 각각 업르도하면 된다. 업로드된 파일에서 오른쪽 마우스를 클릭하여 [속성]을 보면 해당 이미지의 경로(url)가 보인다. 이 경로(url)를 스크립트의 경로에 삽입해야 한다.
티스토리 블로그의 경우 관리자 -> HTML/CSS 편집 에 들어가서, '</head>' 위에 붙여넣기 하면 된다. 네이버 블로그는 이렇게 적용하는 것이 불가능하다.
이렇게 적용을 하고나면 웹브라우저의 탭에 업로드한 아이콘이 표시된다. 또한 즐겨찾기를 하거나 스마트폰에서 홈 화면에 바로가기를 설치하면 역시 아이콘이 표시된다.
