Avatar for Username

Mozilla Destek’te Ara

Destek dolandırıcılığından kaçının. Mozilla sizden asla bir telefon numarasını aramanızı, mesaj göndermenizi veya kişisel bilgilerinizi paylaşmanızı istemez. Şüpheli durumları “Kötüye kullanım bildir” seçeneğini kullanarak bildirebilirsiniz.

Daha Fazlasını Öğren

Bu başlık arşivlendi. Yardıma ihtiyacınız varsa lütfen yeni bir soru sorun.

HTML5 Custom Homescreen Icon + Mobile Web App

  • 2 yanıt
  • 9 kişi bu sorunu yaşıyor
  • 1 gösterim
  • Son yanıtı yazan: mwpclark

SuperSluether
SuperSluether
more options

I've been learning HTML5 Game Development, and have a question about Firefox for Android: How would I get a custom icon for a bookmark added to the home screen? It looks like Firefox either uses a favicon, or a default star.

On iOS Safari, I was able to accomplish this using <link rel="apple-touch-icon" href="image.png" />, and the functionality seems to carry over to Google Chrome.

I tried using this code for a custom favicon on a specific page: <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' /> but it only works when I view the file directly on the computer. When accessing the page through Apache, there is no favicon.

My other question was about Mobile Web App functionality. In iOS Safari and Google Chrome for Android, adding "apple-mobile-web-app-capable" or "mobile-web-app-capable" lets the webpage run as a fullscreen web app when saved to the homescreen. Firefox just opens it like a normal bookmark.

Any help is appreciated. I'm learning from the book 'HTML5 Game Development for Dummies.'

I've been learning HTML5 Game Development, and have a question about Firefox for Android: How would I get a custom icon for a bookmark added to the home screen? It looks like Firefox either uses a favicon, or a default star. On iOS Safari, I was able to accomplish this using <link rel="apple-touch-icon" href="image.png" />, and the functionality seems to carry over to Google Chrome. I tried using this code for a custom favicon on a specific page: <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' /> but it only works when I view the file directly on the computer. When accessing the page through Apache, there is no favicon. My other question was about Mobile Web App functionality. In iOS Safari and Google Chrome for Android, adding "apple-mobile-web-app-capable" or "mobile-web-app-capable" lets the webpage run as a fullscreen web app when saved to the homescreen. Firefox just opens it like a normal bookmark. Any help is appreciated. I'm learning from the book 'HTML5 Game Development for Dummies.'

Seçilen çözüm

Since nobody responded to my question, I did some more thorough searching. If I insert this code:

<link rel="icon" href="/path/to/some.png" />

The bookmark has the specified icon. However, the result is disappointing because Firefox's bookmark icon appears very low-quality and blurry next to Chrome's bookmark icon.

Bu yanıtı konu içinde okuyun 👍 3

Tüm Yanıtlar (2)

SuperSluether
SuperSluether Sorunun sahibi
more options

Seçilen çözüm

Since nobody responded to my question, I did some more thorough searching. If I insert this code:

<link rel="icon" href="/path/to/some.png" />

The bookmark has the specified icon. However, the result is disappointing because Firefox's bookmark icon appears very low-quality and blurry next to Chrome's bookmark icon.

mwpclark
mwpclark
more options

Hey Super, same problem here. I have cleaned up the graphic and created several sizes of png files with transparent background. Chrome bookmark added to home screen displays transparency, but firefox adds a pink square background. You can view at coconutisland.com. Grateful for any answers. Mike