Ich bin auf einer WordPress-Site beschäftigt und bin auf die Bühne gekommen, um den letzten Schliff als Favicon hinzuzufügen. Ich bin in erster Linie ein Entwickler, daher sind Grafiken und Symbole nicht meine Stärken.

Was sind die Best Practices beim Erstellen eines Favicons (in Bezug auf Größen usw. habe ich bereits das Design)? Ich möchte für jedes mögliche Gerät Platz haben, sei es für Handys, Tablets, Retina-Displays usw. Außerdem möchte ich nicht, dass es unscharf wird, also muss ich wissen, welche Pixeldichte ich verwenden soll und alles.

Wenn es einige Mac-Apps oder Online-Tools gibt, die dies für Sie tun (und es auch richtig machen), wäre das auch großartig. Ansonsten kann ich mich in Illustrator und Photoshop zurechtfinden.

Die Grundlagen von Favicons - Best Practice für 2013 :

ICO favicon.ico (32 x 32)

PNG favicon.png (96 x 96)

Kachelsymbol tileicon.png (144 x 144)

Apple Touch-Symbol apple-touch-icon-precomposed.png (152 x 152)

Und ein "schmerzhaft obsessiver" Spickzettel für Favicon-Größen / -Typen auf GitHub.

Immer eine Lektüre wert: http://www.jonathantneal.com/blog/understand-the-favicon/

Was soll enthalten sein?

Das 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">

Für die Besessenen

<!-- 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 ist das älteste der Favicons, es hat funktioniert, seitdem viele Leute, die dies lesen, geboren wurden und heute noch perfekt funktionieren.

Microsoft empfiehlt, Bilder in den Größen 16 x 16, 32 x 32 und 48 x 48 einzuschließen.

Die Standardmethode zur Definition Ihres Favicons:

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

Browser durchsuchen das Stammverzeichnis Ihrer Website nach, favicon.icosodass Sie den Link weglassen können. Einige ältere Browser verwenden standardmäßig die deklarierte favicon.icoGröße , auch wenn eine PNG-Datei mit geeigneter Größe deklariert ist. Daher ist es möglicherweise eine gute Idee, den ICO im Stammverzeichnis nicht deklariert zu lassen und PNGs mit unterschiedlicher Größe zu deklarieren.

favicon.png

HTML5 hat das sizesAttribut eingeführt , mit dessen Hilfe Symbole mit mehreren Größen deklariert werden können. Durch die Verwendung bestimmter PNGs können Sie die verwendeten Größen besser steuern und es wird nur das richtige Bild geladen.

<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 - Verknüpfungstyp "Symbol"

Die von Ihnen angegebenen Größen hängen von den Geräten ab, die Sie unterstützen möchten. Einige gebräuchliche und nicht so gebräuchliche Größen:

• 32 x 32
• 48x48
• 64 x 64
• 96 x 96
• Symbol für den 128 x 128 Chrome Web Store
• 160x160 Chrome für Android
• 192x192 Chrome für Android
• 195x195 Opera- Kurzwahlsymbol
• 196x196 Chrome für Android
• 228 x 228 Opera Coast-Symbol

Apple Touch Icon

iOS-Webclipsymbole gibt es in verschiedenen Größen für verschiedene Geräte und Auflösungen. Sie können ein oder mehrere Symbole in der Größe angeben. Wenn kein Symbol in der entsprechenden Größe gefunden wird, wird das allgemeine Symbol ohne deklarierte Größe verwendet.

Wenn mit einem Link-Element keine Symbole angegeben werden, durchsucht iOS das Stammverzeichnis nach Symbolen mit dem apple-touch-iconPräfix. iOS-Geräte sind (seltsamerweise) nicht die einzigen Geräte, die diese Symbole verwenden (z. B. Android Chrome). Daher ist es sicherer, sie zu deklarieren.

<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">

• Richtlinien für die Benutzeroberfläche von iOS - Symbolgrößen

• iOS Developer Library - Angeben eines Webseiten-Symbols für den Webclip

Windows-Kacheln

Kacheln werden verwendet, wenn Sie eine Website auf dem Startbildschirm von Windows oder Windows Phone anheften und in verschiedenen Größen erhalten.

<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" />

Die empfohlenen Bildgrößen sind größer als die Namen dieser Bilder vermuten lassen. Dies sind die empfohlenen Größen von 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

Fliesenfarbe und Titel

Das Standardverhalten von Kacheln besteht darin, den Titel der Kachel aus dem <title>Tag zu übernehmen und Transparenz in den Kachelbildern zu respektieren, wobei die Hintergrundfarbe angezeigt wird. Sie können die Farbe und den Titel mithilfe dieser Meta-Tags anpassen:

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

browserconfig.xml

Alle msapplicationMeta-Tags können entfernt und durch eine XML-Datei im Stammverzeichnis ersetzt werden browserconfig.xml. Die XML-Datei sollte folgendermaßen aussehen:

<?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>

Weiterführende Literatur & Ressourcen

• Favicon Spickzettel

• Favicons, Touch Icons, Tile Icons, etc. Was brauchen Sie? - Als Quiz geschrieben, enthält aber viele nützliche Informationen (und Sie können es einfach als Artikel lesen, vergessen Sie, dass es ein Quiz ist)

• Das Icon-Handbuch

• ImageMagick - Nützliches Befehlszeilentool zum Konvertieren von Bildern.

• RealFaviconGenerator.net - Umfassender Favicon-Generator.

• FAVIC-O-MATIC - Umfassender Favicon-Generator mit einfach anpassbaren Ausgabeformaten.

Dieses Tool spart viel Zeit. Versuch es! Es kümmert sich um alles für Sie.

Laden Sie Ihr Bild mit einer Auflösung von 800 x 800 Pixel hoch, damit es schön und klar ist.

http://realfavicongenerator.net/

Fügen Sie auch dieses Meta-Tag hinzu, damit Sie Ihr Symbol benennen können, wenn einige auf dem iOS-Gerät gespeichert werden.

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

Hoffentlich hilft das!

Verwenden Sie diese GRUNT-Aufgabe, um alle möglichen Varianten zu generieren:

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

Erzeugt alle bekannten Symbole für Typen und Größen aus PNG-Bildern. Verwendet ImageMagick.

Eingabe: Quadratisches Logo in png. Sie können auch in der Nähe der Quelldateien mit dem Auflösungspräfix "source.16x16.png" bleiben.

Ausgabe:

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.

Fügt der HTML-Datei Änderungen hinzu.

http://faviconit.com

erstellt aus einem hochauflösenden PNG ungefähr 15 verschiedene Symbolgrößen für alle Geräte.

Auch ich war auf der Suche nach einer Favicon-Lösung und wollte mich nicht auf Webservices von Drittanbietern verlassen. Ich konnte keine generischen Lösungen finden, die als einfacher Erstellungsschritt funktionieren würden, daher habe ich faviconbuild erstellt . Es basiert auf ImageMagick, sodass Sie die neueste Version für Ihr System herunterladen oder einige verwenden können, die ich in meinen Releases bereitgestellt habe .

Ich habe es unter der MIT-Lizenz veröffentlicht, damit jeder es für den kommerziellen oder persönlichen Gebrauch verwenden oder sich einfach davon inspirieren lassen kann. Wenn Sie Fehler finden oder erweitern möchten, können Sie sich gerne daran beteiligen .

Ich werde die Projektseite mit detaillierteren Informationen aktualisieren , aber sie verfügt bereits über ein sehr praktisches und standardmäßiges Hilfemenü und funktioniert unter Unix, Mac und Windows.

Sie führen einfach entweder das BAT- oder das SH-Skript in Ihrem Terminal aus.

ex für Windows:

faviconbuild.bat -h

oder für Unix / Mac (oder Windows, wenn Cygwin verwendet wird):

faviconbuild.sh -h

Dadurch erhalten Sie die Versionsinformationen zusammen mit den verfügbaren Optionen. Das Skript erstellt ein Eingabebild und gibt alle erforderlichen Bilder sowie das erforderliche HTML-Markup aus, das auf Ihrer Website enthalten sein soll.

Dies ist ein Beispiel, wie ich es derzeit in einem meiner Projekte verwende:

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

Ich habe den Ordner faviconbuild einfach in einen projektspezifischen Ordner gelegt, damit ich nicht die eigentlichen Projektdateien und die Seite berühren musste, auf der ich meine Datei source.png platziert habe. Das Standardverhalten des Skripts besteht darin, alles in einen verschachtelten Erstellungsordner zu verschieben, der gitignored ist, damit er nicht mit dem Projekt in Konflikt gerät, wenn Sie git verwenden.

Wenn ich etwas vermisse, reichen Sie bitte eine Funktionsanfrage ein.

Ich habe auch einen Blogeintrag mit weiteren Informationen.

Ich hoffe, Sie finden das nützlich.

Hier finden Sie viele nützliche Informationen zu Favicon-Größen und Generatoren.

Ich kann die Diskussion ergänzen, indem ich die Designbedürfnisse der verschiedenen Größen erkläre.

Ja, die Favicon-, Symbol-, Symbol- und Logo-Größen können auf derselben Grafik basieren, aber jede muss speziell auf diese Größe gerendert werden, um die genaueste Darstellung zu erzielen (ich sage, dass die Auto-Generatoren das Aliasing und die Farbverläufe auf der nicht gut verarbeiten Die 16-Pixel-Größe und das automatisch generierte Bild werden nicht für die 128-Pixel-Größe optimiert, wenn Sie kleiner anfangen.

Zeichnen Sie Ihre Kunst mit 128 Pixeln oder einem beliebigen quadratischen Format und verwenden Sie dabei alle gewünschten 3D-Tricks. Exportieren Sie die verschiedenen Größensymbole nacheinander, überprüfen Sie das Ergebnis und stellen Sie den Master so ein, dass er bei dieser Größe am besten funktioniert.

Für das 16 x 16-Format erstelle ich ein 16 x 16-Raster aus Quadraten und male sie einzeln aus, um die Ausgabe optimal zu steuern.