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;
- imagemagick
- inkscape; the CLI tool will automate the creation of various versions for you;
- svgo; to optimize the SVG file.
Make sure you have the latest versions of all requireed CLI tools. 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"
magick ./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 to provide browsers with information about a web application in 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 my app’s marketing site (for which I use Spinal Builder).
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 sites 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.
- 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.
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.