파비콘(Favicon)이란 무엇이고 어떻게 만들까?
웹사이트를 제작할 때, 많은 사람들이 사소한 디테일이지만 상당한 영향을 미치는 요소인 파비콘을 간과하는 경향이 있습니다. 웹 디자인에 이 작은 요소를 추가하는 것만으로도 웹사이트 방문자들에게 강한 인상을 남길 수 있으니 이제부터 살펴볼 파비콘에 대한 이야기를 눈 여겨 보세요.
파비콘이 어떻게 웹사이트 디자인에서 이런 강력한 요소가 될 수 있는 걸까요? 오늘은 파비콘이란 무엇인지 그리고 왜 중요한지 알아보고 파비콘을 만들기 위해 필요한 모든 것을 설명해 보겠습니다.
파비콘(Favicon)이란?
파비콘(Favicon)이란 웹사이트 또는 웹 페이지를 대표하기 위해 웹 브라우저에서 사용되는 16x16 픽셀의 작은 이미지입니다. 즐겨찾기 아이콘(favorite icon)의 줄임말로 주로 웹 브라우저 상단에 있는 탭에 표시되는데요. 그 외에도 브라우저의 북마크바나 방문 기록, 검색 결과에서 페이지 url과 함께 표시되기도 합니다.
심지어 Google Chrome과 같은 경우에는 브라우저 홈 화면에 나타나기도 합니다. 즉, 파비콘을 만들면 웹사이트의 아이콘으로 여겨지거나 사용자들이 웹상에서 내 웹사이트임을 알아볼 수 있는 시각적인 식별자가 됩니다.
파비콘의 역사
최초의 파비콘은 Microsoft가 1999년에 출시된 Internet Explorer 5에서 소개한 것이었습니다. 이때 소개된 파비콘은 ICO 형식의 16x16 픽셀 아이콘으로 웹사이트의 루트 디렉토리에 추가되어 브라우저에 자동으로 표시될 수 있었습니다.
하지만 웹사이트를 표현하는 데 작은 아이콘을 사용한다는 아이디어는 1999년 훨씬 전으로 거슬러 올라갑니다. 그래픽 브라우저가 일반적으로 사용되기 전인 초기 웹에서는 ‘Lynx’와 같은 텍스트 기반 브라우저가 웹사이트 이름 옆에 작은 기호를 표시하여 사이트의 안전 여부를 나타냈습니다.
파비콘의 개념은 추후에 Firefox와 Chrome을 포함한 다른 브라우저에서 구현되었습니다. 그와 동시에 더 큰 사이즈와 여러 이미지 파일 형식을 지원하도록 형식이 발전했습니다. 오늘날, 파비콘은 우리의 모든 웹 경험의 필수적인 부분입니다. 맞춤 디자인 아이콘으로서 크고 작은 회사의 브랜드 정체성을 향상시키는 데 사용됩니다.
파비콘 표준화
시간이 지남에 따라 파비콘은 형식, 사이즈 및 웹사이트에서의 위치 측면에서 표준화되었습니다. 파비콘이 다양한 브라우저와 기기에서 일관되게 구현되어야 하는 필요성으로 인해 이러한 표준화가 발전했습니다.
이 표준화 과정은 월드 와이드 웹 컨소시엄(W3C)이 파비콘에 대한 권고안을 발표하면서 시작되었는데요. 이 권고안은 파일 이름을 ‘favicon.ico’로 하고 웹사이트의 루트 디렉토리에 배치해야 한다는 내용으로 이루어졌습니다. 또한, 아이콘의 사이즈 및 형식 요건을 아웃링크했습니다.
W3C는 2011년에 다시 권고안을 업데이트하여 파비콘에 대한 이미지 형식과 사이즈를 추가했습니다. 또한, 다양한 기기에 걸친 여러 가지 아이콘의 지원 지침도 포함했습니다.
파비콘을 표준화하면 여러 가지 이점이 생기는데요. 그 중에서 가장 중요한 이점은 다양한 브라우저 및 기기에서 적절하게 표시된다는 것입니다. 표준화를 하지 않으면 한 브라우저에서는 명확하게 표시지만 다른 브라우저에서는 표시되지 않는 일이 발생할 수 있기 때문에 사용자 환경에 영향을 미칩니다.
또한, 웹 디자이너와 개발자를 위한 파비콘 만들기 프로세스가 단순화되어 더 이상 다른 브라우저 및 기기에 맞게 디자인하거나 형식을 지정할 필요가 없습니다. 단일 디자인과 형식만으로 모든 브라우저에서 문제없이 표시됩니다. 또한, 모든 웹 사용자의 웹 환경을 개선하고 표준화합니다.
파비콘 예시
웹 브라우저에 표시되는 파비콘
북마크바에 표시되는 파비콘
내 브라우저의 방문 기록에 표시되는 파비콘
검색 결과에 표시되는 파비콘
파비콘이 중요한 이유
아주 작은 크기임에도 불구하고, 파비콘은 웹사이트 이미지의 전반적인 효과에 아주 중요한 영향을 미치며, 사용자 경험, 브랜딩, 전문성을 향상시킵니다.
사용자 경험: 파비콘은 내 웹사이트가 기억에 남도록 하는 시각적 신호 역할을 하여 사용자 경험을 향상시킵니다. 사용자가 브라우저 및 북마크바와 같은 다양한 응용 프로그램에서 웹사이트 탭을 쉽게 찾을 수 있도록 돕기 때문에 파비콘을 사용하면 사이트를 계속해서 몇 번이고 재방문할 수 있습니다. 또한, 모바일의 사용자 경험에도 긍정적인 영향을 줄 수 있는데요. 모바일 웹디자인은 영향을 주기 위해 있는 것으로 많은 경우에 훌륭한 파비콘만큼 강력하면서도 손쉽게 영향을 줄 수 있는 것은 없습니다.
브랜딩: 진정으로 응집력 있는 브랜드에서는 아주 사소한 디테일조차도 정말 중요합니다. 파비콘은 작은 사이즈에도 불구하고 브랜드의 언어를 사이트의 외부로 확장하고 웹 브라우저에 드러냄으로써 웹사이트의 브랜딩 및 가시성에 기여합니다. 또한, 웹사이트에 적법성과 전문성을 더해주어 웹사이트의 완성도를 높여줍니다.
신뢰도: 파비콘은 사이트의 보안에 영향을 미치지는 않지만 사람들의 말에 따르면 사용자들이 파비콘이 있는 사이트를 신뢰하는 것으로 보입니다. 브랜드를 검색했든 혹은 다른 것을 검색하다가 브랜드를 발견하게 되든 사용자는 파비콘을 통해 사이트가 명백하게 존재한다는 것을 알 수 있기 때문입니다.
재방문 사용자: 파비콘은 강력한 브랜드 식별자이기 때문에 이를 활용하여 손쉽게 내 사이트가 검색 결과나 사용자의 브라우저 방문 기록에서 돋보이게 할 수 있습니다. 덕분에 쉽게 알아볼 수 있는 파비콘은 사용자가 내 사이트에 더 자주 방문하도록 유도합니다. 게다가 사용자들이 내 사이트를 북마크에 추가하면 이미 북마크에 추가된 사이트들 사이에서 내 사이트를 돋보여 쉽게 찾을 수 있습니다.
파비콘 및 SEO
파비콘은 사이트의 SEO에 직접적인 영향을 미치지 않습니다. 하지만 브라우저가 전반적인 사용자 환경을 보다 쉽게 식별하고 개선할 수 있도록 하기 때문에 품질 좋은 파비콘은 검색 결과에서 사이트의 순위를 유기적으로 향상시킬 수 있습니다. 파비콘이 사이트 순위를 향상시키는 몇 가지 방법을 알아보겠습니다.
파비콘은 Google 및 기타 검색 엔진이 내 웹사이트를 식별하는 데 도움이 될 수 있습니다. Google이 웹사이트를 크롤링할 때, 파비콘 파일을 찾습니다. 파비콘을 찾으면 검색 결과에서 웹사이트를 식별하는 데 사용합니다.
파비콘은 사용자가 웹사이트를 기억하는 데 도움이 됩니다. 사용자의 브라우저 탭, 책갈피 또는 검색 결과에 내 파비콘이 표시되면 사용자가 내 웹사이트를 기억하는 데 도움이 될 수 있습니다. 이로 인해 검색 결과의 내 웹사이트에 클릭 수가 증가할 수 있습니다.
파비콘은 사용자 환경을 개선하는 데 도움이 될 수 있습니다. 잘 디자인된 파비콘은 웹사이트가 더 전문적이고 세련되게 보이도록 만들어 사용자 경험을 향상시킬 수 있습니다.
파비콘 챌린지
강력한 브랜드 아이덴티티이지만 파비콘 만들기는 쉬운 일이 아닙니다. 파비콘을 만들 때의 주요한 어려운 점을 크게 몇 가지로 정리해 보았습니다.
한정된 디자인 공간: 브랜드 로고를 파비콘에 적합한 사이즈로 바꾸는 것은 어려울 수 있는데요. 특히 로고에 브랜드의 진정한 메시지를 담기길 기대하는 경우에 더욱 그렇습니다.
보안: 파비콘은 악성 코드 삽입, 멀웨어, 스푸핑 공격, 피싱 위협 등 다양한 잠재적 사이버 보안 공격에 사용될 수 있습니다.
웹사이트 로드 시간 및 속도: 모든 웹 이미지와 마찬가지로 파비콘은 웹사이트 성능을 위해 최적화되어야 하며, 그렇지 않으면 사이트의 로드 속도에 부정적인 영향을 미칠 수 있습니다.
접근성: 파비콘은 이미지 사이즈가 작기 때문에 접근성 측면에서 불편할 수 있습니다. 설명 텍스트나 기타 정보를 포함하기에는 사이즈가 너무 작을 수 있습니다.
호환성 문제: 파비콘의 파일 및 형식을 표준화하였음에도 불구하고, 다양한 브라우저와 기기에서 어떻게 보이는지에 대한 호환성 문제가 여전히 있을 수 있으며, 이는 웹에서 어떻게 표시되는지에 영향을 미칠 수 있습니다.
파비콘 만드는 방법
무엇보다도 일단 파비콘은 일반적으로 브랜드 로고를 단순화한 것이어야 합니다. 왜냐하면 파비콘이라는 것이 브랜딩 노력의 연장선이기 때문에 사용자를 혼란스럽게 하는 것을 지양해야 하며, 이미 구축한 브랜드 아이덴티티를 강화해야 하기 때문입니다. 그러므로 전문 디자이너를 고용하는 방안을 고려해 볼 수 있을 것입니다. 하지만 내가 선택한 디자인 프로그램이나 여러 가지 온라인 도구를 활용하여 직접 제작할 수도 있습니다. 권장하는 도구 중 하나는 스타일 및 니즈를 가장 잘 반영하는 전문적인 맞춤형 파비콘을 만들 수 있는 Wix 로고 메이커입니다.
아래의 섹션에서 몇 가지 디자인 팁을 살펴보겠지만 현재로써 유의해야 할 중요한 가이드라인은 다음과 같습니다.
크기
파비콘을 만들 때 가장 적합한 크기는 가장 일반적으로 표시되는 크기인 16x16 픽셀입니다. 하지만, 더 큰 크기(예: 32x32 픽셀)로 보일 수도 있습니다. 적합한 크기를 정하는 데 도움이 필요하다면 Wix 이미지 크기 조정 도구의 도구를 활용해 보세요.
표준 파비콘 크기와 각 크기에 알맞은 사용 용도를 알려드리겠습니다.
16x16: 브라우저용
32x32: 작업표시줄 단축키용
96x96: 데스크탑 단축키용
180x180: 애플 터치용
파일
원래 파비콘 파일 형식은 ICO였지만, 오늘날 기본 파일 형식 또는 벡터 아트는 PNG 또는 JPEG입니다. SVG는 계속해서 많은 브라우저가 지원하고 있기 때문에 점점 더 대중적인 선택이 되고 있습니다. 또한, 브라우저는 GIF로 만들어진 파비콘을 표시할 수 있기 때문에 크기가 작으면 GIF로 생성된 것은 보기가 어렵습니다.
ICO: Microsoft에서 개발한 파일 형식인 ICO는 파비콘의 기존 파일 형식이었습니다. ICO는 모든 브라우저에서 지원하며 파일 하나가 여러 가지 크기의 이미지를 포함할 수 있습니다. 이렇게 하면 브라우저에 의존하지 않고도 이미지의 크기와 비율을 조정할 수 있습니다. 많은 경우에, 그리고 ICO와 다른 파일 형식으로 저장한 경우에도 브라우저는 여전히 ICO 버전을 표시하도록 선택할 수 있습니다.
PNG: PNG는 웹사이트 제작자들에게 아주 익숙한 파일 형식이기 때문에 파비콘의 파일 형식으로 자주 사용됩니다. 만들기 쉬운 파일 형식이며, 일반적으로 이미지 및 파비콘을 고화질로 전송합니다. PNG 파일은 가볍다는 이점 또한 가지고 있는데요. 이는 파일들이 빠르게 로드된다는 것을 의미합니다.
SVG: SVG 파일은 가볍기로 유명합니다. 이러한 유형의 파비콘 파일 형식의 가장 큰 장점은 페이지 속도나 사이트의 성능을 저하시키지 않으면서 고화질 이미지를 전송할 수 있다는 것입니다. 과거에는 브라우저 호환성 문제로 파비콘의 SVG 사용이 제한되었지만 점점 변화되고 있습니다.
투명도: 디자인에 투명 배경이 있는 경우, 투명도 설정이 켜져 있는 상태에서 파일을 PNG로 저장해야 합니다.
파비콘 디자인 팁
아주 작은 이미지를 디자인하는 것은 정말 쉬운 일처럼 보일 수도 있습니다. 하지만 실제로 웹사이트 아이콘이 아주 작다는 것은 매우 정교해야 함을 의미합니다.
내 브랜드와 웹사이트에 가장 적합한 파비콘 만들기에 대한 팁을 소개하겠습니다.
단순성
작은 크기의 파비콘 만들기를 위해서는 디자인이 정교해야 합니다. 너무 작은 것, 질감 표현 또는 음영과 같은 요소를 피하고 너무 많은 디테일이 들어가지 않도록 유의하세요. 대신에 한눈에 알아볼 수 있는 두껍고 선명하고 단순한 아이콘을 만들려고 해야 합니다.
쥬얼리 디자이너이자 Wix 사용자인 의 파비콘은 단순한 디자인의 가장 좋은 예시인데요. 세 개의 단순한 점으로 구성되어 있습니다. Ducknology의 단순한 예시 또한 기발하고 재밌는 아이디어입니다. 로고에서 파생된 오리를 활용했으며 이 사이트와 브랜드를 아주 독특하게 만드는 모든 것을 대표합니다.
브랜드 정체성
파비콘은 웹사이트와 브랜드의 정신을 담고 있어야 하며, 웹사이트의 나머지 부분과 동일한 시각적 언어를 적용하고 색상 배열을 유지해야 합니다.
그래픽 디자이너 의 Wix 웹사이트의 무지개 색상의 파비콘은 Bhroovi의 웹사이트와 같은 다채로운 시각적 언어의 연속입니다. eBay의 경우, 브랜드 색상과 작은 쇼핑백 아이콘을 조합한 eBay의 로고 디자인의 축약된 버전으로 만들어 사이트의 정신을 완벽하게 담았습니다.
텍스트 사용 지양
파비콘에 텍스트를 적용하고 싶다면 1~3글자로 제한하세요. 이니셜이나 약어를 사용하여 텍스트를 단축하는 것이 하나의 좋은 해결책이 될 수 있습니다(예: 브랜드명 이니셜).
비영리 단체인 의 Wix 웹사이트는 단체 로고에 있는 A 이니셜을 가져와 네온 그린 색상의 배경을 더하여 완성했습니다. 반면, 브루클린에 본사를 둔 의 Wix 웹사이트에서 사용하는 이미지에는 텍스트가 전혀 없습니다. 그 대신에 브랜드를 강화하면서 강력한 임팩트를 주기 위해 Red Fern의 로고에 사용된 나뭇잎 아이콘만 가져왔습니다.
로고 사용
일부 로고는 파비콘의 크기에서도 멋있게 보일 수 있지만 대부분의 로고는 축소하면 거의 알아보기 힘듭니다. 로고를 파비콘으로 활용하려면 몇 가지 조정을 해야 합니다. 태그라인을 생략하거나 이니셜을 하나만 사용하면 로고를 파비콘 크기로 활용할 수 있는 방법이 됩니다.
Google은 Google 로고와 약간 다르지만 동일한 가치를 구현하고 있는데요. 이는 익숙한 G 이니셜만 보여주면서 네 가지 브랜드 색상을 모두 한 글자에 매끄럽게 통합하여 담아냈습니다. 일러스트레이터이자 Wix 사용자인 는 손으로 그린 로고의 이니셜을 사용했습니다.
색상
사이트의 파비콘은 사용한 컨텍스트 및 브라우저에 따라 다른 색상의 배경에 표시된다는 점을 유의하세요. 그러므로 디자인을 완성하기 전에 회색, 흰색, 검은색 배경에서 어떻게 보이는지 테스트해봐야 합니다.
HTML에 파비콘을 추가하는 방법
웹사이트 제작 도구로 사이트를 제작하면 HTML에 파비콘을 추가할 필요가 없습니다. 이러한 단계는 개발자가 제작한 사이트에만 적용됩니다. 다음은 코드의 헤더에 파비콘 이미지를 삽입하여 웹사이트에 표시하는 방법입니다.
<link rel="icon" type="image/png" href="Favicon.png"/>
Wix로 사이트를 제작하시나요? 다음으로는 파비콘을 손쉽게 내 마음대로 수정하여 사이트에 추가하는 방법을 보여드리겠습니다.
Wix 사이트에 파비콘을 추가하는 방법
Wix 사이트는 자동으로 표준 기본 파비콘을 포함하지만 프리미엄 플랜으로 업그레이드하고 사이트를 도메인에 연결하여 파비콘을 사용자 지정할 수 있습니다.
Wix 사이트에서는 다음과 같이 손쉽게 파비콘을 변경할 수 있습니다.
내 사이트의 대시보드에서 설정으로 이동하세요.
‘파비콘’ 옆에 있는 ‘관리’를 클릭하세요.
‘이미지 업로드’를 클릭하고 기존의 이미지를 선택하거나 ‘미디어 업로드’를 클릭하여 내 컴퓨터에 있는 이미지를 업로드하세요.
‘페이지에 추가’를 클릭하세요. 이제 브라우저 탭에서 파비콘 아이콘이 나타나는 모습을 미리 볼 수 있습니다.
‘저장’을 클릭하세요. 그러면 짜잔! 이제 여러분의 웹사이트에 파비콘이 생겼습니다. 게시를 누르면 웹사이트의 탭에 파비콘이 나타납니다.
파비콘 테스트
파비콘을 삽입했다면 표시될 모든 위치에서 어떻게 보이는지 확인하는 것이 좋습니다. 테스트할 때 캐싱 문제를 방지하기 위해 시크릿 모드로 전환하여 수행하는 것을 권장합니다.
이제 여러분의 사이트 사용자가 볼 수 있는 모든 위치(브라우저, 북마크 탭, 브라우저 방문 기록, 가능하다면 검색 결과에서도)에서 파비콘이 어떻게 보이는지 확인하세요. 아직 어떠한 유기적 키워드에서도 순위가 지정되지 않았나요? 사이트가 색인화 된 경우, 기업 또는 브랜드 이름을 검색하여 검색 결과에서 찾을 수 있습니다. 파비콘을 찾았다면 제대로 구현되었다는 것을 알 수 있습니다.
테스트하는 이 작업은 실제로 내 파비콘이 어떻게 보여지는지 생각해 볼 수 있는 의미 있는 시간이 될 수도 있습니다. 파비콘의 최종 시각 디자인이 내 브랜드의 본질을 담고 있나요? 그렇다면 이제 세상에 파비콘을 내보낼 준비가 끝난 것입니다.
By 조윤정
SEO & 블로그 전문가