파비콘 디자인은 생각보다 중요합니다. 잘 디자인 된 로고가에서 볼 수있어 어떤 크기로 인식 할 필요가 크기 정말 여기에 중요하지 않습니다. 파비콘으로 알려진 16×16 픽셀만큼 작을 수있는 아이콘으로 바로 아래로 거대한 화면에서 확장해야합니다. 파비콘 디자인의 좋은 예는 구글 로고입니다. 그것은 큰’G’와 독특한 4 색 텍스트로 더 큰 화면을 위해 완벽하게 작동합니다., 그리고 웹 브라우저 주소 표시 줄에서 볼 수있는 작은 4 색’G’로 축소 될 때 여전히 인식 할 수 있습니다.
파비콘은 또한 바로 가기 아이콘,탭 아이콘 또는 북마크 아이콘으로 볼 수 있으므로 부분을 볼 필요가 있습니다. 보 파비콘을 디자인하는 작업을 참조하십시오 우리의 검거의 로고 디자인은 영감과 체크 아웃이의 놀라운 컬렉션 iOS 앱 아이콘을 얻을 설명했다.
이 기사에서는 완벽한 파비콘을 디자인하는 방법에 대한 과정을 살펴 보겠습니다., Apple 기기,Android,Chrome,Opera 및 Safari 용 favicon 을 만들기위한 구체적인 팁을 포함 할 것입니다. 플러스 당신이 알아야 할 다른 파비콘 크기와 형식에 편리한 가이드. 빠른 링크(오른쪽)를 사용하여 원하는 섹션으로 바로 이동하십시오.
- 고 다른 종류의 아이콘? 우리의 가이드를 참조하여 최고의 무료 아이콘을 설정
의 초기에 웹에 파비콘 단순히 16x16px 아이콘 파일이지만,요즘 그것은 조금 더 복잡합니다., 서로 다른 컨텍스트에 대해 서로 다른 파비콘 크기와 프로세스가 있습니다. 적절한 파비콘을 만드는 것은 과학입니다.
그래서,우리는 것을 몇 가지 팁을 위해 무엇을 당신의 파비콘을 찾아야 한 다음과 같은 움직에서 특정하는 방법에 대한 조언을 파비콘을 만들에 대한 다른 상황. 우리가 사용됩니다 템플릿에 적용되는 픽셀을 쉽게 생성하는 다른 파비콘 크기는 필요하며,에서 파비콘을 적용하는 픽셀로 예입니다.,
파비콘을 디자인 규칙
그것을 알아볼 수 있
첫 번째 일을 디자인할 때 고려해야 할 파비콘은 무엇을 해야에 표시됩니다. 귀하의 파비콘은 이미 귀하의 웹 사이트에 있거나 북마크 한 경우에만 사용자에게 표시된다는 것을 기억하십시오. 그래서 파비콘으로 사용자를 끌어들일 필요가 없습니다.
신의 로고를 사용
고려하이콘으로 냉 팻말을 보조하는 사용자는 인식에서 당신의 웹 사이트를 탐색할 때 자신의 북마크 목록 및 홈., 따라서,당신은 당신의 로고를 사용,또는 상징 중 가장 쉽게 사용자가 인정한 당신의 웹 사이트입니다. 2 차 캔버스에 맞는 로고 마크가 없으면 로고에서 가장 잘 알아볼 수있는 부분을 사용하십시오.
그것을 명확하게 유지
또한 피해야 할 몇 가지 사항이 있습니다. 파비콘을 마케팅 도구로 사용하지 마십시오-가격표,’신규’또는’업데이트 된’배너 등이 없음을 의미합니다. 사실,당신은 파비콘 안에 텍스트를 전혀 넣고 싶지 않습니다. 텍스트는 잘 확장되지 않으며 어쨌든 읽을 수없는 가능성이 있습니다., 마지막으로,사진을 사용하지 마십시오-그것은 그것이 나타날 크기로 진흙 투성이이고 인식 할 수 없을 것입니다.
만들기를 두 가지 버전
경우 파비콘서 처음으로 도입되었습니다 인터넷 Explorer5,그들이 등장하는 URL 에서는 바에서 북마크 목록입니다. 오늘날 favicons 는 북마크 목록,바로 가기 메뉴 및 모바일 및 TV homescreens 를 비롯한 많은 다른 컨텍스트에 표시됩니다., 이로 인해 파비콘이 최종 사용자에게 어떻게 표시 될지 예측하기가 어렵습니다.
을 보장하는 파비콘을 보기에 좋은 많은 서로 다른 컨텍스트가 나타납에서,관광을 제공해야 합니다 두 개의 파비콘 스타일:
로고 투명 배경이
이 버전은 같은 URL 로 바로 북마크 목록 및 다른 곳에서 파비콘을 표시 다음의 웹 사이트 URL 는 이름입니다.,
로고 고체 채우기
이전에 사용되는 그리드-북마크와 바로가기 메뉴는 브라우저나 기기 마스크에 바탕을 달성하기 위해,균일에서의 컨텍스트입니다.
파비콘 크기 cheatsheet
앞에서 언급했듯이 다른 컨텍스트에는 다른 크기의 파비콘이 필요합니다. 아래에서 모든 주요 사용 사례를 다루기 위해 공급해야 할 다양한 형식과 치수에 대한 빠른 가이드를 볼 수 있습니다.
이전에 FAVICONS 는 ICO 형식으로 제공되어야했습니다., 오늘은 PNG 형식으로 파일을 제공하는 것이 좋습니다(SVG 로 제공해야하는 Safari 고정 탭 아이콘 제외).
모든 파비콘 크기를 디자인하고 내보내는 쉬운 방법을 원한다면 픽셀 적용시 파비콘 템플릿을 살펴보십시오.
지금의 자세히 살펴의 특정 요구 사항은 다른 사용 사례를 보여주고 있습니다.,
데스크탑 브라우저 파비콘
을 만드는 방법은 바탕화면 브라우저 파비콘
의 시작과 함께 가장 간단한 파비콘을 만들어야 합:고전적인 파비콘에 대한 고전적인 바탕 화면 브라우저입니다. 이 유형의 파비콘은 URL 표시 줄 및 책갈피 목록에 자주 표시되므로 투명한 배경에서 가장 잘 작동합니다.,
를 제공해야 합니다 이 유형의 파비콘을 세 가지 크기에서,모든 PNG 형식으로 투명 배경입니다.,
- 16×16
- 32×32
- 48×48
애플
을 만드는 방법은 애플 파비콘을 터치
애플의 iOS 사용하는 애플의 아이콘을 터치를 나타내는 웹사이트에 저장되었습니다 iOS 홈으로 화면 북마크. 즉,Apple Touch 아이콘이 iOS 앱 아이콘의 squircle 마스크로 반올림됩니다.
또한 사용자가 자신의 홈 화면에 대해 선택한 어느 배경에 대해 표시됩니다. 이를 염두에두고 Apple Touch 아이콘은 단색 채우기 배경 스타일을 가져야합니다.,
애플 파비콘 제공해야 할 PNG 파일 형식입니다. 당신은 멀리 얻을 수 있습을 제공하 180×180 애플 아이콘을 터치하는 것이 자동으로 규모를 위한 다양한 아이폰과 아이 패드 크기입니다. 이것은 대부분의 경우에 잘 작동 할 것입니다.,
하지 않을 경우 제공할 수 있습니다 추가 크기 위한 다른 애플치:
- 60×60
- 76×76
- 120×120
- 152×152
- 180×180
Android, 크롬과 오페라
을 만드는 방법을 파비콘에 대한 안드로이드,크롬과 오페라
안드로이드,크롬과 오페라를 사용하여 안드로이드-크롬-192×192.png 및 android-chrome-512×512.Google 이 권장하는 png.,
의 도입 이후 적응 아이콘 안드로이드,추가된 웹 사이트 안드로이드 화 마스크 192×192 디자인,그래서 아이콘 모양 사용자가 선호하는 마스크 스타일입니다. 이것은 사각형,줄임표,사각형,둥근 사각형 또는 눈물 모양 일 수 있습니다.
을 만들어야 합 PNG 파비콘을 가진 단단한 배경에서 192×192 및 512×512.,
매니페스트를 추가하여 이러한 파비콘을 구현하십시오.json 파일을 귀하의 사이트에 링크하는 것에 태그:
<link rel="manifest" href="/manifest.json">여기에는 코드가 나타납니다.json 파일:
Safari
을 만드는 방법을 파비콘을 위해 사파리의 고정 탭
이것은 이상한 하나,그것은 파비콘을 필요가 있는 것에서 제공하는 벡터 포맷으로 SVG 파일입니다. 사용자가 Safari 브라우저 창에 탭을 고정하면 축소판 아이콘으로 표시됩니다.,
이 파비콘을 요구하는 100%검 SVG 파일이 투명한 배경입니다. SVG 는 하나의 레이어 만 될 수 있으며 safari 는 SVG 의 viewBox 특성을”0 0 16 16″으로 설정해야합니다.
<link rel="mask-icon" href="your_icon.svg">기타 파비콘 유형
몇몇 파비콘 크기와 형식에 포함되지 않은 이 문서에서는 예입니다., Google TV,Chrome 웹 스토어 및 사전 iOS7Apple 터치 아이콘. 왜? 왜냐하면 그들은 사용되지 않았거나 평균적인 웹 개발자와 거의 관련이 없기 때문입니다.
에서 일반적으로,개발자와 디자이너들이하기 위해 노력한 지원으로 광범위한 다양한 장치와 운영 체제으로 가능하지만,때때로 그것은 단지는 것은 의미가 없습니다. 그러나 파비콘 이미지의보다 완전한 목록을보고 싶다면 GitHub 에서이 파비콘 치트 시트를 살펴보십시오.,
- 상위 디자인 트렌드에 대한 2020 년
- 15 명의 전문가 글꼴을 위한 디자이너
- 27 는 최고의 세트의 무료 아이콘
