Czy favicon musi mieć format 32 x 32 lub 16 x 16?

692

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?

Alex G.
źródło
moja odpowiedź stackoverflow.com/a/45301651/661584 jest dużo łatwiejsza. może pomóc. dzięki
MemeDeveloper

Odpowiedzi:

1448

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.

philippe_b
źródło
137

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

Matt
źródło
8
Czy jest jakieś odniesienie do tej listy?
Abdulhameed
81

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) .

Daniel Vassallo
źródło
W 2006 roku doszedłem do podobnych wniosków (w „Favicon Primer” (kwiecień 2006; autor: hakre) ), ale nie wiedziałem o tym materiale W3C z 2005 roku (tak seraching + czytanie pomaga :)). Dziękuję za podsumowanie. Tym razem pisałem i nie czy , ale to było również o kolorach 4bit.
hakre
2
To projekt od 2005 roku? Oo
mcont
7
To użycie należy teraz zastąpić standardem HTML5 . Nie ma ograniczenia rozmiaru ikony i podał przykład z ikoną 32768x32768.
rhgb
1
@rhgb Dziękujemy! Rozglądałem się dookoła zdezorientowany, dlaczego, do cholery [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.
Sahsahae
64

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!

PedroHCan
źródło
6

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.

Ćwiek
źródło
1
Wierzę, że XP i nowsze obsługują format podobny do PNG (sam PNG?) Dla obrazów RGBA. egressive.com/tutorial/… pokazuje, jak możesz używać GIMP do dołączania takich obrazów do .icopliku.
SamB
1
ICO używa 1-bitowego kanału alfa, podczas gdy PNG ma 8 bitów, podobnie jak w innych kanałach. ICO wystarczy dla zwykłych ikon, ale w niektórych przypadkach PNG będzie bardziej pożądany z powodu tej różnicy.
Steen Schütt
SamB ma prawie rację, a Time Sheep ma pół racji. ICO obsługuje osadzone w nim obrazy PNG, a osadzone pliki PNG muszą być 32-bitowymi obrazami RGBA.
Cornstalks,
2

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.

Trevor
źródło
3
przepraszam, ale jest o wiele więcej niż sugeruje twoja odpowiedź. Odwiedź stackoverflow.com/a/45301651/661584 i przeczytaj, jeśli chcesz - jego szalony kompleks. może pomóc. dzięki
MemeDeveloper
1

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/

Richard
źródło
2
Państwo może mieć wiele rozmiarów ikon w tym samym pliku.
Brad
Dziękuję bardzo, to doskonały artykuł. Nadal trochę tajemnica, co zrobiliby urządzenia Apple z plikami ico, które zawierają obrazy o wielu rozmiarach.
Alex G,
1

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)

Snoob Dogg
źródło