A lesson on making the minimal/necessary amount of favicons at different dimensions & getting them to load.
We’re going to make proper favicons for the most common sizes & hit most of the use cases. You can go really crazy with different favicons for different platforms and crazy amounts of sizes. But most often it’s unnecessary—doing just the most common minimum version is good enough.
This is what it should look like when it’s done:
Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!
Start the lesson by forking and cloning the micro-interface-branding repository.
Fork & clone the “micro-interface-branding” repo.
The repository will have some starter files to get you on your way and include requirements for Markbot so you can be sure you’ve completed the lesson.
This includes some starter code that you can get by forking and cloning the repository. You’ll use Markbot to double check everything is done properly.
After forking & cloning the repository, also download these PSD files for our favicons.
Following our standard folder layout we should have this:
Go ahead and make your index.html file with the standard html5 & viewport snippets—but we won’t need anything else.
Don’t forget to follow the naming conventions.
Favicons are made up of a bunch of differently sized icons. We need all these different icons sizes for different situations, different browsers, and better rendering.
16 × 16 px — the most basic, used on browser tabs on non-retina screens32 × 32 px — used in browser tabs on retina screens & bookmarks48 × 48 px — used lots on Windows & when larger icons are needed196 × 196 px — used on device homescreens, bookmarks, etc, wherever a large size is helpfulBecause our logos & graphics can get really distorted at smaller pixel dimensions. It’s best to spend a few minutes to tweak and massage the icon for different sizes. Or even make a modified/simplified version for the smallest pixel sizes.
I’ve already made optimized icons at each screen size for you.
When making your own favicons don’t be lazy and use the same icon for every size, spend time optimizing it for different pixel dimensions.
The second step, after making optimized graphics, is exporting them all as PNGs. Use Photoshop’s “Save for Web” and choose “PNG-24”.
We don’t need it for these icons, but be sure to select “Transparency” for your own icons if they have see through areas.
Save these icons somewhere temporary, like your desktop.
Don’t forget to smush these PNGs! Drop them all into ImageOptim to get them as small as they can be.
We need to generate a specialized favicon file: the ICO file. This is a container format that actually has multiple differently sized graphics inside. Specifically we want 16px, 32px & 48px size icons inside the ICO container. The browser will choose whichever suits its purpose.
On non-retina screens browsers will chose the 16px icon size—form within the single .ico file—to show in tabs. But on retina screens they’ll choose the 32px size icon—all from within the single file format.
The absolute best application to make favicons with is IconSlate—but it costs about $7. (It’s totally worth it.) No other application will allow us to use the 48px icon that we really need.
I would suggest you use IconSlate to generate the favicon, but if you don’t want to spend the money, skip to the next step and see how to do it for free.
If you check out your Desktop now, you’ll have the 4 PNG files and your new ICO file.
Make sure you rename you brand new favicon to exactly favicon.ico for it to work properly.
You can generate a multi-size favicon for free using the X-Icon Editor web application. Unfortunately it does not support the 48px size icon so it’ll make favicons that are missing a big chunk of use cases.
First we need to move the files we’re keeping to the correct location.
favicon.ico into your website repositoryfavicon-196.png into your website repositoryIt’s best practice to keep the favicons in the root of the whole website folder.
You should go ahead and do some clean up. We don’t need the smaller favicon PNGs any more, so delete the following images:
favicon-16.pngfavicon-32.pngfavicon-48.pngFinally we can insert the favicons into our HTML. We only need two new tags to make this work—both in the <head> of our HTML document.
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>Fully Fern</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon-196.png">
</head>
<body>
⋮
That’s it! Check out your new favicon in the browser.
Notice how the browser will switch between the 16px & 32px icon when you switch between retina and non-retina screens.
Include the default favicon.ico file—this will be used in tabs and many different situations. The browser will extract whichever size from within the file that it needs.
Browsers will look for the larger icon when they need it, for homescreens, etc.
Drop the final, coded exercise into Markbot and fix all the errors until Markbot gives you all green (and maybe a little yellow).
After you’ve fixed all the problems, go ahead and submit the assignment. You’ll immediately get your grade.