Favicon Standard-2019-SVG, ICO, PNG 및 치수?
2019 년에는 어떤 파비콘 크기, 파일 형식 및 메타 / 링크 태그를 사용해야합니까? 여기에는 오늘날 사람들이 사용하는 사과 아이콘, 창, 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">
macOS Safari
macOS Safari에는 파비콘이 없지만 고정 된 탭 의 마스크 아이콘을 지원 합니다 . 이것은 단색 SVG 아이콘이며 탭이 활성화되면이를 채우는 단일 색상입니다.
다음과 같이 선언하십시오.
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5">
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, 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 가 만드는 것입니다.
favicon과 함께 OG 태그, Twitter 카드 또는 MS 애플리케이션과 같은 다른 태그를 추가해야한다는 점도 언급 할 가치가 있습니다. 브랜드의 시각적 식별이라는 동일한 목적을 제공하며 또한 포함되어야합니다.
트위터 카드는 여기 에서 찾을 수 있습니다.
다음 태그를 추가합니다
<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 has more option but general are as follows:
<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 recommend specific ratio of the image and the file size is limited to 8Mb. To keep similar images with twitter card I recommend dimensions 1240px by 650px and jpg/png format. Facebook and twitter do not accept svg...
I found that some global brands use this tag on their websites. One had dimensions 150x150 pixels and png format. This image may be used by browsers to display in search results.
<meta name="thumbnail" content="path/to/image/thumb-150x150.png">
Real Favicon Generator covers also Microsoft favicons. There are many other meta tags for MS-application to optimize bow the page and other infos such as image are displayed. This topic is also worth reading.
I hope this is usefull for someone and expands the topic of branding your website.
참고URL : https://stackoverflow.com/questions/48956465/favicon-standard-2019-svg-ico-png-and-dimensions
'programing' 카테고리의 다른 글
| pypi는 이전 버전의 패키지를 참조하십시오. (0) | 2020.11.04 |
|---|---|
| Android Studio : Gradle 실행을 완료하지 못했습니다. 원인이 비어 있습니다. (0) | 2020.11.04 |
| GNU make 디버깅 (0) | 2020.11.04 |
| 양식 인증 : 로그인 페이지로 리디렉션 비활성화 (0) | 2020.11.04 |
| SQL“LIKE”문에 해당하는 SQLAlchemy (0) | 2020.11.04 |