Where do you put favicon files in an Astro JS project?

Astro projects have a public folder in the root directory. You can place any files which do not need processing in there. It is an ideal place for favicon and manifest files. You can also put files for self-hosted fonts in there. For example, if you place `favicon.ico` in the public folder, browsers can access the file at https://example.com/favicon.ico on your built site.

Which favicon file formats should you use in 2022?

Traditionally, your site only needed an `ico` favicon file. Although it looked like a single file, it had multiple file sizes embedded. Today, however, the ico is only needed for legacy browsers, and it is safe just to include a single 32 pixel file. And that’s only if you want to support quite old legacy browsers. Modern browsers support the SVG format. These files are typically very small as they use vector graphics under the hood. That also means they look good at any size. Finally, for phones, you can include a few extras. These will be used as your site’s app icon when the user saves your site to their home screen.

How do you set the iPhone and Android home screen icons for your website or web app?

When a user clicks save site to home screen, iPhones will use a 180×180 px PNG file as your site’s icon on the home screen. In fact, you can include this, like a favicon, by adding a link tag in your page HTML head section. You need to set `rel` to `apple-touch-icon` and set `href` together with the path for the icon. Android devices look for a PWA manifest, so work a little differently. First, create two PNG files, one 192×192 px and another 512×512 px. Then just include a manifest file in a link tag (rel="manifest", href="/manifest.webmanifest") in the page HTML head section. Finally, populate the manifest.webmanifest file. This is in JSON format, with an `icons` array at the top level. The two icons are added to this array with src, type (usually `image/png`) and sizes `192×192` and `512×512` defined in an object for each.

Astro JS Favicon: 6 most Important Favicon Files # Astro JS Favicon: 6 most Important Favicon Files #

Astro JS Favicon: 6 most Important Favicon Files #

Published: 3 years ago

4 minute read

Gunning Fog Index: 5.6 2 comments

Content by Rodney

🌟 Astro JS Favicon #

In this Astro JS favicon video we see the six most important favicon files to add to your new Astro JS for wide support in modern and legacy browsers, and, devices. Of course, we will also see where you need to add the favicon links in your site’s markup. As well as that, find out where in your project to save the favicon files to.

Although it sounds like a lot to get through, probably the hardest part is coming up with a favicon! Unfortunately, we won’t be helping there 😅. Anyway, here’s the video with all the details. You can drop a comment below or reach out for a chat on Element as well as Twitter @mention if you have suggestions for improvements or questions.

📹 Video #

Please enable JavaScript to watch the video 📼

Astro JS Favicon

🗳 Poll #

Do you still target Internet Explorer in your new apps?

🖥 Code #

Summary of the five favicon image files created in the video: #

apple-touch-icon.png: 180 × 180 px file for iPhone and iPad “save to Home screen”,
favicon.ico: 32 × 32 px file for legacy browsers,
icon-192.png: 192 × 192 px for Android “save to Home screen”,
icon-512.png: 512 × 512 px for Android “save to Home screen”,
finally, icon.svg: used by modern browsers.

Astro JS Favicon Code #

index.astro

astro

    1 ---
2 ---
3 
4 <html lang="en">
5   <head>
6     <meta charset="utf-8" />
7     <meta name="viewport" content="width=device-width" />
8     <link rel="icon" href="/favicon.ico" sizes="any" />
9     <link rel="icon" href="/icon.svg" type="image/svg+xml" />
10     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
11     <link rel="manifest" href="/manifest.webmanifest" />
12     <title>Astro JS Favicon</title>
13   </head>
14   <body>
15     <h1>Astro JS Favicon</h1>
16   </body>
17 </html>

public/manifest.webmanifest

json

    1 {
2   "icons": [
3     { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
4     { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
5   ]
6 }

Source: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

🔗 Links #

Astro JS Tutorial,
realfavicongenerator.net ,
article on 6 favicon files which fit most needs ,
Element chat: #Rodney matrix chat ,
Twitter handle: @askRodney .

🏁 Astro JS Favicon: Summary #

Where do you put favicon files in an Astro JS project? #: Astro projects have a public folder in the root directory. You can place any files which do not need processing in there. It is an ideal place for favicon and manifest files. You can also put files for self-hosted fonts in there. For example, if you place `favicon.ico` in the public folder, browsers can access the file at https://example.com/favicon.ico on your built site.
Which favicon file formats should you use in 2022? #: Traditionally, your site only needed an `ico` favicon file. Although it looked like a single file, it had multiple file sizes embedded. Today, however, the ico is only needed for legacy browsers, and it is safe just to include a single 32 pixel file. And that’s only if you want to support quite old legacy browsers. Modern browsers support the SVG format. These files are typically very small as they use vector graphics under the hood. That also means they look good at any size. Finally, for phones, you can include a few extras. These will be used as your site’s app icon when the user saves your site to their home screen.
How do you set the iPhone and Android home screen icons for your website or web app? #: When a user clicks save site to home screen, iPhones will use a 180×180 px PNG file as your site’s icon on the home screen. In fact, you can include this, like a favicon, by adding a link tag in your page HTML head section. You need to set `rel` to `apple-touch-icon` and set `href` together with the path for the icon. Android devices look for a PWA manifest, so work a little differently. First, create two PNG files, one 192×192 px and another 512×512 px. Then just include a manifest file in a link tag (rel="manifest", href="/manifest.webmanifest") in the page HTML head section. Finally, populate the manifest.webmanifest file. This is in JSON format, with an `icons` array at the top level. The two icons are added to this array with src, type (usually `image/png`) and sizes `192×192` and `512×512` defined in an object for each.

🙏🏽 Feedback #

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

📼 new video on how you can add a favicon to your 🚀 Astro app, including the 6 files you need for wide support over legacy and modern browsers.

Hope you find it useful!

@astrodotbuild #JAMStack #askRodney https://t.co/n4GAmktNsU
— Rodney (@askRodney) May 16, 2022

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.