파비콘 디자인 방법 : 최고의 가이드

파비콘 디자인
(이미지 출처 : Michael Flarup)
다음으로 이동 :


Favicon 디자인은 당신이 생각하는 것보다 더 중요합니다. 잘 디자인 된 로고는 어떤 크기로 보든 알아볼 수 있어야하므로 크기가 정말 중요합니다. 거대한 화면에서 파비콘으로 알려진 16 x 16 픽셀의 작은 아이콘까지 확장해야합니다. 파비콘 디자인의 좋은 예는 Google 로고입니다. 큰 'G'와 독특한 4 색 텍스트로 더 큰 화면에서 완벽하게 작동합니다. 그리고 웹 브라우저 주소 표시 줄에서 볼 수있는 작은 4 색 'G'로 축소되었을 때도 여전히 알아볼 수 있습니다.

파비콘은 바로 가기 아이콘, 탭 아이콘 또는 북마크 아이콘으로도 볼 수 있으므로 부분을 봐야합니다. 작동하는 파비콘 디자인을 보려면 로고 디자인 영감 이 멋진 컬렉션을 확인하세요. iOS 앱 아이콘 그것은 바로 그것을 얻습니다.

이 기사에서는 완벽한 파비콘을 디자인하는 과정을 살펴볼 것입니다. Apple 기기, Android, Chrome, Opera 및 Safari 용 파비콘을 만들기위한 특정 팁을 포함합니다. 또한 알아야 할 다양한 파비콘 크기 및 형식에 대한 편리한 가이드입니다. 빠른 링크 (오른쪽)를 사용하여 원하는 섹션으로 바로 이동할 수 있습니다.

Favicon 디자인 : 빠른 링크

- Favicon 디자인 규칙
- Favicon 크기 치트 시트
- 데스크톱 브라우저 파비콘
- Apple Touch 파비콘
- Android, Chrome 및 Opera
- Safari의 고정 탭



웹 초창기에는 파비콘이 단순히 16x16px 아이콘 파일 이었지만 지금은 좀 더 복잡합니다. 상황에 따라 파비콘 크기와 프로세스가 다릅니다. 적절한 파비콘을 만드는 것은 과학입니다.

따라서 우리는 파비콘이 어떻게 생겼는지에 대한 몇 가지 주요 팁으로 시작한 다음 다른 컨텍스트에 대한 파비콘을 만드는 방법에 대한 구체적인 조언으로 넘어갈 것입니다. 우리는 픽셀 적용에서 사용할 수있는 템플릿 필요한 다른 파비콘 크기와 예를 들어 Apply Pixels의 파비콘을 쉽게 생성 할 수 있습니다.

Favicon 디자인 규칙

01. 알아볼 수 있도록

파비콘을 디자인 할 때 가장 먼저 고려해야 할 사항은 캔버스에 표현해야하는 것입니다. 파비콘은 사용자가 이미 표시되었을 때만 표시됩니다. 웹 사이트에서 또는 북마크에 추가했습니다. 따라서 파비콘으로 사용자를 끌어들일 필요가 없습니다.

사용자가 북마크 목록과 홈 화면을 탐색 할 때 웹 사이트를 알아볼 수 있도록 돕는 냉정한 표지판으로 파비콘을 고려하십시오. 따라서 귀하는 귀하의 로고 또는 사용자가 귀하의 웹 사이트를 가장 쉽게 알아볼 수있는 기호를 사용하고자합니다. 2 차 캔버스에 맞는 로고 마크가없는 경우 로고에서 가장 잘 알려진 부분을 사용하십시오.

03. 명확하게 유지

피해야 할 몇 가지 사항도 있습니다. 파비콘을 마케팅 도구로 사용하지 마십시오. 즉, 가격표, '신규'또는 '업데이트'배너 등이 없습니다. 사실, 파비콘 안에 텍스트를 전혀 넣지 않으려 고합니다. 텍스트의 크기가 제대로 조정되지 않고 어쨌든 읽을 수 없을 가능성이 있습니다. 마지막으로 사진을 사용하지 마십시오. 사진이 표시 될 크기에서 진흙 투성이이고 인식 할 수 없습니다.

04. 두 가지 버전 생성

투명한 배경의 파비콘과 단색 채우기 배경의 파비콘

다른 배경은 다른 상황에 잘 작동합니다.(이미지 출처 : Michael Flarup / Apply Pixels)

파비콘이 Internet Explorer 5에 처음 도입되었을 때 URL 표시 줄과 책갈피 목록에 나타납니다. 오늘날 파비콘은 북마크 목록, 바로 가기 메뉴, 심지어 모바일 및 TV 홈 화면을 포함하여 다른 많은 컨텍스트에 표시됩니다. 이로 인해 최종 사용자에게 파비콘이 표시되는 방식을 예측하기가 어렵습니다.

잉크 펜으로 그리는 방법

파비콘이 나타날 다양한 상황에서 잘 보이도록하려면 두 가지 파비콘 스타일을 제공해야합니다.

투명한 배경에 로고
이 버전은 URL 표시 줄, 북마크 목록 및 웹 사이트 URL 또는 이름 옆에 파비콘이 표시되는 기타 위치에 표시됩니다.

단색 채우기의 로고
이 버전은 브라우저 또는 장치가 배경을 가리는 격자 모양의 책갈피 및 바로 가기 메뉴에 사용되어 컨텍스트에서 균일 한 모양을 얻습니다.

Favicon 크기 치트 시트

앞서 언급했듯이 서로 다른 컨텍스트에는 서로 다른 크기의 파비콘이 필요합니다. 아래에서 모든 주요 사용 사례를 다루기 위해 제공해야하는 다양한 형식과 크기에 대한 빠른 가이드를 볼 수 있습니다.

이전에는 파비콘이 ICO 형식으로 제공되어야했습니다. 현재는 PNG 형식으로 파일을 제공해도됩니다 (SVG로 제공되어야하는 Safari 고정 탭 아이콘 제외).

모든 파비콘 크기를 디자인하고 내보내는 쉬운 방법을 원한다면 파비콘 템플릿 적용 픽셀에서.

Favicon 치트 시트

가장 일반적인 파비콘 크기입니다.(이미지 출처 : emergeinteractive)

이제 다양한 사용 사례의 특정 요구 사항을 자세히 살펴 보겠습니다.

데스크톱 브라우저 파비콘

데스크톱 브라우저 파비콘을 만드는 방법

생성해야 할 가장 간단한 파비콘 (클래식 데스크톱 브라우저 용 클래식 파비콘)부터 시작하겠습니다. 이 유형의 파비콘은 URL 표시 줄과 북마크 목록에 자주 표시되기 때문에 투명한 배경에서 가장 잘 작동합니다.

Google 크롬의 북마크 바 및 URL 표시 줄에 표시되는 파비콘

Google 크롬의 북마크 바 및 URL 표시 줄에 표시되는 클래식 스타일 파비콘(이미지 출처 : Michael Flarup / Apply Pixels)

이 유형의 파비콘을 세 가지 크기로 제공해야합니다. PNG 형식 와 함께 투명한 배경 .

  • 16x16
  • 32x32
  • 48x48

사과

Apple Touch 파비콘을 만드는 방법

Apple의 iOS는 Apple Touch 아이콘을 사용합니다. iOS 홈 화면에 북마크로 저장된 웹 사이트를 나타냅니다. 즉, Apple Touch 아이콘이 멍청이 iOS 앱 아이콘 마스크.

포토샵에서 반복 패턴을 만드는 방법

또한 사용자가 홈 화면으로 선택한 배경에 대해서도 표시됩니다. 이를 염두에두고 Apple Touch 아이콘에 단색 채우기 배경 스타일.

아이콘이있는 iPhone 홈 화면

이 파비콘은 사용자의 홈 화면 배경에 표시됩니다.(이미지 출처 : Michael Flarup / Apply Pixels)

애플 파비콘은 PNG 형식 . 당신은 제공으로 도망 갈 수 있습니다 180x180 다양한 iPhone 및 iPad 크기에 맞게 자동으로 확장되는 Apple Touch 아이콘. 이것은 대부분의 경우 잘 작동합니다.

그렇지 않은 경우 다른 Apple 장치에 대해 추가 크기를 제공 할 수 있습니다.

  • 60x60
  • 76x76
  • 120x120
  • 152x152
  • 180x180

Android, Chrome 및 Opera

Android, Chrome 및 Opera 용 파비콘을 만드는 방법

Android, Chrome 및 Opera는 android-chrome-192x192.pngandroid-chrome-512x512.pngGoogle 권장 사항 .

Android에 적응 형 아이콘이 도입 된 이후로 Android 홈 화면에 추가 된 웹 사이트는 192x192 디자인을 마스킹하므로 아이콘은 사용자가 선호하는 마스킹 스타일을 따릅니다. 이것은 squircle, ellipsis, 직사각형, 둥근 직사각형 또는 눈물 방울 모양 일 수 있습니다.

Android Pie 홈 화면의 파비콘

여기의 파비콘은 사용자 선호도에 따라 다른 모양으로 마스킹됩니다.(이미지 출처 : Michael Flarup / Apply Pixels)

당신은 PNG 파비콘 단색 배경 ,에서 192x192512x512 .

추가하여 이러한 파비콘을 구현 manifest.json 파일을 사이트에 연결하고 태그 내에서 링크 :

다음은 manifest.json 파일:

{ 'name': '', 'short_name': '', 'icons': [ { 'src': '/android-chrome- 192x192.png', 'sizes': '192x192', 'type': 'image/png' }, { 'src': '/android- chrome-512x512.png', 'sizes': '512x512', 'type': 'image/png' } ], 'theme_color': '#ffffff', 'background_color': '#ffffff', 'display': 'standalone' }

원정 여행

Safari의 고정 탭에 대한 파비콘을 만드는 방법

이것은 이상한 것입니다. 그리고 그것은 제공되어야 할 유일한 파비콘입니다. 벡터 형식SVG 파일 . 사용자가 Safari 브라우저 창에 탭을 고정하면 축소판 아이콘으로 표시됩니다.

파비콘 아이콘 : SVG 형식

다른 모든 파비콘과 달리이 아이콘은 SVG 이미지에서 생성됩니다.(이미지 출처 : Michael Flarup / Apply Pixels)

이 파비콘은 100 % 검은 색 SVG 파일이어야합니다. 투명한 배경 . SVG는 하나의 레이어 만 될 수 있으며 safari에는 viewBox '로 설정할 SVG의 속성 0 0 16 16 ' .

기타 파비콘 유형

이 기사에 포함되지 않은 파비콘 치수 및 형식이 있습니다. Google TV, Chrome 웹 스토어 및 iOS 7 이전 Apple Touch 아이콘. 왜? 더 이상 사용되지 않거나 일반 웹 개발자와 거의 관련이 없기 때문입니다.

일반적으로 개발자와 디자이너는 가능한 한 다양한 장치와 운영 체제를 지원하기 위해 노력해야하지만 때로는 말이 안되는 경우도 있습니다. 그러나 파비콘 이미지의 전체 목록을 보려면이 항목을 확인하십시오. 파비콘 치트 시트 GitHub에서.

더 읽어보기 :