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?
Odpowiedzi:
Favicon jest o wiele bardziej złożony niż to, co brzmi. 10 lat temu
favicon.ico
był 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 komputerzeNa przykład generuje nie tylko
msapplication-TileImage
obraz i znaczniki, ale także nowszybrowserconfig.xml
plik 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.
źródło
<meta name="msapplication-config" content="../path/to/browserconfig.xml">
browserconfig.xml
nie trzeba go deklarować, dopóki znajduje się w katalogu głównym witryny. IE szuka go automatycznie. W pozostałych przypadkach (po wprowadzeniu w opcjach określonej ścieżki) generowana jest deklaracja.Oto pełny (jak wiem) przykład favicon na telefon komórkowy i tablet:
W przypadku IE11, oto często zadawane pytania
źródło
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.
Mój plik browsererconfig.xml. Pełne wyjaśnienie powyżej.
Mój plik manifest.json. Pełne wyjaśnienie powyżej.
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):
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.
źródło
favicon-
... - jeśli zaktualizuję nazwy w manifeście i<link>
tagach w dokumencie HTMLhead
?Najprostszym rozwiązaniem jest użycie jednego (!) Obrazu PNG (w 2020 roku).
Po prostu dodaj to do nagłówka dokumentu:
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.
źródło
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:
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.
źródło