2020 년에 어떤 파비콘 크기, 파일 형식 및 메타 / 링크 태그를 사용해야합니까? 여기에는 오늘날 사람들이 사용하는 사과 아이콘, 창, Android 및 기타 장치가 포함됩니다.

저는 Opera를 사용하고 있으며 svg 형식을 지원한다는 것을 알 수 있습니다. 요즘 svg를 사용하는 것이 가장 좋은 솔루션입니까? "하나의 파일에 모두 적용"옵션이 있습니까?

나는 많은 웹 사이트를 탐색하고 다른 "파비콘 생성기"를 확인했습니다. 그들 모두는 오래되었고 주로 png 파일로 작동합니다.

예 : ico 및 svg에 어떤 코드를 사용해야합니까?

<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

또는 ico에 더 많은 크기가 포함 된 경우 크기를 지정해야합니까? 좋은 답을 찾지 못했습니다.

<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">

어떤 파비콘을 사용해야하는지에 대한 크기, 파일 형식 및 메타 / 링크 태그를 제공하십시오.

면책 조항 : 저는 RealFaviconGenerator의 작성자이며, 최신 버전이 될 것으로 예상합니다 (대부분 아래 참조). 따라서이 답변이 RFG가 생성하는 것과 일치하더라도 놀라지 마십시오.

모든 것을위한 하나의 신화

"모든 크기에 맞는"아이콘은 없습니다. 단일 SVG 아이콘을 만들 수 없으며 모든 곳에서 작동 할 것으로 기대할 수 없습니다.

기술적 관점에서 단일 SVG 아이콘이 좋은 것입니다. 그러나 UI 및 UX 관점에서 이것은 바람직한 결과가 아닙니다. iOS와 Android를 비교하십시오. iOS에서 모든 홈 화면 아이콘은 모서리가 둥근 정사각형입니다 ( iOS는 Touch 아이콘의 투명한 영역을 검은 색으로 채 웁니다 ). Android에서 홈 화면 아이콘은 종종 정사각형이 아닌 모양과 투명도 (Google 앱 아이콘 포함)를 사용합니다. 원터치 아이콘을 제출하면 Android Chrome에서 사용합니다. 하지만 Android 아이콘 가이드 라인 은 일치 할 수 없지만 전용 아이콘은 일치 할 수 있습니다.

그래서 저는 의도적으로 하나의 아이콘을 사용하지 말라고 조언합니다. 가능하면 각 플랫폼을 개별적으로 대상으로 지정하십시오 (항상 그런 것은 아닙니다).

아이콘, 플랫폼 별 플랫폼

iOS Safari

iOS Safari에는 터치 아이콘이 필요합니다 . 오늘 현재 이것은 180x180 PNG 이미지입니다. 이 이미지는 투명도를 사용하지 않아야하며 홈 화면에 추가하면 모서리가 자동으로 둥글게됩니다. 선언 :

<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

수년에 걸쳐이 아이콘은 많은 브라우저에서 "기본 고해상도 아이콘"이되었습니다. 따라서 북마크에 추가 할 때 다른 곳에서 찾을 수 있습니다.

안드로이드 크롬

Android Chrome은 Web App Manifest 에 의존합니다 . 이 매니페스트는 Android Chrome 전용은 아니지만 현재 주요 지원자입니다. 따라서 현재로서는 Web App Manifest의 아이콘을 Android Chrome 용으로 간주하는 것이 여전히 안전합니다.

이름에서 알 수 있듯이 웹 앱 매니페스트는 웹 앱용입니다. 그러나 모든 웹 사이트에서 일부 아이콘을 참조하는 방법으로 사용할 수 있습니다.

Android는 192x192 PNG 아이콘, 투명도가 허용되고 권장됩니다.

매니페스트는 다음과 같이 선언됩니다.

<link rel="manifest" href="/icons/site.webmanifest">

Edge 및 IE 12

Microsoft 는 Metro UI에 맞는 다양한 아이콘을 나열하는 XML 문서 인 browserconfig를 도입했습니다 .

파일 및 배경색 은 다음과 같이 선언됩니다.

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

클래식 데스크탑 브라우저

Windows / macOS Chrome, Windows / macOS Firefox, Safari, IE ... 이건 좀 더 흐릿한 것입니다. 역사적으로 favicon.ico여전히 지원되는 단일 파일 이있었습니다 . 그러나 대부분의 최신 브라우저는 더 가벼운 PNG 아이콘을 선택합니다. 또한 일부 브라우저는 ICO 파일에서 적절한 아이콘을 선택할 수 없어 (이 형식은 여러 버전의 아이콘을 포함 할 수 있음) 저해상도 아이콘이 잘못 사용되는 원인이됩니다.

오래된 것을 favicon.ico완전히 버리고 싶은 유혹을받을 수 있습니다 . RFG에서 이러한 도약을하고 싶지만 이전 브라우저에 미치는 영향을 평가하는 데 필요한 테스트를 실행하지 않았습니다.

따라서 favicon.ico16x16, 32x32 및 48x48 아이콘 을 포함 하여 오늘도 여전히 권장하는 콤보입니다 .

<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="shortcut icon" href="/icons/favicon.ico">

다른 브라우저

다른 브라우저에는 전용 아이콘이있을 수 있습니다. 예를 들어 Coast by Opera는 228x228 아이콘을 찾고 있습니다. 이러한 브라우저에 집중해야 할 필요성은 분명하지 않습니다. 그들은 일반적으로 "자신의"아이콘을 찾을 수 없을 때 터치 아이콘이나 다른 아이콘을 사용합니다.

결론

처음에 발표했듯이 이것이 바로 RealFaviconGenerator 가 만드는 것입니다.

파비콘과 함께 OG 태그, Twitter 카드 또는 MS 애플리케이션과 같은 다른 태그를 추가해야한다는 점도 언급 할 가치가 있습니다. 브랜드의 시각적 식별이라는 동일한 목적을 제공하며 또한 포함되어야합니다.

Twitter 카드는 여기 에서 찾을 수 있습니다.

다음 태그를 추가합니다

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourAccount">
<meta name="twitter:creator" content="@YourAccount">
<meta name="twitter:title" content="Title of your page">
<meta name="twitter:url" content="URL of your page">
<meta name="twitter:description" content="Your description here">
<meta name="twitter:image:src" content="URL of image">

많은 사용자가 1300 x 650px 및 jpg / png 형식의 이미지를 만드는 것을 발견했습니다.

모든 태그를 추가 한 후 여기에서 확인해야합니다.

Facebook OG에는 더 많은 옵션이 있지만 일반적으로 다음과 같습니다.

<meta property="og:title" content="ENTER PAGE TITLE">
<meta property="og:type" content="website"><!--Different values possible -->
<meta property="og:url" content="ENTER PAGE URL">
<meta property="og:image" content="URL OF IMAGE">
<meta property="og:image:width" content="1240">
<meta property="og:image:height" content="650">
<meta property="og:site_name" content="ENTER YOUR SITE NAME">
<meta property="og:description" content="ENTER YOUR PAGE DESCRIPTION">
<meta property="fb:app_id" content="ENTER YOUR FB APP ID">

<meta property="og:see_also" content="URL to recommended page number 1">
<meta property="og:see_also" content="URL to recommended page number 2">
<!--UP TO 5 WEBSITE ADRESSES -->

Facebook은 이미지의 특정 비율을 권장하며 파일 크기는 8Mb로 제한됩니다. 트위터 카드로 유사한 이미지를 유지하려면 1240x650 픽셀 및 jpg / png 형식을 권장합니다. Facebook과 twitter는 svg를 허용하지 않습니다 ...

일부 글로벌 브랜드가 웹 사이트에서이 태그를 사용하는 것을 발견했습니다. 하나는 크기가 150x150 픽셀이고 png 형식이었습니다. 이 이미지는 브라우저에서 검색 결과에 표시하는 데 사용될 수 있습니다.

<meta name="thumbnail" content="path/to/image/thumb-150x150.png">

Real Favicon Generator는 Microsoft favicon도 포함합니다. 페이지를 최적화하기 위해 MS 응용 프로그램에 대한 다른 많은 메타 태그가 있으며 이미지와 같은 기타 정보가 표시됩니다. 이 주제도 읽을 가치가 있습니다.

이것이 누군가에게 유용하고 웹 사이트 브랜딩 주제를 확장하기를 바랍니다.