Generating apple-touch-icon using Rails

Question

I am trying to add the apple-touch-icon link to my application head so that it will be displayed on homescreen bookmarks. The Rails guides state the following:

Mobile Safari looks for a different link tag, pointing to an image that will be used if you add the page to the home screen of an iOS device. The following call would generate such a tag:

favicon_link_tag 'mb-icon.png', rel: 'apple-touch-icon', type: 'image/png'
<link href="/assets/mb-icon.png" rel="apple-touch-icon" type="image/png" />

However when I use the following (timestamps removed):

<%= favicon_link_tag 'favicon.ico' %>
<%= favicon_link_tag 'apple-icon.jpeg', rel: 'apple-touch-icon', type:'image/jpeg' %>

it does not correctly generate the apple-touch-icon (favicon works as expected). It inserts "images" and not "assets" into the href. The code generated is:

<link href="/assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
<link href="/images/apple-icon.jpeg" rel="apple-touch-icon" type="image/jpeg">

I have also tried just putting the link right into the application file without using the TagHelper, but it doesn't append the timestamp to the file, so the file isn't correct.

Goby

Answer 1

Firstly, apple touch icons need to be in PNG format, not JPEG. They should also be named 'apple-touch-icon'.

As for the problem, the first but not ideal solution is to place your apple icon into your public directory and hard code the link.

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

Alternatively on that same note you could add it /public/images so that the generated link is correct.

I suspect however that a plugin such as bootstrap is appending the link as it sees fit. In the case you are using bootstrap or something similar I would be searching the HAML for 'apple-touch-icon' and seeing what you can find. Most probably something along the lines of:

 %link{:href => "images/apple-touch-icon.png", :rel => "apple-touch-icon"}

If you find it, remove it.

That aside its potentially rails being too smart and realising that the filename/filetype are incorrect and appending the link.

Drat

changing the name exactly to "apple-touch-icon" and using a png worked. Rails now generates the correct assets path. Thanks for the help. – Goby

Answer 2

You can create a _favicon.html.erb partial with the following content:

<% %w(76 120 152 167 180).each do |size| %>
  <%= favicon_link_tag "apple-touch-icon-#{size}x#{size}.png", rel: 'apple-touch-icon', type: 'image/png', sizes: "#{size}x#{size}" %>
<% end %>

<% %w(16 32).each do |size| %>
  <%= favicon_link_tag "favicon-#{size}x#{size}.png", rel: 'icon', type: 'image/png', sizes: "#{size}x#{size}" %>
<% end %>

Include it in your application.html.erb:

<%= render 'favicon' %>

This will create apple touch icons and favicons in different sizes (optimized for different devices). You can then generate these icons via one of the many websites out there such as iconifier and place them in your app/assets/images/ directory.

This is what I've done and it works really well for me.

Regalado

This is a great solution for generating the various favicons. – Goby

New size: 167x167. It's for iPad Pro. – Lochia

A really elegant solution! – Familist

Answer 3

To help some people crawling on that problem. Here is an offline script to convert your PNG (or whatever can be read by ImageMagick, which is pretty wide). Made in collaboration with Le Chat :

#!/bin/bash

# Fichier généré par Mistral.ai
# Auteur : Roland Laurès
# License MIT

# Vérifier si la commande convert est installée
if ! command -v convert &> /dev/null
then
    # Détecter le système d'exploitation
    if [[ -f /etc/os-release ]]; then
        # Utiliser le fichier /etc/os-release pour détecter le système d'exploitation
        . /etc/os-release
        if [[ "$ID" == "debian" || "$ID" == "ubuntu" ]]; then
            echo "La commande 'convert' n'est pas installée. Veuillez l'installer avec la commande suivante :"
            echo "sudo apt-get update"
            echo "sudo apt-get install imagemagick"
        elif [[ "$ID" == "fedora" ]]; then
            echo "La commande 'convert' n'est pas installée. Veuillez l'installer avec la commande suivante :"
            echo "sudo dnf install ImageMagick"
        fi
    elif [[ -f /etc/redhat-release ]]; then
        # Détecter le système d'exploitation Red Hat ou CentOS
        if [[ -f /etc/centos-release ]]; then
            echo "La commande 'convert' n'est pas installée. Veuillez l'installer avec la commande suivante :"
            echo "sudo yum install ImageMagick"
        else
            echo "La commande 'convert' n'est pas installée. Veuillez l'installer avec la commande suivante :"
            echo "sudo dnf install ImageMagick"
        fi
    elif [[ "$(uname)" == "Darwin" ]]; then
        # Détecter macOS
        echo "La commande 'convert' n'est pas installée. Veuillez l'installer avec la commande suivante :"
        echo "brew install imagemagick"
    else
        echo "La commande 'convert' n'est pas installée. Veuillez l'installer avec le gestionnaire de paquets de votre système d'exploitation."
    fi
    exit 1
fi

# Définir les dimensions des favicons à générer
declare -a SIZES=(16 24 32 48 64 76 96 120 128 152 167 180 192 256 384 512)

# Définir le chemin du fichier source
SOURCE_FILE="$1"

# Créer un dossier pour stocker les favicons générés
rm -fr app/assets/images/favicons
mkdir -p app/assets/images/favicons

# Boucler sur les dimensions des favicons à générer
for size in "${SIZES[@]}"
do
  # Générer le favicon avec la taille actuelle
  echo -n "Conversion vers ${size}x${size}..."
  convert "$SOURCE_FILE" -resize "${size}x${size}" "app/assets/images/favicons/favicon-${size}x${size}.png"
  echo 'fait.'
done

I saved it on bin/generate_favicons.sh but it can be independent of your project. It only depends on the presence of convert which is an ImageMagick command.

Then for Rails user, taking back the response of @Danig2k, the haml version of its template that I put in app/views/layouts/_favicon.html.haml:

- %w(76 120 152 167 180).each do |size|
  = favicon_link_tag "favicons/favicon-#{size}x#{size}.png", rel: 'apple-touch-icon', type: 'image/png', sizes: "#{size}x#{size}"
- %w(16 32).each do |size|
  = favicon_link_tag "favicons/favicon-#{size}x#{size}.png", rel: 'icon', type: 'image/png', sizes: "#{size}x#{size}"

Then it is called in the layout script app/views/layouts/application.html.haml :

%html{ lang: 'fr' }
  %head
    ...
    = render 'layouts/favicon'
    ...
  %body
    ...

Hopes this can help someone else.

Any comments are welcome to improve the template (maybe making a little gem for it, I didn't find any).

Lao