Jakie wymiary ikon ulubionych, formaty plików i tagi meta / linków powinny być używane od 2020 roku? Obejmuje to ikonę Apple, okna, Androida i inne urządzenia, z których ludzie korzystają obecnie.

Używam Opery i widzę, że obsługuje format svg. Czy obecnie najlepszym rozwiązaniem jest używanie SVG? Czy jest opcja „jeden plik dla wszystkich”?

Przeglądałem wiele stron internetowych i sprawdzałem różne „generatory favicon”. Wszystkie mają lata i pracują głównie z plikami png.

Na przykład: Jakiego kodu należy użyć dla ico i svg?

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

czy też należy określić wymiary, jeśli ico zawiera więcej rozmiarów? Nie znalazłem jednej dobrej odpowiedzi.

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

Proszę podać wymiary, formaty plików i tagi meta / linku, które favikony mają być używane.

Zastrzeżenie: jestem autorem RealFaviconGenerator, który, jak spodziewam się, będzie aktualny (głównie, patrz poniżej). Więc nie zdziw się, jeśli ta odpowiedź pasuje do tego, co generuje RFG.

Mit jednego rozmiaru dla wszystkich

Nie ma ikony „jeden rozmiar dla wszystkich”. Nie możesz utworzyć pojedynczej ikony SVG i oczekiwać, że będzie działać wszędzie.

Z technicznego punktu widzenia pojedyncza ikona SVG byłaby dobra. Ale z punktu widzenia UI i UX nie jest to pożądany wynik. Porównaj iOS i Android. W systemie iOS wszystkie ikony ekranu głównego są kwadratami z zaokrąglonymi narożnikami ( iOS wypełnia przezroczyste obszary ikon Touch kolorem czarnym ). W systemie Android ikony na ekranie głównym często mają niekwadratowe kształty i przezroczystość (w tym ikony aplikacji Google). Prześlij ikonę pojedynczego dotknięcia, a Android Chrome go użyje. Ale nie będziesz w stanie dopasować wytycznych dotyczących ikon Androida , podczas gdy dedykowana ikona może.

Dlatego radzę celowo unikać używania jednej ikony. Raczej kieruj reklamy na każdą platformę indywidualnie, jeśli to możliwe (nie zawsze tak jest).

Ikony, platforma na platformę

iOS Safari

iOS Safari oczekuje ikony dotykowej . Na dzień dzisiejszy jest to obraz PNG o wymiarach 180 x 180. Ten obraz nie powinien używać przezroczystości, a jego rogi zostaną automatycznie zaokrąglone po dodaniu do ekranu głównego. Zadeklarowano z:

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

Z biegiem lat ta ikona stała się „domyślną ikoną o wysokiej rozdzielczości” dla wielu przeglądarek. Więc znajdziesz go gdzie indziej, podczas dodawania do zakładki itp.

Android Chrome

Android Chrome korzysta z manifestu aplikacji internetowej . Chociaż ten manifest nie jest dedykowany dla Androida Chrome, obecnie jest jego głównym zwolennikiem. W tej chwili nadal można uznać, że ikony z Manifestu aplikacji internetowej są przeznaczone dla Androida Chrome.

Jak sama nazwa wskazuje, Manifest aplikacji internetowej jest przeznaczony dla aplikacji internetowych. Jednak każda witryna internetowa może użyć tego jako odniesienia do niektórych ikon.

Android oczekuje ikony PNG o wymiarach 192x192, a przezroczystość jest dozwolona i zalecana.

Manifest jest zadeklarowany za pomocą:

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

Edge i IE 12

Microsoft przedstawił browsererconfig , dokument XML zawierający różne ikony pasujące do interfejsu Metro.

Plik i kolor tła są deklarowane za pomocą:

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

Klasyczne przeglądarki komputerowe

Windows / macOS Chrome, Windows / macOS Firefox, Safari, IE ... To było trochę bardziej niewyraźne. Historycznie był jeden favicon.icoplik, który nadal był obsługiwany. Jednak najnowsze przeglądarki raczej wybierają ikony PNG, które są jaśniejsze. Ponadto niektóre przeglądarki nie są w stanie wybrać odpowiedniej ikony w pliku ICO (ten format może osadzić kilka wersji ikony), co powoduje nieprawidłowe użycie ikony o niskiej rozdzielczości.

Można by się pokusić o favicon.icocałkowite porzucenie starego . Chociaż chciałbym zrobić ten skok w RFG, nie przeprowadziłem niezbędnych testów, aby ocenić wpływ na stare przeglądarki.

Tak więc combo, które nadal polecam dzisiaj, z favicon.icoosadzonymi ikonami 16x16, 32x32 i 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">

Innych przeglądarkach

Inne przeglądarki mogą mieć dedykowane ikony. Na przykład Coast by Opera szuka ikony 228x228 . Konieczność skupienia się na tych przeglądarkach nie jest oczywista. Zwykle używają ikony dotykowej lub innych ikon, gdy nie mogą znaleźć „swojej” ikony.

Wniosek

Jak zapowiadaliśmy na początku, dokładnie to tworzy RealFaviconGenerator .

Warto również wspomnieć, że wraz z favicon należy dodać kilka innych tagów, takich jak tagi OG, karty Twittera czy aplikacja MS. To wszystko służy temu samemu celowi - identyfikacji wizualnej Twojej marki i również powinno być zawarte.

Kartę na Twitterze można znaleźć TUTAJ

Dodaję kolejne tagi

<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">

Zauważyłem, że wielu użytkowników tworzy obrazy w formatach 1300 na 650 pikseli i jpg / png.

Po dodaniu wszystkich tagów należy je zweryfikować TUTAJ

Facebook OG ma więcej opcji, ale ogólne są następujące:

<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 poleca określone proporcje obrazu, a rozmiar pliku jest ograniczony do 8 MB. Aby zachować podobne obrazy z kartą twitterową, polecam wymiary 1240px na 650px i format jpg / png. Facebook i Twitter nie akceptują svg ...

Odkryłem, że niektóre światowe marki używają tego tagu w swoich witrynach internetowych. Jeden miał wymiary 150x150 pikseli i format png. Ten obraz może być używany przez przeglądarki do wyświetlania w wynikach wyszukiwania.

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

Real Favicon Generator obsługuje również ikony ulubionych firmy Microsoft. Istnieje wiele innych metatagów dla aplikacji MS, aby zoptymalizować łuk strony i inne informacje, takie jak obraz. Ten temat również jest wart przeczytania.

Mam nadzieję, że to komuś przyda się i rozwinie temat brandingu Twojej strony.