A tiny file that makes your site look finished.
Direct answer
Add a favicon by placing an icon file in your site and linking it in the <head>. Use an SVG or PNG, and add an Apple touch icon for phones. Test by hard-refreshing, since browsers cache favicons.
HTML
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Sizes to prepare
| File | Size |
|---|---|
favicon.ico | 48 × 48 |
icon.svg | scalable |
apple-touch-icon.png | 180 × 180 |
Design tips
- Keep it simple, since it is tiny.
- Use high contrast.
- Check it on light and dark browser themes.
Where Teyro fits
Teyro's Build and Launch a Website course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
Add it before you launch and test it in a fresh tab.
