Favicons in Rails apps: the 2024 way
Tags: rails
Published: 2024-02-15 11:00:00

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](https://favicon.io/) [favicon](https://www.favicon-generator.org/) [generators](https://realfavicongenerator.net/) 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](https://inkscape.org/release/0.92.2/mac-os-x/homebrew/dl/); the CLI tool will automate the creation of various versions for you;
- [svgo](https://github.com/svg/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!

**Scroll down for a way to automate all these steps!**


## Create favicon.ico

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

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


## Create PNG files

```bash
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

```bash
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.

```bash
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.

```bash
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 the 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.

```bash
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`.

```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.

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

_Big shout out to [Evil Martians](https://evilmartians.com/) for their blog post about favicons that goes into all the details._