프로젝트 작업일
블로그 게시일
[Knowhow]
파비콘 만들기
파비콘 만들기
개요
홈페이지를 만들때 로고를 웹페이지에 표시하기 위해 이미지 작업을 하는데 있어 ico 파일 확장명의 작업이 필요했다. 보통 포토샵에서 .ico 파일을 별도의 라이브러리가 필요해서 설치하기가 어렵다. 또한 PWA를 위한 아이콘 사이즈마다 작업하기도 여간 귀찮은 일이 아니다. 해서 구글링을 하던 중 이미지 파일을 각 사이즈별로 작업을 도와주는 사이트를 알아내었다.
파비콘(Favicon)이란?
파비콘(Favicon)은 “Favorite Icon”의 줄임말로, 웹사이트를 대표하는 작은 아이콘을 의미한다. 주로 웹 브라우저의 탭, 주소 표시줄, 북마크 목록, 검색 결과 등에서 웹사이트 이름 옆에 표시되어 사용자가 해당 웹사이트를 시각적으로 쉽게 식별할 수 있도록 만들어 준다.
파비콘의 중요성
파비콘은 단순히 작은 이미지에 불과하지만, 웹사이트의 전반적인 인상과 사용자 경험에 영향을 준다.
- 브랜드 인식 및 가시성 강화: 파비콘은 웹사이트의 아이덴티티를 대표하는 시각적 요소다. 사용자는 파비콘을 통해 로고나 아이콘을 쉽게 인식하고, 일관된 브랜드 아이덴티티를 경험할 수 있다. 1.
- 사용자 경험(UX) 개선: 웹사이트 북마크, 탭, 주소창 등에서 파비콘이 표시되면 사용자가 웹사이트를 쉽게 식별하고 관리할 수 있다. 이를 통해 사용자는 원하는 웹사이트를 더 쉽게 찾을 수 있으며, 전반적인 웹사이트 사용자 경험을 향상시킬 수 있다 2, 3.
- 재방문 유도: 파비콘은 강력한 브랜드 식별자이므로, 검색 결과나 브라우저 방문 기록에서 내 사이트를 돋보이게 하여 사용자가 더 자주 방문하도록 유도할 수 있다 4.
- 검색 엔진 최적화(SEO)에 미치는 간접적인 영향: 파비콘은 직접적으로 SEO에 영향을 미치지는 않지만, 간접적으로 사이트의 클릭률(CTR)을 높일 수 있다. 검색 결과에 파비콘이 함께 표시되면 사용자가 눈에 띄는 사이트를 클릭할 확률이 높아지며, 이는 결국 검색 순위에 긍정적인 영향을 줄 수 있다 4, 2.
파비콘 만들기
디자인 파일 만들기
먼저 파비콘을 만들기 위해서 대표 디자인 파일을 디자인 프로그램을 통해 이미지 파일을 만드는 것이 좋다.
- 이미지 크기는 512 x 512 px로 1:1 비율의 이미지를 만드는 것이 좋다.
- 파일 형식은 png파일로 만들어 두는 것을 권장한다.
- 파비콘은 일반적으로 16 x 16 px로 작게 보여지므로 대비가 뚜렷하고 간단한 모양으로 작업하는 것이 안정적이다.
파비콘 생성하기
-
사이트 접속하기 Favicon & App Icon Generator
-
image 입력란에 디자인 파일을 업로드한 후 Create Favicon 버튼을 클릭
-
Download the generated favicon을 눌러 생성된 파비콘 파일들을 저장
-
저장된 파일을 압축을 풀고 홈페이지 서버에 index.html이 있는 폴더에 올린다.
-
하단의 코드를 복사하기.
파비콘 적용하기
- 저장된 파일을 웹사이트 루트에 저장을 한다.
- 아래 코드를
<head>태그 안에 붙여넣는다.
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">관련 사이트
대표 사이트
인용 사이트
#Web#Favicon#SEO