Favicon

Antworten
Benutzeravatar
shadowcat
Administrator
Beiträge: 5354
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Favicon

Beitrag von shadowcat »

Mir ist gerade zum ersten Mal so richtig bewußt geworden, was für ein Drama das mit dem Favicon inzwischen geworden ist. :? Nicht nur, dass jedes Tablet-/Handy-Betriebssystem andere Icons möchte, nein, die dann auch noch in unterschiedlichen Größen. Ein vollständiger Seitenheader NUR FÜR DAS ICON sieht in etwa so aus (Quelle: https://www.w3.org/TR/html5/links.html#rel-icon):

Code: Alles auswählen

<!DOCTYPE HTML>
<html>
 <head>
  <title>lsForums — Inbox</title>
  <link rel=icon href=favicon.png sizes="16x16" type="image/png">
  <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
  <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
  <link rel=icon href=iphone.png sizes="57x57" type="image/png">
  <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
  <link rel=stylesheet href=lsforums.css>
  <script src=lsforums.js></script>
  <meta name=application-name content="lsForums">
 </head>
 <body>
Man kann es sogar noch weiter treiben:

Code: Alles auswählen

<link rel="apple-touch-icon" sizes="57x57" href="{url}/images/apple-icon-57x57.png" type="image/png">
<link rel="apple-touch-icon" sizes="60x60" href="{url}/images/apple-icon-60x60.png" type="image/png">
<link rel="apple-touch-icon" sizes="72x72" href="{url}/images/apple-icon-72x72.png" type="image/png">
<link rel="apple-touch-icon" sizes="76x76" href="{url}/images/apple-icon-76x76.png" type="image/png">
<link rel="apple-touch-icon" sizes="114x114" href="{url}/images/apple-icon-114x114.png" type="image/png">
<link rel="apple-touch-icon" sizes="120x120" href="{url}/images/apple-icon-120x120.png" type="image/png">
<link rel="apple-touch-icon" sizes="144x144" href="{url}/images/apple-icon-144x144.png" type="image/png">
<link rel="apple-touch-icon" sizes="152x152" href="{url}/images/apple-icon-152x152.png" type="image/png">
<link rel="apple-touch-icon" sizes="180x180" href="{url}/images/apple-icon-180x180.png" type="image/png">
<link rel="icon" type="image/png" sizes="192x192" href="{url}/images/android-icon-192x192.png" type="image/png">
<link rel="icon" href="{url}/images/favicon.ico" type="image/x-icon">
<link rel="icon" sizes="96x96" href="{url}/images/favicon-96x96.png" type="image/png">
<link rel="icon" sizes="32x32" href="{url}/images/favicon-32x32.png" type="image/png">
<link rel="icon" sizes="16x16" href="{url}/images/favicon-16x16.png" type="image/png">
Und dann gibt es noch eine gewisse Uneinigkeit darüber, ob der Typ "image/x-icon" überhaupt korrekt ist. Die meisten Quellen sagen ja, die Spezifikation sagt aber nein. (Siehe oben, der korrekte Typ wäre "image/vnd.microsoft.icon".)

Um das unseren Usern - und Template-Designern - künftig VIEL leichter zu machen, baue ich ins Backend ein, dass man eine Bildquelle hochladen kann - Größe möglichst über 180x180 Pixel - und BC dann automatisch die diversen Bildchen baut und ins Site-Verzeichnis legt. Und natürlich baut BC dann auch automatisch obigen Datenmüll... Verzeihung, obiges Markup in den Seitenheader ein. :mrgreen:
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
Morpheus
Beiträge: 1054
Registriert: Do 8. Aug 2013, 10:49
Kontaktdaten:

Re: Favicon

Beitrag von Morpheus »

Einfach nur Irre :ugeek:
Keiner ist unnütz, er kann immer noch als schlechtes Beispiel dienen!
Benutzeravatar
creativecat
Beiträge: 1444
Registriert: Mi 6. Feb 2013, 12:41
Kontaktdaten:

Re: Favicon

Beitrag von creativecat »

Subba Idee! Hab mich schon so oft darüber geärgert, aber auf den einfachen Trichter bin ich noch gar nicht gekommen gewesen! :-P
Eigentlich genau mein Motto: Lass den Computer für dich arbeiten! 8-)
Benutzeravatar
shadowcat
Administrator
Beiträge: 5354
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: Favicon

Beitrag von shadowcat »

(Die vorhandenen) Anzeigen kann man schon mal.

"Nebenbei" in Arbeit ist eine ganz neue Image-Klasse, die sowohl GD als auch Imagick unterstützt.
Dateianhänge
screenshot-2017-04-19-17-57-57.png
screenshot-2017-04-19-17-57-57.png (36.38 KiB) 6501 mal betrachtet
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
shadowcat
Administrator
Beiträge: 5354
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: Favicon

Beitrag von shadowcat »

Sehr nett zu lesen...

https://css-tricks.com/favicon-quiz/

Der Wahnsinn kennt keine Grenzen...

Question: What is the size of the square150x150logo tile picture?

A: 150x150. Can't you read?
B: Something else.

Answer: B, 270x270. Microsoft recommends larger sizes to support high density screen.
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
shadowcat
Administrator
Beiträge: 5354
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: Favicon

Beitrag von shadowcat »

Um den Wahnsinn wieder etwas einzufangen...
Dateianhänge
2017-04-19 18_25_57.png
2017-04-19 18_25_57.png (23.67 KiB) 6499 mal betrachtet
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
shadowcat
Administrator
Beiträge: 5354
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: Favicon

Beitrag von shadowcat »

Und wird auch schon geladen...
2017-04-19 19_23_10.png
2017-04-19 19_23_10.png (14.46 KiB) 6495 mal betrachtet
Apple-Icons etc. fehlen (bzw. sind hier nicht zu sehen), weil der verwendete Browser (Firefox unter Windows 7) die nicht unterstützt.
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
Morpheus
Beiträge: 1054
Registriert: Do 8. Aug 2013, 10:49
Kontaktdaten:

Re: Favicon

Beitrag von Morpheus »

Echt cool 8-)
Keiner ist unnütz, er kann immer noch als schlechtes Beispiel dienen!
Antworten