In this Astro JS favicon video we see the six most important favicon files to add to you 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 sites 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.
pxfile for iPhone and iPad “save to Home screen”,
pxfile for legacy browsers,
pxfor Android “save to Home screen”,
pxfor Android “save to Home screen”,
icon.svg: used by modern browsers.
- Astro JS Tutorial,
- realfavicongenerator.net ,
- article on 6 favicon files which fit most needs ,
- Element chat: #Rodney matrix chat ,
- Twitter handle: @askRodney .
- 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.
- 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.
- When a user clicks save site to home screen, iPhones will use a 180 x 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 x 192 px and another 512 x 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 `192x192` and `512x512` defined in an object for each.
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.
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 Optimisation among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.