Opens an external site in a new window
Mental Health Awareness Month
“Community”
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links
  • Profile
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links

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

blurry low resolution placeholder image Astro JS Favicon
  1. Home Rodney Lab Home
  2. Blog Posts Rodney Lab Blog Posts
  3. Astro Astro Blog Posts
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Astro JS Favicon: 6 most Important Favicon Files #

Published: 4 years ago
4 minute read
Gunning Fog Index: 5.6
2 comments
Content by Rodney
blurry low resolution placeholder image Author Image: Rodney from Rodney Lab
SHARE:

🌟 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?
Voting reveals latest results.

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

blurry low resolution placeholder image ask Rodney X (formerly Twitter) avatar

Rodney

@askRodney

📼 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 #askRodneyhttps://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.

Thanks for reading this post. I hope you found it valuable. Please get in touch with your feedback and suggestions for posts you would like to see. Read more about me …

blurry low resolution placeholder image Rodney from Rodney Lab
TAGS:
ASTRO

Reposts:

Reposts

  • aFuzzyBear 🇺🇦 profile avatar
  • Sébastien Morel profile avatar
  • Sébastien Morel 🇺🇦💙 profile avatar

Likes:

Likes

  • aFuzzyBear 🇺🇦 profile avatar
  • Sébastien Morel profile avatar
  • Wilson Naranjo profile avatar
  • Nikola Lakovic profile avatar
  • Sarah Rainsberger profile avatar
  • Jonathan Sanderson profile avatar
  • Sébastien Morel 🇺🇦💙 profile avatar
Reposts & likes provided by Mastodon & X via Webmentions.

Related Posts

blurry low resolution placeholder image Astro Server-Side Rendering: Edge Search Site

Astro Server-Side Rendering: Edge Search Site

plus
astro
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Leave a comment …

Your information will be handled in line with our Privacy Policy .

Comments

  • Doob

    Straight to the point and easy to follow. Thank you!

    3 years ago
    • Rodney

      Hey Doob, thanks for taking a moment to leave feedback, really appreciate it 😄.
      3 years ago

Ask for more

1 Nov 2022 — Astro Server-Side Rendering: Edge Search Site
3 Oct 2022 — Svelte eCommerce Site: SvelteKit Snipcart Storefront
1 Sept 2022 — Get Started with SvelteKit Headless WordPress

Copyright © 2020 – 2025 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

  • Home
  • Profile
  • Plus +
  • Newsletter
  • Contact
  • Links
  • Terms of Use
  • Privacy Policy
We use cookies  to enhance visitors’ experience. Please click the “Options” button to make your choice.  Learn more here.