Favicon 예제, 모범 사례 및 기법
브라우저 탭 상단의 작은 아이콘에주의를 기울인 적이 있습니까? 웹 사이트 나 페이지의 바로 가기를 온라인으로 저장하면 어떻습니까? 작은 이미지 나 파비콘은 특히 그러한 목적으로 설계되었습니다.
좋고 작은 아이콘을 만드는 것에는 분명한 차이가 있습니다. 작은 규모의 설계 결정은 중요하지 않다고 생각하면 용서받을 수 있습니다. 그러나 제대로 디자인되지 않은 파비콘은 브랜드에 잘못 반영 될 수 있습니다.
오늘 우리는이 아이콘이 무엇인지, 기본적인 디자인 기법과 따라야 할 스펙을 살펴보고 있습니다.
Envato Elements 살펴보기
Favicon은 무엇입니까?
즐겨 찾기 아이콘은 웹 사이트, 브랜드 또는 비즈니스를 나타내는 데 사용되는 작고 투명한 아이콘입니다. Favicons는 웹 사이트 방문자에게 일관된 시각적 요소 덕분에 웹 사이트 방문자가 동일한 사이트에 있다는 것을 알려주는 일관된 마커를 제공하여 사용자 경험을 향상시킵니다.
즐겨 찾기 아이콘이라는 용어는“즐겨 찾기 아이콘”에서 유래합니다. 이 용어는 북마크 된 페이지를 "즐겨 찾기"라고하는 Internet Explorer 시대로 거슬러 올라갑니다. 이 파비콘은 2000 년경 HTML 4.0 용 W3C (World Wide Web Consortium)에 의해 처음 채택되었으며, 다음 해에 브라우저 창에서보다 일관되게 표시되기 시작했습니다.
즐겨 찾기 아이콘을 사용하여 브라우저 탭 사이를 빠르게 넘기거나 책갈피를 식별하거나 휴대폰에서 저장된 앱 또는 바로 가기를 찾으십시오. 시각적 식별자는 대부분의 사람들이 이러한 링크와 페이지를 오른쪽 버튼과 연결하여 액세스하는 데 사용하는 것입니다.
일반적으로 파비콘은 .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 색인 파일 :
- 워드 프레스 :
예
아래 예에는 즐겨 찾기 아이콘과 관련된 일부 브랜드 요소가 포함되어 있습니다. (클릭하여 디자이너가 드리블 페이지에서 약간의 사랑을 보여주십시오.)
Prodigi.team 반응 형 로고
Butterscotch 제안 로고 시스템
로고 파비콘 디스플레이
Favicon 템플릿
TEC 로고 옵션 2
결론
파비콘의 크기가 부족한 것은 사용자 경험을 구성합니다. 이 아이콘은 사이트 방문자 및 너무 많은 브라우저 탭을 열어 두는 경향이있는 탐색 도구 역할을합니다.
일반적으로 파비콘은 사용자를 디지털 상태로 연결하는 빠른 시각적 식별자입니다. 브랜드를 가장 정확하고 정확하게 표현할 수 있도록주의하십시오.
