티스토리 뷰
파비콘은 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘입니다. 최근에는 네이버 검색 결과에 파비콘이 노출되면서 파비콘의 중요성이 더 높아졌습니다. 이 글에서는 파비콘을 만들고 웹사이트에 적용하는 방법에 대해 알아보겠습니다.
파비콘이란?
파비콘은 웹 브라우저의 주소창에 나타나는 작은 아이콘으로, 웹사이트를 대표하는 역할을 합니다.
파비콘 요약 : 확장자명은. ico 크기는 16*16이 보통입니다.
왜 파비콘이 중요한가?
파비콘은 사용자에게 웹사이트를 더 쉽게 식별할 수 있는 기회를 제공합니다. 최근에는 다양한 디바이스에서 웹사이트가 열리기 때문에, 다양한 크기의 파비콘을 사용하는 것이 좋습니다.
16*16 사이즈의 파비콘은 깨짐 현상이 일어나기 쉽습니다. 따라서 다양한 크기의 파비콘을 만들어두고, 기기에 맞게 출력이 되도록 웹사이트를 구조화한다면 가독성과 브랜딩에 긍정적인 영향이 있을 겁니다.
파비콘 만드는 방법
1. 이미지 생성: 원본 192x192 픽셀의 이미지를 만들어 png나 jpg로 내려받아 둡니다.
이미지 생성은 포토샵을 사용해도 되며, 간단하게 무료 이미지 툴을 사용해도 됩니다. 개인적으로는 회원가입만 하면 바로 쓸 수 있는 미리캔버스 툴을 추천합니다.
2. 파비콘 생성 무료 사이트 이용: www.favicon-generator.org 사이트에 접속합니다.
3. 이미지 업로드: 만든 이미지를 업로드하고 "Create Favicon" 버튼을 클릭합니다.
*내려받기 시 선택 옵션은 2가지가 있습니다. 단지 16*16 크기의 단순 파비콘만 다운로드 받으려면 두 번째 옵션을 선택해도 무방합니다.
4. 다운로드: 생성된 파비콘 파일들을 다운로드합니다.
[Download the generated favicon] 글씨가 살짝 파란색인 것을 확인할 수 있습니다. 안 눌릴 것처럼 생겼지만, 설명이 아니라 버튼이니 눌러줍니다.
다운로드한 파비콘 파일들은 압축 폴더 형태로 저장되어 있습니다. 압축을 풀어보면 다양한 크기로 저장되어 있는 것을 확인할 수 있습니다.
5. 웹사이트 내 HTML 코드 삽입: 홈페이지의 <head> 태그 사이에 코드를 삽입합니다.
<link rel="shortcut icon" href="각자 상황에 알맞은 경로를 넣으시면 됩니다~">
<head>~</head> 사이에 위 파비콘 만들기 사이트에 나온 HTML 코드들을 다 넣어주면 됩니다.
주의할 점은
1). href="속성값"에는 각자 상황에 알맞은 경로를 넣으면 되고,
2). 위의 rel="shortcut icon" 속성이 들어간 링크 태그 한 줄을 추가로 넣어주어야 한다는 것입니다.
만약 워드프레스 등의 웹사이트가 아니라 타사에서 호스팅이 지원되는 블로그라면 내려받은 파일 중 적절한 크기의 아이콘만 업로드해주면 됩니다.
왜 다양한 크기의 파비콘을 사용해야 하는가?
디바이스의 다양성에 맞춰 다양한 크기의 파비콘을 제공하면, 각 디바이스에서 더 선명하게 나타날 수 있습니다. 이로써 사용자 경험을 향상할 수 있습니다.
마무리
파비콘은 웹사이트의 브랜딩에 중요한 부분을 차지하고 있습니다. 다양한 크기의 파비콘을 적용하여 사용자에게 더 나은 시각적 경험을 제공하시기 바랍니다.
'유용한팁' 카테고리의 다른 글
| 인터넷 설치 가능 지역 조회하기 | KT LG유플러스 SKT 통신 3사 (0) | 2024.01.30 |
|---|---|
| 보람상조 가격 및 가입 이유 (0) | 2024.01.29 |
| K 패스 교통카드 발급 신청방법 | K-pass 전환 방법 알아보기 (0) | 2024.01.25 |
| 2024 설날 따뜻한 인사말 좋은글 모음 | 가족 친구 동료 친척 지인 (0) | 2024.01.24 |
| 일본어 인사말 모음 | 기초 회화 (0) | 2024.01.19 |