Favicons in Rails Apps: the 2024 way

The favicon, short for “favorites icon,” is one of those stone age features (with its inception in 1999). Initially introduced by Microsoft in Internet Explorer 5. This little icon (initially 16x16 pixels) quickly became a standard web practice, allowing for immediate recognition of websites and enhancing the user experience by making navigation more intuitive.

Over the years, the implementation and standards for favicons have evolved, supporting a range of sizes and formats to accommodate various devices and resolutions, from traditional desktop browsers to mobile screens and beyond. Today some favicon generators have you believe you need to add dozen different icons in different file formats and even more different dimensions.

But it can be quite more simpler! Let’s go over each step needed today to add favicons in your Rails apps.

Requirements

icon.svg; a square, svg version of your logo/icon in your app’s root folder;
inkscape; the CLI tool will automate the creation of various versions for you;
svgo; to optimize the SVG file.

When you have all these requirements at hand, let’s go to the next steps. All steps are meant to run in your Rails app’s root folder!

Go straight to the fully automated way.

Create favicon.ico

The original favicon still has it’s place. It’s the default icon that’s located in the root your app.

inkscape ./icon.svg --export-width=32 --export-filename="./tmp.png"
convert ./tmp.png ./public/favicon.ico
rm ./tmp.png

Create PNG files

inkscape ./icon.svg --export-width=512 --export-filename="./public/icon-512.png"
inkscape ./icon.svg --export-width=192 --export-filename="./public/icon-192.png"
inkscape ./icon.svg --export-width=180 --export-filename="./public/apple-touch-icon.png"

Optimise the SVG

npx svgo --multipass icon.svg

Create additional files

First the manifest.webmanifest. It is used in web development to provide browsers with information about a web application in a JSON format, including its name, icons, launch URL, and display settings, enabling a more app-like experience when the site is added to a user’s home screen.

cat <<EOF > ./public/manifest.webmanifest
{
  "name": "Rails Designer",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}
EOF

Then the partial to include in your application layout.

cat <<EOF > app/views/shared/_favicons.html.erb
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
EOF

Quick note on why I don’t use the Rails helper favicon_link_tag? By using plain HTML I can reuse it on app’s marketing site (for which I use a Static Site Generator).

Move icon.svg

The icon.svg that is used the basis for all other icons is not going to waste! Let’s move it into the public folder too.

mv icon.svg public/

Insert in your layout

Add the newly created favicons partial, between the <head />, in your app/views/layouts/application.html.erb.

<head>
  <title>Rails Designer</title>
  # …
  <​%= render partial: "shared/favicons" %>
  # …
</head>

And that’s all there’s to it! Now your Rails app will stand out amongst those other apps your users have open.

Automate all these steps

Feel like this is still too much work?! Run this handy Rails template in your Rails app to automate all the above steps for you. The same requirements as above apply.

rails app:template LOCATION="https://railsdesigner.com/favicons-in-rails/generate/"

Big shout out to Evil Martians for their blog post about favicons that goes into all the details.

Published at 15 February 2024. Last updated at 26 February 2024. Have suggestions or improvements on this content? Do reach out. Interested in sharing Rails Designer with the Ruby on Rails community? Become an affiliate.