Ich bin mit einer WordPress-Site beschäftigt und bin auf die Bühne gekommen, um dem Favicon den letzten Schliff zu geben. Ich bin hauptsächlich Entwickler, also sind Grafiken und Symbole nicht meine Stärke.
Was sind die besten Vorgehensweisen 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 Handy, Tablets, Retina-Displays usw. Außerdem möchte ich nicht, dass es verschwommen wird, also muss ich wissen, welche Pixeldichte zu verwenden ist und alles.
Wenn es einige Mac-Apps oder Online-Tools gibt, die dies für Sie erledigen (und es richtig machen), wäre das auch großartig. Ansonsten weiß ich, wie ich mich in Illustrator und Photoshop zurechtfinde.
Die Grundlagen von Favicons - Best Practice für 2013 :
ICO favicon.ico (32x32)
PNG favicon.png (96x96)
Kachelsymbol tileicon.png (144x144)
Apple Touch-Symbol apple-touch-icon-precomposed.png (152x152)
Und ein „schmerzhaft obsessiver“ Spickzettel für Favicon-Größen/-Typen auf GitHub.
Immer lesenswert: http://www.jonathantneal.com/blog/understand-the-favicon/
<!-- 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">
<!-- 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 ist das älteste der Favicons, es hat funktioniert, bevor viele Leute, die dies lesen, geboren wurden, und es funktioniert noch heute perfekt.
Microsoft empfiehlt , Bilder in den Größen 16 x 16, 32 x 32 und 48 x 48 einzuschließen.
Die Standardmethode zum Definieren Ihres Favicons:
<link rel="shortcut icon" href="/favicon.ico" />
Browser durchsuchen das Stammverzeichnis Ihrer Website, favicon.icosodass Sie den Link weglassen können. Einige ältere Browser verwenden standardmäßig die Deklaration, favicon.icoselbst wenn ein PNG mit geeigneterer Größe deklariert ist. Daher kann es eine gute Idee sein, das ICO im Stamm nicht deklariert zu lassen und PNGs mit unterschiedlicher Größe zu deklarieren.
HTML5 hat das sizesAttribut eingeführt, um Symbole mit mehreren Größen zu deklarieren. Die Verwendung bestimmter PNGs gibt Ihnen eine bessere Kontrolle über die verwendeten Größen und bedeutet, dass nur das richtige Bild geladen wird.
<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">
Die von Ihnen angegebenen Größen hängen von den Geräten ab, die Sie unterstützen möchten. Einige gängige und nicht so übliche Größen:
iOS-Webclip-Symbole 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 generische Symbol ohne deklarierte Größe verwendet.
Wenn keine Symbole mit einem Link-Element 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 die sicherere Option, 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-Entwicklerbibliothek – Festlegen eines Webseitensymbols für einen Webclip
Kacheln werden verwendet, wenn Sie eine Website an den Startbildschirm von Windows oder Windows Phone anheften, und sind in verschiedenen Größen erhältlich.
<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
Das Standardverhalten von Kacheln besteht darin, den Titel der Kachel aus dem <title>Tag zu übernehmen und jegliche Transparenz in den Kachelbildern zu respektieren, die die Hintergrundfarbe zeigen. Sie können die Farbe und den Titel mit diesen Meta-Tags anpassen:
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
Alle msapplicationMeta-Tags können entfernt und durch eine XML-Datei namens browserconfig.xml. Die XML-Datei sollte wie folgt 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>
Favicons, Touch-Icons, Kachel-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)
ImageMagick - Nützliches Befehlszeilentool zum Konvertieren von Bildern.
RealFaviconGenerator.net - Umfassender Favicon-Generator.
FAVIC-O-MATIC - Umfassender Favicon-Generator mit leicht anpassbaren Ausgabeformaten.
Dieses Tool ist eine super Zeitersparnis. Versuch es! Es regelt alles für Sie.
Laden Sie Ihr Bild mit einer Größe von etwa 800 x 800 Pixel hoch, damit es schön und gestochen scharf ist.
http://realfavicongenerator.net/
Fügen Sie auch dieses Meta-Tag hinzu, damit Sie Ihr Symbol benennen können, wenn einige auf Ihrem iOS-Gerät gespeichert werden.
<meta name="apple-mobile-web-app-title" content="Website Name">
Ich hoffe, das hilft!
Verwenden Sie diese GRUNT-Aufgabe, um alle möglichen Varianten zu generieren:
https://github.com/gleero/grunt-favicons
Erzeugt alle bekannten Arten und Größen von Symbolen 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 bleiben, z. B. source.16x16.png.
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 Änderungen zur HTML-Datei hinzu.
erstellt etwa 15 verschiedene Icon-Größen für alle Geräte aus einem hochauflösenden PNG.
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 Build-Schritt funktionieren würden, also habe ich faviconbuild erstellt . Es stützt sich auf ImageMagick , sodass Sie die neueste Version davon für Ihr System herunterladen oder einige verwenden können, die ich in meinen Veröffentlichungen bereitgestellt habe .
Ich habe es unter der MIT-Lizenz veröffentlicht, sodass es jedem frei steht, es für den kommerziellen oder persönlichen Gebrauch zu verwenden oder sich einfach etwas davon inspirieren zu lassen. Wenn Sie Fehler finden oder es erweitern möchten, können Sie sich gerne daran beteiligen .
Ich werde die Projektseite mit detaillierteren Informationen aktualisieren, aber sie hat bereits ein wirklich 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.
zB für Windows:
faviconbuild.bat -h
oder für Unix / Mac (oder Windows bei Verwendung von Cygwin):
faviconbuild.sh -h
Dadurch erhalten Sie die Versionsinformationen zusammen mit den verfügbaren Optionen. Das Skript ist so konzipiert, dass es ein Eingabebild nimmt und alle verschiedenen Bilder ausgibt, die zusammen mit dem erforderlichen HTML-Markup erforderlich sind, um es auf Ihrer Website einzufügen.
Dies ist ein Beispiel dafür, wie ich es derzeit in einem meiner Projekte verwende:
./faviconbuild/faviconbuild.sh -i ./source.png
Ich habe den Faviconbuild-Ordner einfach in einen projektspezifischen Ordner gelegt, damit ich die eigentlichen Projektdateien nicht berühren musste, und daneben habe ich meine source.png platziert. Das Standardverhalten des Skripts besteht darin, alles in einen verschachtelten Build-Ordner zu legen, der von Git ignoriert wird, damit es nicht mit dem Projekt kollidiert, wenn Sie Git verwenden.
Wenn ich etwas vermisse, senden Sie bitte eine Feature-Anfrage.
Ich habe auch einen Blogbeitrag 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 Designanforderungen der verschiedenen Größen erkläre.
Ja, die Größen von Favicons, Symbolen, Symbolen und Logos können auf derselben Grafik basieren, aber jedes muss speziell auf diese Größe gerendert werden, um am genauesten zu erscheinen (ich sage, dass die automatischen Generatoren das Aliasing und die Farbverläufe nicht gut handhaben 16 Pixel Größe und das automatisch generierte Bild wird nicht für die 128 Pixel Größe optimiert, wenn Sie kleiner angefangen haben.
Zeichnen Sie Ihre Kunst mit 128 Pixeln oder einem beliebigen großen quadratischen Format und verwenden Sie alle 3D-Tricks, die Sie möchten. Exportieren Sie die Symbole in verschiedenen Größen einzeln, prüfen Sie das Ergebnis und passen Sie den Master so an, dass er bei dieser Größe am besten funktioniert.
Für die 16 x 16 werde ich ein 16 x 16-Raster aus Quadraten erstellen und sie einzeln einfärben, um die beste Kontrolle über die Ausgabe zu haben.
KMSTR
Kokosnussbirne
Hanna