Chciałbym użyć jednego obrazu jako zwykłego favikonu i fawikonu przyjaznego dla urządzeń iPhone / iPad.
czy to możliwe? Czy przyjazna dla iPada skala PNG 72x72 byłaby łączona ze zwykłą ulubioną przeglądarką? A może muszę użyć osobnego obrazu 16 x 16 lub 32 x 32?
Odpowiedzi:
W przypadku IE Microsoft zaleca 16x16, 32x32 i 48x48 spakowane w pliku favicon.ico .
W przypadku systemu iOS firma Apple zaleca określone nazwy plików i rozdzielczości , maksymalnie 180 x 180 dla najnowszych urządzeń z systemem iOS 8.
Android Chrome używa głównie manifestu, a także opiera się na ikonie Apple touch.
IE 10 w systemie Windows 8.0 wymaga obrazów PNG i koloru tła, a IE 11 w systemie Windows 8.1 i 10 akceptuje kilka obrazów PNG zadeklarowanych w dedykowanym pliku XML o nazwiebrowserconfig.xml .
Safari dla Mac OS X El Capitan wprowadza ikonę SVG dla przypiętych kart .
Niektóre inne platformy szukają plików PNG o różnych rozdzielczościach, takich jak obraz 96x96 dla Google TV lub obraz 228x228 dla Opera Coast .
Spójrz na tę listę zdjęć favicon, aby uzyskać pełne odniesienie.
TLDR: Ten generator favicon może generować wszystkie te pliki jednocześnie. Generator można również zaimplementować jako wtyczkę WordPress . Pełne ujawnienie: jestem autorem tej strony.
Nie widzę tu żadnych aktualnych informacji, więc oto:
Aby odpowiedzieć teraz na to pytanie, 2 ikony nie zrobią tego, jeśli chcesz, aby ikona wyglądała świetnie wszędzie. Zobacz rozmiary poniżej:
16 x 16 - Standardowy rozmiar dla przeglądarek
24 x 24 - Rozmiar strony przypiętej do IE9 dla interfejsu użytkownika
32 x 32 - Nowa karta strony IE, przycisk paska zadań Windows 7+, pasek boczny listy czytelniczej Safari
48 x 48 - witryna Windows
57 x 57 - iPod touch , iPhone do 3G
60 x 60 - iPhone touch do iOS7
64 x 64 - Witryna Windows, pasek boczny Safari Reader List w HiDPI / Retina
70 x 70 - Win 8.1 Metro kafelek
72 x 72 - iPad touch do iOS6
76 x 76 - iOS7
96 x 96 - GoogleTV
114 x 114 - iPhone Retina Touch do iOS6
120 x 120 - iPhone Retina Touch iOS7
128 x 128 - Aplikacja Chrome Web Store, Android
144 x 144 - Kafelek metra IE10 na przypiętej stronie, iPad Retina do iOS6
150 x 150 - Wygraj kafelek metra 8.1
152 x 152 - iPad Retina Touch iOS7
196 x 196 - Android Chrome
310 x 150 - Win 8.1 szeroki kafelek metra
310 x 310 - Win 8.1 kafelek metra
Nie jestem pewien, czy / jak przeglądarki skalują duże ikony, ale W3C sugeruje następujące 1 :
Format wybranego obrazu musi wynosić 16 x 16 pikseli lub 32 x 32 pikseli, przy użyciu kolorów 8-bitowych lub 24-bitowych. Format obrazu musi być w formacie PNG (standard W3C), GIF lub ICO.
1 w3c.org: Jak dodać Favicon do swojej witryny (Szkic w fazie rozwoju) .
[current year], wciąż muszę radzić sobie z pewnymi ograniczeniami, kiedy rzeczy, które możesz zrobić tylko z samym css, są wystarczająco niesamowite i prawie przegapiłem twoją odpowiedź. Użyję wtedy tylko tego, co chcę, a jeśli coś nie obsługuje, to jest to ich problem, zgodnie ze standardem.
W rzeczywistości, aby favicon działał poprawnie we wszystkich przeglądarkach, będziesz musiał dodać ponad 10 plików w odpowiednich rozmiarach i formatach.
Mój przyjaciel i ja stworzyliśmy aplikację właśnie do tego! można go znaleźć na stronie faviconit.com
Zrobiliśmy to, aby ludzie nie musieli ręcznie tworzyć wszystkich tych obrazów i poprawnych tagów, aby wszystkie były bardzo denerwujące!
W tym samym pliku możesz mieć wiele rozmiarów ikon. Rutynowo tworzę ulubione ( .icopliki), które mają 48, 32 i 16 pikseli. Możesz dodać obraz w dowolnym rozmiarze. Pytanie brzmi, czy iPhone użyje icopliku?
icoobsługuje także przezroczystość, ale nie jestem pewien, czy jest to kanał alfa, taki jak PNG; prawdopodobnie bardziej jak GIF, gdy jest włączony lub wyłączony.
.icopliku.
Zgodnie z artykułem Wikipedii na temat Favicon, Internet Explorer obsługuje tylko format ICO dla ulubionych.
Trzymałbym się dwóch różnych ikon.
Favicon nie musi mieć formatu 16 x 16 ani 32 x 32. Możesz utworzyć favicon o wymiarach 80 x 80 lub 100 x 100, po prostu upewnij się, że obie wartości są tego samego rozmiaru i oczywiście nie zmieniaj go na zbyt duży lub zbyt mały, wybierz odpowiedni rozmiar.
Obawiam się, że będziesz potrzebować osobnych plików dla każdej rozdzielczości. Istnieje bardzo dobry artykuł na temat monitora kampanii, w którym opisano, w jaki sposób utworzyli i zaimplementowali swoje ikony dla każdego urządzenia z systemem iOS:
http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/
Jak się dowiedziałem, żadne z tych kilku rozwiązań nie jest idealne. Korzystanie z generatora favicon jest rzeczywiście dobrym rozwiązaniem, ale ich liczba jest przytłaczająca i trudno jest wybrać. Chciałbym dodać, że jeśli chcesz, aby Twoja strona była włączona w PWA, musisz także podać ikonę 512x512, jak twierdzi Google Devs :
ikony, w tym 192px i 512px
Nie spotkałem wielu generatorów favicon egzekwujących te kryteria ( firebase spełnia , ale jest wiele rzeczy, których nie robi). Więc rozwiązanie musi być mieszanką wielu innych rozwiązań.
Nie wiem, dziś na początku 2020 r., Czy dostarczenie 16x16, 32x32 nadal jest istotne. Wydaje mi się, że nadal ma to znaczenie w pewnym kontekście, na przykład, jeśli użytkownicy nadal używają IE z jakiegoś powodu (tak się dzieje w niektórych prywatnych firmach, które z pewnych powodów nie migrują do nowszej przeglądarki)