Jak mieć wiele rozmiarów favikonów, ale domyślnie tylko 16x16?

Question

Ogólnie rzecz biorąc, dobrą praktyką jest serwowanie favicon.ico w wielu rozmiarach, ponieważ w ten sposób wygląda lepiej, gdy skrót jest tworzony lub witryna jest przypięta (IE9). Rozmiar favicon z łatwością zwiększa się dziesięciokrotnie, powodując wolniejsze ładowanie strony (w moim przypadku favikon 16x16 to 1kb, 16, 32, 64 = 30kb).

Witryny takie jak Facebook i Yahoo obsługują domyślnie favicony 16x16, czyli < 1kb, ale po przypięciu tych witryn używane zdjęcie ma odpowiedni rozmiar. Zakładam, że większy obraz jest ładowany tylko w razie potrzeby, co rozwiązuje dylemat. Bezskutecznie próbowałem dowiedzieć się, jak te witryny to robią. Czy ktoś to wie?

Answer 1

Aktualizacja:

Moja odpowiedź oryginalny jest niższa jednak od pisania tego posta wierzę, że może być lepszym sposobem obsługi favicons z HTML 5. Chciałbym stworzyć favicon 32x32 (tylko że rozmiar) w przypadku Internet Explorera 9 i starszych, ale użyj innych metod tworzenia favikonów o wyższej rozdzielczości (typ pliku PNG) dla innych przeglądarek, w tym urządzeń mobilnych. Możesz uzyskać dodatkowe informacje na temat see my answer here.

---

Original Odpowiedź na pytanie:

Oto jak można to zrobić:

1. Download png2ico. Wypakuj do c: \

2. Utwórz swoje ikony w swoim ulubionym programie. Utwórz 64x64, 32x32, 16x16. (Uwaga: 64x64 prawdopodobnie nie jest potrzebne i zwiększy rozmiar pliku, jednak należy użyć co najmniej 32x32 i 16x16). Zapisz jako icon-64.png (dla rozmiaru 64x64) icon-32.png (32x32) i icon-16.png (16x16) w tym samym folderze co png2ico. Ogranicz kolory do minimum.

3. Otwórz wiersz polecenia - Zmień katalogi na folder png2ico. (cd \png2ico)

4. Raz w odpowiednim katalogu, uruchom polecenie:

   png2ico.exe favicon.ico --colors 16 icon-64.png icon-32.png icon-16.png 
   

   Uwaga: Różnica w wielkości pliku na dodanie ikony rozmiarze 64x64 zwiększyła plik 2KB. Po prostu użyłbym 32x32 i 16x16. (Uruchom ten sam kod co powyżej usuwając icon-64.png)

5. Pobierz plik favicon.ico z folderu png2ico. Prześlij go na serwer, dodaj do nagłówka <link rel="shortcut icon" href="http://example.com/favicon.ico" /> i już możesz iść.

Podczas pracy nad nim można tworzyć ikony dla iPada i iPhone'a. You can find more info on recommended sizes here and how to implement them into your site.

Również na Favicons można znaleźć również more general info na stronie Favicons.

Uwaga: Nie wiem, czy tak robią Facebook lub Yahoo, ale to odpowiada na pytanie, jak to zrobić.

Answer 2

Facebook "favicon.ico" zawiera dwa rozmiary: 16x16 i 32x32.Jestem pewien, że wiesz, jak połączyć dwa obrazy ico w jeden, jednak "sztuczka" polega na tym, że używają dwóch wyjątkowo zoptymalizowanych obrazów.

Odkryłem, że Photoshop tworzy nadmiar plików PNG i nadęty plik ICO. (Uwaga: Photoshop wymaga wtyczki do tworzenia plików ICO.)

Najlepszym sposobem na stworzenie małych, zoptymalizowanych plików ICO jest użycie znanego bezpłatnego edytora obrazów o nazwie "Gimp". W skrócie, wystarczy postępować zgodnie z tym samouczkiem dotyczącym tworzenia plików ICO:
http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp Ważna wskazówka: Po przejściu do kroku zapisywania obrazu .ico i określeniu bitów na piksel (bpp), zmień go na 4bpp lub coś podobnego (musisz poeksperymentować, aby zobaczyć, jak nisko można przejść bez pogorszenia jakości obrazu).

Korzystając z powyższych instrukcji, udało mi się utworzyć favikon 1 kb zawierający 16x16 i 32x32 obrazy. Dla porównania, najmniejsze mogłem uzyskać ten sam favicon za pomocą Photoshopa, wtyczek i innych narzędzi 5kb.

Answer 3

Jeśli podoba Ci się skryptów, napisałem jeden, aby przekonwertować dowolny obraz na favicon o wielu rozdzielczościach przy użyciu ImageMagick.

http://blog.lavoie.sl/2012/11/multi-resolution-favicon-using-imagemagick.html

Na pytanie, dlaczego Facebook i Yahoo mogą mieć high-res "przypiąć" obrazów, to dlatego, że oni również mają apple-touch-icon i og:image.

Answer 4

Możesz też zalogować się do dowolnego komputera z zainstalowanym ImageMagick, zmienić nazwę obrazu źródłowego (z rozdzielczością co najmniej 256x256 pikseli i pliku w formacie PNG) na "favicon.png" i uruchomić następującą komendę:

convert favicon.png -bordercolor white -border 0 \ 
     \(-clone 0 -resize 16x16 \) \ 
     \(-clone 0 -resize 32x32 \) \ 
     \(-clone 0 -resize 48x48 \) \ 
     \(-clone 0 -resize 57x57 \) \ 
     \(-clone 0 -resize 64x64 \) \ 
     \(-clone 0 -resize 72x72 \) \ 
     \(-clone 0 -resize 110x110 \) \ 
     \(-clone 0 -resize 114x114 \) \ 
     \(-clone 0 -resize 120x120 \) \ 
     \(-clone 0 -resize 128x128 \) \ 
     \(-clone 0 -resize 144x144 \) \ 
     \(-clone 0 -resize 152x152 \) \ 
     \(-clone 0 -resize 180x180 \) \ 
     \(-clone 0 -resize 228x228 \) \ 
     -delete 0 -alpha off -colors 256 favicon.ico 

I będziesz mieć swoje favicon.ico z najbardziej znanymi formatami upieczonymi w jednym pliku.

Pamiętaj również o przejrzeniu favikonu oszukańczego @https://github.com/audreyr/favicon-cheat-sheet, aby uzyskać więcej informacji o favicon.