nicht angemeldet
Hallo miteinander,
nun sind ja schon einige Monate ins Land gegangen und die damals noch schwer im Bau befindliche Homepage ist endlich online. Mein Freund Wolfgang, der derzeit seinen Urlaub genießt, hat mir dabei maßgeblich geholfen. Ohne ihn wäre mein Gehirn jetzt wohl leicht aufgeweicht und die Seite noch immer nicht online.
Nun wurstele ich schon den ganzen Tag daran herum, daß die oben erwähnte Seite Audio-Bibel NeÜ (optimiert für Smartphone und Tablet) auch auf mobilen Geräten das favicon anzeigt.
Hier selfhtml.org-Wiki über "favicon" und hier Webdesign-Blog von Nina Boecher habe ich mich versucht schlau zu machen; mit der Umsetzung klappt es leider noch nicht so recht ... 😕
Folgendes habe ich (derzeit nur in der index.htm) im Head-Bereich hinzugefügt und auf meinen Webspace hochgeladen:
Einen "android-icon.png" in der Größe von 196 x 196 px liegt im Root-Verzeichnis
Diverse "apple-touch-icons.png" in verschiedenen Größen liegen alle im Root-Verzeichnis
Zwei vorgefertigte "apple-touch-icons" im PNG-Format liegen im Root-Verzeichnis
Vier Windows-Tile-Icons in verschiedenen Größen liegen im Verzeichnis /img
Das sieht in der index.htm dann so aus:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="deutschprachige Hörbibel (Audio-Dateien im MP3-Format) zum kostenlosen Download" />
<meta name="keywords" content="kostenlos, Audio-Bibel, Hörbibel, NeÜ, bibel-heute, Karl-Heinz Vanheiden, Startseite" />
<meta name="author" content="Holger Hönle" >
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="7 days" />
<title>Audio-Bibel NeÜ - Startseite</title>
<link href="./css/standard.css" type="text/css" rel="stylesheet" />
<link rel="shortcut icon" href="android-icon.png" sizes="196x196">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120-precomposed.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152-precomposed.png" />
<meta name="msapplication-square70x70logo" content="img/smalltile.png" />
<meta name="msapplication-square150x150logo" content="img/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="img/widetile.png" />
<meta name="msapplication-square310x310logo" content="img/largetile.png" />
<script src="./skripte/script.js"></script>
</head>
Ein Apple-Smartphone besitze ich zwar nicht, aber die apple-icons sollten - zumindestens vorläufig noch - auch auf Android funktionieren, oder? Und auch meinem Windows 8.1 (nur virtuell, über Virtualbox, da ich mit Linux-Mint unterwegs bin) sehe ich auch keine favicons.
Was mache ich denn alles falsch?
Vielen Dank für Eure Hilfe!
Holger
akzeptierte Antworten
Frage zum Wiki-Artikel „Grafik/Favicon“
Matthias Scharwies
Julius
Gunnar Bittersmann