Favicon 예제, 모범 사례 및 기술

 Favicon 예제, 모범 사례 및 기술

John Morrison

파비콘 예시, 모범 사례 및 기술

브라우저 탭 상단에 있는 작은 아이콘에 주의를 기울인 적이 있습니까? 웹 사이트나 온라인 페이지에 대한 바로 가기를 저장하면 어떻습니까? 이러한 작은 이미지 또는 파비콘은 이러한 목적을 위해 특별히 설계되었습니다.

좋은 작은 아이콘과 나쁜 작은 아이콘 사이에는 상당한 차이가 있습니다. 작은 규모의 디자인 결정이 덜 중요하다고 생각하면 용서받을 것입니다. 하지만 잘못 디자인된 파비콘은 브랜드에 좋지 않은 영향을 줄 수 있습니다.

오늘은 이러한 아이콘이 무엇인지, 기본 디자인 기법, 따라야 할 사양에 대해 살펴보겠습니다.

자세히 보기

또한보십시오: 2023년 최고의 3단 브로셔 템플릿(Word 및 InDesign) 70개 이상

파비콘이란 무엇입니까?

단순히 파비콘은 웹사이트, 브랜드 또는 비즈니스를 나타내는 데 사용되는 작고 투명한 아이콘입니다. 파비콘은 일관된 시각적 요소 덕분에 웹사이트 방문자가 탐색할 때 동일한 사이트에 있음을 알려주는 일관된 마커를 제공하여 사용자 경험을 개선하는 데 도움이 됩니다.

파비콘이라는 용어는 '즐겨찾기 아이콘'에서 유래되었습니다. 이 용어는 북마크된 페이지를 "즐겨찾기"라고 부르던 Internet Explorer 시대까지 거슬러 올라갑니다. 파비콘은 2000년경 W3C(World Wide Web Consortium)에서 HTML 4.0용으로 처음 채택되었으며 이듬해부터 브라우저 창에 보다 일관성 있게 나타나기 시작했습니다.

파비콘을 사용하여 브라우저 탭 사이를 빠르게 전환하고 북마크하거나 휴대전화에서 저장된 앱 또는 바로가기를 찾으세요. 그만큼시각적 식별자는 대부분의 사람들이 이러한 링크와 페이지에 액세스할 수 있는 올바른 버튼을 연결하는 데 사용하는 것입니다.

전통적으로 파비콘은 .ico 파일 형식을 사용했지만 지금은 문제가 되지 않습니다. 모든 투명한 파일 유형은 대부분의 경우에 작동합니다. .png는 종종 선택되는 형식입니다.

기술적 고려 사항

한때 모든 파비콘은 매우 작은 16픽셀 정사각형이었습니다. 고화질 레티나 화면과 바로가기 아이콘을 고려하면 더 이상 그렇지 않습니다.

HTML 5에는 작은 브라우저 아이콘에서 컴퓨터 도킹 스테이션 아이콘, 집에 이르기까지 모든 종류의 용도를 위한 다양한 크기의 파비콘 표준이 포함되어 있습니다. 화면 아이콘. 16픽셀 정사각형은 더 이상 필요하지 않습니다.

최신 파비콘 크기 및 용도:

  • 32×32: 대부분의 데스크톱 브라우저 표준(16×16 대체)
  • 128×128: ​​Chrome 스토어 및 작은 Windows 8 별 화면 아이콘
  • 152×152: iPad 터치 아이콘
  • 167×167: iPad Retina 터치 아이콘
  • 180×180: iPhone Retina 아이콘
  • 192×192: Google 개발자 웹 앱 추천
  • 196×196: Android 홈 화면 아이콘

모범 사례

전체적인 디자인 측면에서 보면 아이콘이 별로 중요하지 않은 것처럼 보이지만 사실과 다릅니다.

파비콘은 브랜드와 웹사이트에 대해 많은 것을 말해줍니다. 사용자는 이름으로 식별할 수 없는 경우 이를 기대하게 되었습니다. 이러한 작은 요소가 전체 사용자에게 기여합니다.경험과 브랜드입니다.

파비콘을 최대한 활용하려면 어떻게 해야 할까요?

다음 권장사항을 기억하세요.

  • 파비콘은 브랜드와 연결되어야 합니다. 하지만 전체 로고를 포함하기에는 너무 작은 경우가 많습니다. 브랜드 이름의 첫 글자나 브랜드와 함께 사용하는 작은 표시와 같이 식별 가능한 요소를 사용하세요.
  • 모양에 대해 생각해 보세요. 파비콘의 공간은 기본적으로 정사각형입니다. 다른 것을 원한다면 투명한 배경이 필요합니다. 일부 시스템은 모서리를 둥글게 처리할 수도 있으므로 또 다른 고려 사항을 염두에 두어야 합니다.
  • 파일이 작지만 너무 작지는 않은지 확인하세요. 대부분의 기기에서 제대로 렌더링되지만 전체 웹사이트를 방해하지 않는 파비콘 크기를 업로드하세요.
  • 파비콘 디자인에서 단어나 복잡한 요소를 피하세요.
  • 단순하고 유선형의 색상을 고수하세요. 파비콘용 팔레트. 색상에 미치기에는 너무 작습니다. 그렇기 때문에 대부분의 작은 아이콘은 배경색과 전경색만 사용하며 둘 사이의 대비가 큽니다.

디자인 기법

파비콘은 작기 때문에 , Photoshop에서 변덕스럽게 디자인하는 경향이 있습니다. 그것은 장수를 위해 권장되는 경로가 아닙니다.

파비콘에 대한 최고의 시각적 디자인 규칙은 디자인을 단순하게 유지하는 것입니다. 색상이나 텍스트 또는 브랜드 요소를 지나치게 사용하지 마세요.

Illustrator 또는 Sketch와 같은 벡터 도구에서 파비콘을 만들고,그런 다음 디자인을 필요한 크기로 내보냅니다. 이렇게 하면 화면 해상도가 변경될 때 시간이 지나도 변함없는 파비콘을 갖게 됩니다. (새 크기로 다시 내보내기만 하면 됩니다.)

파비콘의 가장 중요한 시각적 디자인 규칙은 디자인을 단순하게 유지하는 것입니다. 색상이나 텍스트 또는 브랜드 요소를 지나치게 사용하지 마세요. 이 게시물의 예를 보면 이러한 작은 요소가 거의 모두 16 x 16픽셀에서 읽을 수 있음을 알 수 있습니다.

애니메이션과 같은 트릭을 피하세요. 그들은 여기서 방해가 될 뿐입니다.

디자인의 도전이라고 생각하세요. 너무 작아서 읽기 쉬운 것을 만드는 것은 꽤 어려울 수 있습니다.

파일을 투명한 png로 저장하세요. 파비콘에 이상한 가장자리나 테두리가 생기지 않도록 하는 좋은 습관입니다. (아이콘을 둘러싼 들쭉날쭉한 흰색 가장자리보다 더 나빠 보이는 것은 없습니다.)

좋은 디자인의 원칙을 사용하십시오. 파비콘이 더 크고 눈에 잘 띄는 크기로 언제 사용될지 알 수 없습니다. 예를 들어 웹사이트 북마크를 저장하면 큰 버전의 파비콘을 사용할 수 있습니다. 도킹과 검색 엔진 결과 미리 보기에서도 마찬가지입니다.

작지만 이 아이콘은 브랜드를 나타냅니다. 잘 디자인하십시오.

파일이 준비되면 몇 줄의 코드만으로 웹사이트에 추가할 수 있습니다. (많은 WordPress 테마 및 웹 사이트 빌더에는 이미 favicon 요소가 포함되어 있으므로이 단계에 대해서도 생각해야 합니다.)

이미지 파일을 업로드한 후 웹사이트 헤더에 다음 코드를 삽입합니다. 이때 "iconpath" 및 "iconname"은 특정 파일 요소를 참조합니다.

  • HTML 색인 파일:
  • WordPress:

예제

아래 예에는 관련 파비콘이 있는 일부 브랜드 요소가 포함되어 있습니다. (Dribbble 페이지를 클릭하여 디자이너에게 사랑을 보여주세요.)

Prodigi.team 반응형 로고타입

버터스카치 제안 로고 시스템

로고 파비콘 표시

파비콘 템플릿

TEC 로고 옵션 2

결론

파비콘 크기가 부족한 점, 그들은 사용자 경험을 구성합니다. 이러한 아이콘은 사이트 방문자와 너무 많은 브라우저 탭을 열어두는 경향이 있는 방문자를 위한 탐색 도구 역할을 합니다.

또한보십시오: 50개 이상의 최고의 비즈니스 & 기업 글꼴 2023

일반적으로 파비콘은 사용자를 디지털 존재에 연결하는 빠른 시각적 식별자입니다. 귀하의 브랜드를 가장 정확하고 정확하게 표현할 수 있도록 주의하십시오.

John Morrison

John Morrison은 노련한 디자이너이자 디자인 업계에서 다년간의 경험을 쌓은 다작 작가입니다. 지식을 공유하고 다른 사람으로부터 배우는 것에 대한 열정으로 John은 업계 최고의 디자인 블로거 중 한 명으로 명성을 쌓았습니다. 그는 동료 디자이너에게 영감을 주고 교육하는 것을 목표로 최신 디자인 트렌드, 기술 및 도구에 대해 연구하고 실험하고 글을 쓰는 데 시간을 보냅니다. 디자인 세계에서 길을 잃지 않을 때 John은 하이킹, 독서, 가족과의 시간 보내기를 즐깁니다.