Die 6 häufigsten Fragen zum Thema Icons

von Michaela Schammler 0

In dem vorherigen Blogbeitrag über „Die Vor- und Nachteile von Icons und Icon-Fonts“ haben Sie einige Tipps und Tricks zum Thema Icons erhalten. Falls Ihnen noch weitere Fragen zu Icons eingefallen sind, dann sind Sie hier genau richtig.

Was sind eigentlich Icons?

Icons sind Grafiken oder Illustrationen, die dem Betrachter Hinweise zu wichtigen Informationen geben sollen. Dadurch können wichtige Inhalte wie z. B. die Telefonnummer oder die E-Mail-Adresse hervorgehoben werden. Durch die Benutzung mehrerer Icons können komplexe Texte aufgelockert werden, um so dem Betrachter das Lesen zu erleichtern.

Warum sind meine Icons so pixelig?

Wenn Ihre Icons verpixelt sind, dann liegt es meistens daran, dass die Icons ein falsches Dateiformat haben. Icons sollten immer als Vektordatei gespeichert werden. Dadurch kann jedes Icon auf eine beliebige Größe skaliert werden ohne verpixelt auszusehen.

Verpixeltes und scharfes Icon

Wie lässt sich die Farbe von bestehenden Icons verändern?

Um die Farbe Ihrer Icons anzupassen, sollten Sie Ihre Kenntnisse in CSS spezifizieren.

Sie können jedes Icon mithilfe einer Software wie z. B. Adobe Illustrator manuell einfärben. Diese Methode ist allerdings nur dann zu empfehlen, wenn Sie nur wenige Icons umfärben möchten.

Wenn Sie Erfahrungen im Umgang mit CSS haben, können Sie Ihre Icons mithilfe von CSS einfärben. Dies funktioniert jedoch nur, wenn Sie Ihre Icons als SVG-Datei eingebunden haben. Allerdings ist auch diese Methode sehr aufwendig, wenn Sie viele Icons anpassen wollen.

Falls Sie sehr viele Icons auf Ihrer Website verwenden, bietet es sich an, eine Icon Font zu verwenden. Wenn Ihre Icons als Icon Font in Ihre Website integriert wurden, dann können Sie innerhalb kürzester Zeit mithilfe von CSS alle Icons auf einmal einfärben.

 

Was tun wenn ein Icon aufgrund der geringen Größe ineinander verläuft?

Dies kann mehrere Gründe haben. Wenn ein falsches Dateiformat für Icons benutzt wird, kann es passieren, dass diese schlechter erkennbar sind. Zudem kann es daran liegen, dass Ihr Icon zu viele feine Linien oder Einzelelemente enthält.

Zuerst sollte das Icon in eine SVG-Datei umgewandelt werden. Wenn dies keinen großen Unterschied macht und das Icon weiterhin schlecht erkennbar ist, sollte das Icon auf wenige Einzelelemente reduziert und zu feinen Linien angepasst werden.

Ein unkenntliches Icon bei kleiner Größe

Warum soll ich keine Effekte bei meinen Icons anwenden?

Viele Effekte oder Verläufe wie z. B. der “Schlagschatten” oder der “Schein nach außen” sind pixelbasiert. Das heißt, sie bestehen nur aus Pixeln und nicht aus Vektoren. Da Icons ausschließlich aus Vektoren bestehen sollten, können keine pixelbasierte Effekte eingebunden werden.

Einen Link auf dem Homebildschirm eines Smartphones speichern

Was sind Favicons?

Favicons sind kleine 16x16 Pixel Grafiken, welche z. B. neben der URL im Browser angezeigt werden. Wenn ein Nutzer eine Website mit einem “Lesezeichen” speichert, wird das Favicon in der Liste abgebildet. Da viele Nutzer heutzutage mit einem mobilen Endgerät unterwegs sind, können Favicons auch dort sinnvoll genutzt werden. Jede beliebige Website kann innerhalb von kurzer Zeit auf dem Bildschirm des Smartphones oder Tablets gespeichert werden. Dort wird das Favicon, sofern es richtig angelegt ist, angezeigt. Danach kann mit nur einem Klick auf das Icon sofort die Website im Browser geöffnet werden.

Wir hoffen, dass wir Ihnen mit diesem Blogbeitrag weiterhelfen konnten. Falls Sie noch weitere Fragen oder Anregungen zum Thema Icons haben, können Sie diese gerne in unserem Kommentarbereich stellen.

Der Beitrag gefällt? Brüllen Sie ihn heraus!

Einen Kommentar schreiben

Datenschutzerklärung*: Sie erklären sich damit einverstanden, dass Ihre Daten zur Bearbeitung Ihres Anliegens gemäß der Datenschutzerklärung verwendet werden. Weitere Informationen und Widerrufshinweise gibt es in der Datenschutzerklärung.

Zurück