Jestem zajęty witryną WordPress i przybyłem na scenę, aby dodać ostatni akcent, będąc fawiksem. Jestem przede wszystkim programistą, więc grafika i ikony nie są moją najmocniejszą stroną.

Jakie są najlepsze praktyki podczas tworzenia favicon (jeśli chodzi o rozmiary itp., Mam już projekt)? Chciałbym pomieścić dla każdego możliwego urządzenia, czy to mobilnego, tabletów, wyświetlaczy siatkówki itp. Ponadto nie chcę, aby było rozmazane, więc muszę wiedzieć, jaka gęstość pikseli ma być używana i wszystko.

Jeśli są jakieś aplikacje na Maca lub narzędzia online, które zrobią to za Ciebie (i zrób to poprawnie), to też byłoby świetnie. W przeciwnym razie wiem, jak znaleźć sposób na obejrzenie programów Illustrator i Photoshop.

Podstawy Favicons - najlepsza praktyka na rok 2013 :

ICO favicon.ico (32x32)

PNG favicon.png (96x96)

Tile Icon tileicon.png (144x144)

Apple Touch Icon apple-touch-icon-precomposed.png (152x152)

I „bolesnie obsesyjna” ściągawka do rozmiarów / typów ulubionych w GitHub.

Zawsze warto przeczytać: http://www.jonathantneal.com/blog/understand-the-favicon/

Co uwzględnić?

Minimum

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers (196x196 should cover all modern browsers) -->
<link rel="icon" type="image/png" href="/favicon.png">

<!-- iOS & other mobile devices (ideally 180x180, at least 120x120) -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">

Dla Obsessive

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs)  -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers & Devices -->
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="icon" type="image/png" href="/favicon-64x64.png" sizes="64x64">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-128x128.png" sizes="128x128">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">

<!-- iOS & other mobile devices -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

<!-- Windows Tiles (optionally omitted and replaced with browserconfig.xml in root directory) -->
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

favicon.ico

favicon.ico jest najstarszym z ulubionych, działał od tego czasu, zanim wiele osób czytających to się urodziło i nadal działa doskonale.

Microsoft zaleca dołączanie obrazów o rozmiarach 16x16, 32x32 i 48x48.

Standardowy sposób definiowania favicon:

<link rel="shortcut icon" href="/favicon.ico" />

Przeglądarki przeszukają katalog główny witryny, favicon.icoaby można było pominąć link. Niektóre starsze przeglądarki domyślnie deklarują domyślnie, favicon.iconawet jeśli zadeklarowano PNG o bardziej odpowiednim rozmiarze, więc pozostawienie ICO niezgłoszonego w katalogu głównym i zadeklarowanie PNG o różnych rozmiarach może być dobrym pomysłem.

favicon.png

HTML5 wprowadził ten sizesatrybut, aby pomóc zadeklarować ikony o wielu rozmiarach. Korzystanie z określonych plików PNG daje większą kontrolę nad używanymi rozmiarami i oznacza, że ​​ładowany jest tylko prawidłowy obraz.

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

• www.w3.org - HTML5 - „ikona” typu łącza

Rozmiary, które deklarujesz, zależą od urządzeń, które chcesz obsługiwać. Niektóre typowe i niezbyt popularne rozmiary:

• 32x32
• 48x48
• 64x64
• 96x96
• Ikona Chrome Web Store 128 x 128
• 160x160 Chrome na Androida
• 192x192 Chrome na Androida
• Ikona szybkiego wybierania w Operze 195x195
• 196x196 Chrome na Androida
• 228x228 Ikona Opera Coast

Ikona Apple Touch

Ikony klipów internetowych iOS są dostępne w różnych rozmiarach dla różnych urządzeń i rozdzielczości. Możesz określić jedną lub kilka ikon o rozmiarze, jeśli nie zostanie znaleziona ikona o odpowiednim rozmiarze, zostanie użyta ikona ogólna bez zadeklarowanego rozmiaru.

Jeśli żadne elementy nie zostaną określone przy użyciu elementu łącza, iOS przeszuka katalog główny w poszukiwaniu ikon z apple-touch-iconprefiksem. Urządzenia z iOS nie są (co dziwne) jedynymi urządzeniami, które używają tych ikon (na przykład Android Chrome), więc zadeklarowanie ich jest bezpieczniejszą opcją.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

• Wytyczne dotyczące interfejsu człowieka w iOS - rozmiary ikon

• Biblioteka programistów iOS - Określanie ikony strony internetowej dla klipu internetowego

Płytki Windows

Kafelki są używane, gdy przypinasz witrynę do ekranu startowego w systemie Windows lub Windows Phone i są dostępne w wielu rozmiarach.

<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

Zalecane rozmiary obrazów są większe niż sugerują ich nazwy. Są to zalecane rozmiary z microsoft.com

                   | Minimum   | Recommended
Small  | 70 x 70   | 56 x 56   | 128 x 128
Medium | 150 x 150 | 120 x 120 | 270 x 270
Wide   | 310 x 150 | 248 x 120 | 558 x 270
Large  | 310 x 310 | 248 x 248 | 558 x 558

Kolor i tytuł płytki

Domyślne zachowanie kafelków polega na pobraniu tytułu kafelka z <title>tagu i przestrzeganiu wszelkiej przezroczystości na obrazach kafelków, pokazując kolor tła. Możesz dostosować kolor i tytuł za pomocą tych metatagów:

<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />

browserconfig.xml

Wszystkie msapplicationmetatagi można usunąć i zastąpić plikiem XML w folderze głównym o nazwie browserconfig.xml. Plik XML powinien wyglądać następująco:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/tile-small.png"/>
      <square150x150logo src="images/tile-medium.png"/>
      <wide310x150logo src="images/tile-wide.png"/>
      <square310x310logo src="images/tile-large.png"/>
      <TileColor>#582686</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Dalsza lektura i zasoby

• Ściągawka Favicon

• Ulubione, ikony dotykowe, ikony kafelków itp. Czego potrzebujesz? - Napisany jako quiz, ale zawiera wiele przydatnych informacji (możesz go po prostu przeczytać jako artykuł, zapomnij, że to quiz)

• Podręcznik ikon

• ImageMagick - Przydatne narzędzie wiersza polecenia do konwersji obrazów.

• RealFaviconGenerator.net - Kompleksowy generator favicon.

• FAVIC-O-MATIC - Kompleksowy generator favicon z łatwo dostosowywanymi formatami wyjściowymi.

To narzędzie pozwala zaoszczędzić dużo czasu. Wypróbuj to! Dba o wszystko dla Ciebie.

Prześlij swój obraz w rozmiarze około 800px x 800px, aby był ładny i wyraźny.

http://realfavicongenerator.net/

Dodaj także ten metatag, aby móc nazwać swoją ikonę, jeśli niektóre zapisują się tam na urządzeniu iOS.

<meta name="apple-mobile-web-app-title" content="Website Name">

Mam nadzieję, że to pomaga!

Użyj tego zadania GRUNT, aby wygenerować wszystkie możliwe warianty:

https://github.com/gleero/grunt-favicons

Generuje wszystkie znane typy i rozmiary ikon z obrazu PNG. Używa ImageMagick.

Wejście: kwadratowe logo w png. Możesz także przechowywać pliki źródłowe z prefiksem rozdzielczości, np. Source.16x16.png.

Wydajność:

favicon.ico (16x16, 32x32, 48x48) — desktop browsers, address bar, tabs, safari reading list, non-retina iPhone, windows 7+ taskbar, windows desktop;
favicon.png (64x64) — modern browsers;
apple-touch-icon.png (57x57) — iPhone non-retina, Android 2.1+;
apple-touch-icon-60x60.png (60x60) — iPhone iOS7+;
apple-touch-icon-72x72.png (72x72) — iPad non-retina;
apple-touch-icon-76x76.png (76x76) — iPad non-retina iOS 7;
apple-touch-icon-114x114.png (114x114) — iPhone retina, iOS 6 and lower;
apple-touch-icon-120x120.png (120x120) — iPhone retina, iOS 7 and higher;
apple-touch-icon-144x144.png (144x144) — iPad retina;
apple-touch-icon-152x152.png (152x152) — iPad retina iOS 7;
windows-tile-144x144.png (144x144) — Windows 8 tile;
coast-icon-228x228.png (228x228) - Coast browser;
firefox-icon-16x16.png (16x16) - Firefox on Android / Windows;
firefox-icon-30x30.png (30x30) - Firefox OS;
firefox-icon-32x32.png (32x32) - Firefox on Android / Windows;
firefox-icon-48x48.png (48x48) - Firefox on Android / Windows;
firefox-icon-60x60.png (60x60) - Firefox OS;
firefox-icon-64x64.png (64x64) - Firefox on Android / Windows;
firefox-icon-90x90.png (90x90) - Firefox OS;
firefox-icon-120x120.png (120x120) - Firefox OS;
firefox-icon-128x128.png (128x128) - Firefox on Android / Windows;
firefox-icon-256x256.png (256x256) - Firefox on Android / Windows;
homescreen-196x196.png (196x196) - Android Homescreen.

Dodaje zmiany do pliku HTML.

http://faviconit.com

utworzy około 15 różnych rozmiarów ikon dla wszystkich urządzeń z jednego PNG w wysokiej rozdzielczości.

Ja również szukałem rozwiązania favicon i nie chciałem polegać na usługach internetowych stron trzecich. Nie mogłem znaleźć żadnych ogólnych rozwiązań, które działałyby jako prosty krok kompilacji, więc stworzyłem faviconbuild . Opiera się na ImageMagick, więc możesz pobrać najnowszą wersję tego dla swojego systemu lub użyć niektórych, które podałem w moich wydaniach .

Wydałem go na licencji MIT, aby każdy mógł swobodnie używać go do celów komercyjnych lub osobistych lub po prostu czerpać z niego inspirację. Jeśli znajdziesz jakieś błędy lub chcą przedłużyć to nie krępuj się dostać zaangażowany .

Będę aktualizował stronę projektu bardziej szczegółowymi informacjami, ale ma już naprawdę przydatne i standardowe menu pomocy i działa na systemach Unix, Mac i Windows.

Po prostu uruchom skrypt .bat lub .sh w swoim terminalu.

np. dla systemu Windows:

faviconbuild.bat -h

lub dla Unix / Mac (lub Windows, jeśli używasz Cygwin):

faviconbuild.sh -h

To da ci informacje o wersji wraz z dostępnymi opcjami. Skrypt został zaprojektowany do pobierania obrazu wejściowego i generowania wszystkich wymaganych obrazów wraz z wymaganym znacznikiem HTML, który należy uwzględnić w witrynie.

Oto przykład, w jaki sposób używam go w jednym z moich projektów:

./faviconbuild/faviconbuild.sh -i ./source.png

Po prostu umieściłem folder faviconbuild w folderze specyficznym dla projektu, więc nie musiałem dotykać rzeczywistych plików projektu i obok tego umieściłem plik source.png. Domyślne zachowanie skryptu polega na umieszczeniu wszystkiego w zagnieżdżonym folderze kompilacji, który jest gitignored, aby nie kolidował z projektem, jeśli używasz git.

Jeśli czegoś brakuje, prześlij żądanie funkcji.

Mam też post na blogu z dodatkowymi informacjami.

Mam nadzieję, że uznasz to za przydatne.

Jest tu wiele przydatnych informacji dotyczących rozmiarów favicon i generatorów.

Mogę dodać do dyskusji, wyjaśniając potrzeby projektowe różnych rozmiarów.

Tak, favicon, ikona, symbol i logo mogą być oparte na tej samej sztuce, ale każdy musi być renderowany specjalnie do tego rozmiaru, aby wyglądał jak najdokładniej (mówię, że automatyczne generatory nie poradzą sobie dobrze z aliasingiem i gradientami na Rozmiar 16 pikseli i automatycznie wygenerowany obraz nie zostaną zoptymalizowane dla rozmiaru 128 pikseli, jeśli zaczniesz mniejszy rozmiar.

Narysuj swoją grafikę w rozdzielczości 128 pikseli lub dowolnym formacie kwadratu o dużym rozmiarze, używając wszystkich sztuczek 3D, które chcesz. Eksportuj ikony różnych rozmiarów pojedynczo, sprawdzając wynik i dostosowując wzorzec, aby działał najlepiej w tym rozmiarze.

Dla 16 x 16 zrobię siatkę kwadratów 16 x 16 i pokoloruję je indywidualnie, aby mieć jak największą kontrolę nad wyjściem.