Favicons - najlepsze praktyki

Próbuję ogarnąć wszystkie te różne rozmiary i formaty, które są potrzebne dla ikon Favicons, ikon dotykowych, a teraz także ikon kafelków.

Przeczytałem ten post: http://www.jonathantneal.com/blog/understand-the-favicon, ale wciąż nie wiem, czego dokładnie użyć, aby wyglądał całkiem dobrze na wszystkich urządzeniach i przeglądarkach> = IE8 .

Myślę, że powinienem stworzyć:

ICO
favicon.ico (32x32)

PNG
favicon.png (96 x 96)

Ikona
kafelka tileicon.png (144x144)

Apple Touch Icon
apple-touch-icon-precomposed.png (152x152)
na podstawie tego https://github.com/h5bp/html5-boilerplate/issues/1367

... a następnie użyć tego kodu, aby je podać?

<link rel="apple-touch-icon" href="path/to/touchicon.png">
<link rel="icon" href="path/to/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- or, set /favicon.ico for IE10 win -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

Czy coś mi brakuje?

Nie wiem, czy to obejmie IE 10?

Favicon jest o wiele bardziej złożony niż to, co brzmi. 10 lat temu favicon.icobył jedynym potrzebnym przedmiotem. Potem była ikona dotykowa, potem wiele ikon dotykowych należnych do różnych rozdzielczości ekranu urządzeń iOS, a potem była ikona kafelka dla Windows ...

Niektóre odpowiedzi są tutaj bardzo wyczerpujące - i przytłaczające (wszystko to tylko dla favicon?). Jednak nie udaje im się wskazać, że zalecana jest ikona kafelka 310x310 dla systemu Windows 558x558 . A ponieważ zostały napisane kilka miesięcy temu, nie wspominają o niedawnym manifeście dla Androida Chrome M39 ani o ikonie SVG przypiętej zakładki dla Safari na OS X El Capitan .

Projektowanie na platformę to kolejny trudny, ale zaniedbany temat. Na przykład favicon są często przezroczyste. Ale iOS nie obsługuje przezroczystości (na przykład porównaj ikonę SO touch i to, co otrzymujesz, dodając SO do ekranu głównego swojego iPhone'a).

Z tych powodów uważam, że najlepszą praktyką dla favicon jest nie tworzenie go ręcznie. Zamiast tego użyj narzędzia do automatyzacji całego procesu i egzekwowania wytycznych dotyczących platformy.

Radzę skorzystać z RealFaviconGenerator . Generuje wszystkie obrazy i kod HTML potrzebne do wykonania pracy:

• favicon.ico i ikony PNG dla przeglądarek na komputerze
• Ikona dotykowa Apple dla urządzeń z systemem iOS i Android
• Płytki systemu Windows 8
• Ikona przypiętej karty dla Safari w systemie OS X El Capitan

Na przykład generuje nie tylko msapplication-TileImageobraz i znaczniki, ale także nowszy browserconfig.xmlplik obsługiwany przez IE11. Został również zaktualizowany kilka miesięcy temu, aby obsługiwał manifest Android Chrome i Safari OS X El Capitan.

Pełne ujawnienie: jestem autorem tej strony.

Oto pełny (jak wiem) przykład favicon na telefon komórkowy i tablet:

<!-- non-retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon57.png" sizes="57x57">
<!-- non-retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon72.png" sizes="72x72">
<!-- non-retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon76.png" sizes="76x76">
<!-- retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon114.png" sizes="114x114">
<!-- retina iPhone iOS 7 -->
<link rel="apple-touch-icon" href="icon120.png" sizes="120x120">
<!-- retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon144.png" sizes="144x144">
<!-- retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon152.png" sizes="152x152">
<!-- Win8 tile -->
<meta name="msapplication-TileImage" content="favicon-144.png">
<meta name="msapplication-TileColor" content="#B20099"/>
<meta name="application-name" content="name" />

<!-- IE11 tiles -->
<meta name="msapplication-square70x70logo" content="tile-tiny.png"/>
<meta name="msapplication-square150x150logo" content="tile-square.png"/>
<meta name="msapplication-wide310x150logo" content="tile-wide.png"/>
<meta name="msapplication-square310x310logo" content="tile-large.png"/>

W przypadku IE11, oto często zadawane pytania

Istnieje wiele różnych ikon, a nawet ekranów powitalnych, które można ustawić dla różnych urządzeń. Ta odpowiedź pokazuje, jak wspierać ich wszystkich.

Oto kilka fragmentów, których użyłem, z odpowiednimi linkami do miejsc, w których zebrałem informacje. Zobacz mój blog, aby uzyskać więcej informacji i więcej informacji na temat szablonu projektu ASP.NET MVC Boilerplate z tym wszystkim wbudowanym od razu po wyjęciu z pudełka (w tym przykładowe pliki obrazów).

Dodaj następujący znacznik do nagłówka HTML. Zakomentowane sekcje są całkowicie opcjonalne. Zaleca się, aby sekcje bez komentarzy obejmowały wszystkie zastosowania ikon. Nie bój się, zwłaszcza jeśli są to komentarze, które mają ci pomóc.

<!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ -->
<!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. -->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/images/favicon-32x32.png" sizes="32x32">

<!-- Android/Chrome -->
<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.
    https://developer.chrome.com/multidevice/android/installtohomescreen. -->
<link rel="manifest" href="https://stackoverflow.com/content/icons/manifest.json">
<!-- theme-color - The colour of the toolbar in Chrome M39+
    http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
<meta name="theme-color" content="#1E1E1E">
<!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/icons/favicon-192x192.png" sizes="192x192">
<!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. -->
<!-- <meta name="mobile-web-app-capable" content="yes"> -->

<!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don't mind the clutter.
    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/30001261-SW1 -->
<!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->
<!--<meta name="apple-mobile-web-app-title" content="">-->
<!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
<!-- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon" sizes="57x57" href="https://stackoverflow.com/content/images/apple-touch-icon-57x57.png">
<!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="https://stackoverflow.com/content/images/apple-touch-icon-114x114.png">
<!-- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 -->
<link rel="apple-touch-icon" sizes="72x72" href="https://stackoverflow.com/content/images/apple-touch-icon-72x72.png">
<!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="https://stackoverflow.com/content/images/apple-touch-icon-144x144.png">
<!-- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. -->
<link rel="apple-touch-icon" sizes="60x60" href="https://stackoverflow.com/content/images/apple-touch-icon-60x60.png">
<!-- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="https://stackoverflow.com/content/images/apple-touch-icon-120x120.png">
<!-- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="https://stackoverflow.com/content/images/apple-touch-icon-76x76.png">
<!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="https://stackoverflow.com/content/images/apple-touch-icon-152x152.png">
<!-- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 -->
<link rel="apple-touch-icon" sizes="180x180" href="https://stackoverflow.com/content/images/apple-touch-icon-180x180.png">

<!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://gist.github.com/tfausak/2222823 -->
<!-- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-320x460.png - iOS 6 iPhone -->
<link rel="apple-touch-startup-image"
      href="https://stackoverflow.com/content/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">

<!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile!
     browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images:
     mstile-70x70.png - For Windows 8.1 / IE11.
     mstile-144x144.png - For Windows 8 / IE10.
     mstile-150x150.png - For Windows 8.1 / IE11.
     mstile-310x310.png - For Windows 8.1 / IE11.
     mstile-310x150.png - For Windows 8.1 / IE11.
     See http://www.buildmypinnedsite.com/en and http://msdn.microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. -->
<!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. -->
<!--<meta name="application-name" content="">-->
<!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). -->
<meta name="msapplication-TileColor" content="#5cb95c">
<!-- msapplication-TileImage - Windows 8 - The tile image. -->
<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

Mój plik browsererconfig.xml. Pełne wyjaśnienie powyżej.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/Content/Images/mstile-70x70.png"/>
      <square150x150logo src="/Content/Images/mstile-150x150.png"/>
      <square310x310logo src="/Content/Images/mstile-310x310.png"/>
      <wide310x150logo src="/Content/Images/mstile-310x150.png"/>
      <TileColor>#5cb95c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Mój plik manifest.json. Pełne wyjaśnienie powyżej.

{
    "name": "ASP.NET MVC Boilerplate (Required! Update This)",
    "icons": [
        {
            "src": "\/Content\/icons\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/Content\/icons\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/Content\/icons\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}

Lista plików w projekcie (zwróć uwagę, że nazwy tych plików są ważne, jeśli zdecydujesz się umieścić niektóre z nich w katalogu głównym projektu, aby uniknąć używania powyższych metatagów):

favicon.ico
browserconfig.xml
Content/Images/
    android-chrome-144x144.png
    android-chrome-192x192.png
    android-chrome-36x36.png
    android-chrome-48x48.png
    android-chrome-72x72.png
    android-chrome-96x96.png
    apple-touch-icon.png
    apple-touch-icon-57x57.png
    apple-touch-icon-60x60.png
    apple-touch-icon-72x72.png
    apple-touch-icon-76x76.png
    apple-touch-icon-114x114.png
    apple-touch-icon-120x120.png
    apple-touch-icon-144x144.png
    apple-touch-icon-152x152.png
    apple-touch-icon-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    apple-touch-startup-image-1536x2008.png
    apple-touch-startup-image-1496x2048.png
    apple-touch-startup-image-768x1004.png
    apple-touch-startup-image-748x1024.png
    apple-touch-startup-image-640x1096.png
    apple-touch-startup-image-640x920.png
    apple-touch-startup-image-320x460.png

Całkowity narzut

Jeśli usuniesz komentarze, które mają 3 KB dodatkowego kodu HTML, jeśli nie obsługujesz ekranów powitalnych, to 1,5 KB. Jeśli używasz kompresji GZIP w treści HTML, co wszyscy powinni robić w dzisiejszych czasach, pozostawia to około 634 bajtów na żądanie na żądanie obsługi wszystkich platform lub 446 bajtów bez ekranów powitalnych. Osobiście uważam, że warto wspierać urządzenia IOS, Android i Windows, ale to Twój wybór, po prostu podaję opcje!

Boczna uwaga na temat aktualnej ikony / ekranu powitalnego / ustawień w sieci Web

Ta sytuacja z ikonami specyficznymi dla dostawcy, ekranami powitalnymi i specjalnymi tagami do sterowania przeglądarką internetową lub przypiętymi ikonami jest absurdalna. W idealnym świecie wszyscy używalibyśmy pliku favicon.svg, który mógłby wyglądać dobrze w każdym rozmiarze i mógłby być umieszczony w katalogu głównym strony. Tylko FireFox obsługuje to w momencie pisania (patrz CanIUse.com ).

Jednak ikony nie są obecnie jedynym ustawieniem, istnieje kilka innych ustawień specyficznych dla dostawców (pokazanych powyżej), ale plik favicon.svg obejmowałby większość przypadków użycia.

Aktualizacja

Zaktualizowano w celu uwzględnienia nowej wersji Androida / Chrome M39 + favicon / opcji motywów. Co ciekawe, przyjęli podobne podejście do Microsoftu, ale używają pliku JSON zamiast XML.

Najprostszym rozwiązaniem jest użycie jednego (!) Obrazu PNG (w 2020 roku).

Po prostu dodaj to do nagłówka dokumentu:

<link rel="shortcut icon" type="image/png" href="https://stackoverflow.com/img/icon-192x192.png">
<link rel="shortcut icon" sizes="192x192" href="https://stackoverflow.com/img/icon-192x192.png">
<link rel="apple-touch-icon" href="https://stackoverflow.com/img/icon-192x192.png">

Ostatni link jest dla Apple (ekran główny), drugi dla Androida (ekran główny), a pierwszy dla pozostałych.

Zwróć uwagę, że to rozwiązanie NIE obsługuje „kafelków” w systemie Windows 8/10. Obsługuje obrazy w skrótach, zakładkach i kartach przeglądarki.

Rozmiar jest dokładnie taki sam, jak rozmiar używany na ekranie głównym Androida. Rozmiar ikony na ekranie głównym Apple to 60 pikseli (3x), a więc 180 pikseli i zostanie zmniejszony. Inne platformy używają domyślnej ikony skrótu, która również zostanie zmniejszona.

Właściwie zadawałem sobie to samo pytanie i próbowałem szukać prostych projektów, które można by zintegrować z etapem kompilacji lub po prostu uprościć tworzenie wymaganych zasobów i znaczników.

Nie znalazłem niczego, co spełniałoby moje wymagania, więc stworzyłem faviconbuild i wydałem go na licencji MIT .

Celem tego projektu jest stworzenie centralnego, łatwego w utrzymaniu i uruchamianego lokalnie narzędzia wieloplatformowego do budowania ikon ulubionych i obsługi znaczników. Wykorzystuje moc Imagemagick, więc musisz go pobrać na swoją platformę lub użyć tych, które udostępniam w moich wydaniach . Zachęcamy do wykorzystania tego w projektach komercyjnych lub osobistych, wnoszenia wkładu, przesyłania żądań funkcji lub po prostu wykorzystywania jako źródła inspiracji dla własnych narzędzi.

Projekt składa się z pliku wsadowego dla Windows i skryptu bash dla Unix / Mac (lub Windows przez Cygwin). Możesz uzyskać pełną listę obsługiwanych opcji z opcji pomocy wewnętrznej -h lub --help.

dawny:

./faviconbuild.sh -h

Oba skrypty analizują prosty plik tekstowy , który można również zastąpić opcją -p lub --parsed. Plik jest po prostu szablonem poleceń do uruchomienia, dzięki czemu w razie potrzeby można łatwiej dostosować dane wyjściowe.

Opublikowałem również wpis na blogu na temat rozwoju i jako mini tutorial na temat skryptów bash / batch.