iPhone Lesezeichen-Symbol festlegen

Füge dies in deinen <head>-Bereich ein und setze das href-Attribut auf ein PNG-Bild mit einer Größe von 57 x 57 Pixel.

<link rel="apple-touch-icon" href="iphone-icon.png"/>

Um zu verhindern, dass das iPhone seinen eigenen Glanz hinzufügt

<link rel="apple-touch-icon-precomposed" href="icon" />

Kommentare

Scott

# 1. März 2010

Habe mich schon immer gefragt, wie man das macht, danke!

Es ist auch gut zu wissen, dass das Bild automatisch abgerundete Ecken und einen kleinen abgeschrägten Effekt erhält...

Antworten

Tony

# 8. März 2010

Wenn Sie das WPTouch iPhone Theme Plugin installiert haben, wird es das dann für Sie tun, solange Sie das Bild hochladen?

Antworten

black-light-studio

# 18. April 2011

Mit iPhone 4G und ähnlichen Geräten können die Symbole etwa 128 Pixel und mehr groß sein.
Daher würde ich persönlich 128 Pixel und vielleicht sogar mehr verwenden, aber nicht zu groß, da dies die Bandbreite belasten würde.

Antworten

Rob

# 25. Mai 2011

Sie können auch unterschiedliche Symbole für verschiedene Plattformen angeben, wie folgt...

<!-- For non-Retina iPhone, iPod Touch, and Android 2.2+ devices: -->
<link rel="apple-touch-icon" href="//dummyimage.com/57x57.png">
<!-- For first-generation iPad: -->
<link rel="apple-touch-icon" sizes="72x72" href="//dummyimage.com/72x72.png">
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon" sizes="114x114" href="//dummyimage.com/114x114.png">
<!-- No such device exists yet, so if this value is used,
    it means the sizes attribute is ignored: -->
<link rel="apple-touch-icon" sizes="228x228" href="//dummyimage.com/228x228.png">

Antworten

Reyna Wilcox

# 29. November 2011

Wir haben tatsächlich etwas wirklich Tolles für die "Lesezeichen-Seite" bei dieser Website gemacht. Ich hasse diese Buttons, ich finde sie altmodisch und nicht mehr wirklich nötig. Aber auf der Seite http://www.elegantcandlegifts.com denke ich, haben wir gute Arbeit geleistet, damit es funktioniert.

Reyna

Antworten

Jorge

# 2. Januar 2012

Vielen Dank dafür, ich habe es für diese Seite verwendet. NYNE Spot Design Prost

Antworten

Damon

# 5. September 2012

Das Folgende scheint bei mir nicht zu funktionieren

< !-- For non-Retina iPhone, iPod Touch, and Android 2.2+ devices: -- >
 <link rel="apple-t-ouch-icon" href="//dummyimage.com/57x57.png">
 <!-- For first-generation iPad: -- >
 <link rel="apple-touch-icon" sizes="72x72" href="//dummyimage.com/72x72.png" >
 <!-- For iPhone 4 with high-resolution Retina display: -- >
 <link rel="apple-touch-icon" sizes="114x114" href="//dummyimage.com/114x114.png" >
 <!-- No such device exists yet, so if this value is used,
    it means the sizes attribute is ignored: -- >
 <link rel="apple-touch-icon" sizes="228x228" href="//dummyimage.com/228x228.png" >

Ich benutze ein iPhone 4 mit 5.0.1. Hat sich der Code seit diesem Artikel geändert?

Antworten

Nader Mah

# 25. September 2012

Die Herausforderung für mich ist nicht das Symbol, sondern der automatische Text, der vom Titel der Website stammt.
Können wir ihn in etwas anderes ändern?

Antworten

mathias sonderskov

# 1. Oktober 2012

in php

<title>
<?php
$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    if ($browser == true){
echo '123-mobile'; //text for iLol
}else{
echo 'Welcome to 123-homepage!';
}
?>
</title>

vielleicht ähnliches für iPod, iPad usw. machen.

Abel La O Fernandez

Permalink zum Kommentar# 20. Dezember 2012
iOS 6 unterstützt benutzerdefinierte Web-App-Titel
Abel La O Fernandez

Permalink zum Kommentar# 20. Dezember 2012
Hier ist der Code, er wurde in meinem vorherigen Kommentar nicht angezeigt.
```
<meta name="apple-mobile-web-app-title" content="App Title">
```

Juan

# 31. Januar 2014

Großartig, danke!

Antworten

Kommentare

Hinterlasse eine Antwort Antwort abbrechen