Customize

Easy phone/tablet icons for web pages

Discussion in 'How To' started by DeathHamster, Jun 3, 2014.

  1. DeathHamster Member

    I'd noticed the apple-touch-icon stuff in page HTML for a while, but ignored it because I didn't have an Apple, and then I found out that it was an ad hoc standard for Android as well as Apple products.

    Explanation of what this icon is:

    For phones and tablets, you can bookmark browser pages. You can also drop that bookmark on the "desktop" of the phone.

    Here's my tablet:
    device-2014-06-02-215045.png

    There's a bookmark for Why We Protest. It looks like a bookmark. It has the small old school favicon for WWP on it, but except for that, it'll look like the other bookmarks.

    UmbraXenu is also a bookmark, but since that site has a defined apple-touch-icon, it uses that for the icon, and it looks more like an app. (Web apps use that to hide that they're browser-based.)

    It turns out that it's easy to add one to a site (or even one for every page).

    First, take an image file (jpg, png, etc). It can be any size, but it should scale well.

    Go to this site: http://manytools.org/http-html-text/apple-touch-icon-generator/ (Or do it all in an image editor.)

    Click on the browse button and select your file. (Don't check the gloss box.)

    Click on the Convert button. It should spit back a zip file for downloading. Do it.

    Inside the zip file, there will be four png files and a snippet of HTML. Throw away everything except the largest png file, which should be apple-touch-icon-ipad-retina-152x152.png. All devices with less resolution will scale the image down. Rename it to apple-touch-icon.png and throw it in the root directory of your site.

    With some devices, that's enough--they'll look for that file automatically. For others, add a line to the header of your HTML page:
    Code:
    <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
    Works for Android 4.4.2 tablets:
    touchbutt.png
    Works for old Android 2.2 phones:
    device-2014-06-03-092102.png
  2. Anonymous Member

    Given all the research and work you do and have done on these kinds of subjects, perhaps you can explain to me why the WWP GUI looks completely flat on my desktop computer when I switch to the WWP - Light or WWP Dark styles from the WWP - Classic?

Share This Page

Customize Theme Colors

Close

Choose a color via Color picker or click the predefined style names!

Primary Color :

Secondary Color :
Predefined Skins