Favicon=Favorites+Icon
구글, 네이버 등 웹서핑을 하다 보면 탭 타이틀, 웹 브라우저 창에 조그만 아이콘이 보이죠? 홈페이지를 꾸미는데 필수로 하다시피 한 파비콘(favicon)은 favorites과 icon의 합성어로 즐겨찾기에 추가하거나, 웹서핑 시 표시되는 아이콘을 의미합니다.
작은 시도지만 아이콘 추가만으로 홈페이지 개성을 드러낼 수 있을뿐더러, 특히 브랜드 로고와도 같이 웹 identity를 표현하는 대표적인 방법이지요. 전 데스크탑, 모바일 브라우저를 지원하는 방법도 있지만 제일 간단하게 파비콘을 생성 및 적용하는 방법을 알아볼게요.
파비콘 만들기
우선, 원하는 이미지(png, jpg, gif)를 파비콘의 파일 확장자인 .ico로 변환 혹은 생성해 주어야 합니다. 웹 브라우저에 최적화된 사이즈는 1:1 비율의 16x16px입니다. 유용한 몇 사이트 알려 드릴게요! 파비콘은 적용하는 것보다 어떤 이미지를 쓸지 고심하는 데 시간이 더 걸리는 거 같아요. 파비콘을 만들었으면 favicon.ico라는 이름으로 저장해 줍니다.
🔸 Favicon & App Icon Generator : 이미지 파일 형식 변환 및 테마/색상별로 파비콘을 찾을 수 있는 사이트
🔸 Favicon.cc : 이미지 파일 형식 변환 (Import Image)및 파비콘을 직접 도트로 찍어서 만들 수 있는 에디터(Create New Favicon)입니다.
홈페이지 적용
자- 파비콘을 생성했다면 홈페이지 최상위 루트 디렉토리에 업로드 후, html파일 <head></head> 사이에 아래 코드를 추가 시켜주면 됩니다. 기존 favicon.ico 파일이 이미 존재한다면 삭제해 주세요. 사이트 메인 서버에 안 올리고 다른 폴더/서버에 업로드했다면 파일 경로에 따라 href=뒤에 주소가 달라질 수 있지만 보통 도메인 최상위 폴더에 업로드합니다.
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
티스토리 블로그 적용
티스토리의 경우 블로그 관리 페이지에서 바로 파비콘을 추가할 수 있기 때문에 적용이 쉬워요.
왼쪽 메뉴 > 관리 > 블로그 > 파비콘 추가 > 변경사항 저장
파비콘 적용 확인하기
파비콘이 잘 적용되었으면 보통 새로고침 후 바로 웹 탭이나 브라우저에 변경된 파비콘을 보실 수 있습니다. 즐겨찾기에 추가하여 아이콘이 잘 변경되었는 지도 확인해 주세요. 그럼에도 적용이 안 되었다면 ctrl + F5를 눌러 홈페이지를 새로 불러와 주세요. 모바일/데스크탑 운영체제별 파비콘이 어떻게 노출되는 지 궁금하다면 RealFaviconGenerator에서 홈페이지 주소를 입력하여 진단해 볼 수 있습니다.
복잡해 보이지만 간단한 파비콘 만들기 방법이었습니다. 모두 새해 복 많이 받으세요😊
