andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move HTML content under appropriate directory

Browse Source
This commit is contained in:
Angelos Chalaris
2023-05-20 14:20:22 +03:00
parent 1bf8ce8c23
commit acd5ca0edf
16 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
snippets/html/s/head-icons.md Normal file
View File

@ -0,0 +1,23 @@
---
title: Recommended HTML head icon tags
shortTitle: HTML favicons template
type: story
language: html
tags: [webdev,browser]
author: chalarangelo
cover: boutique-home-office-3
excerpt: Ensure your HTML documents have a proper favicon by including these lines in your `<head>` element.
dateModified: 2023-01-24T05:00:00-04:00
---
Over the years, I've seen many different and often conflicting guidelines about favicons and which tags are essential. Nowadays, I think you can get away with a very **minimal set of meta tags** and tailor them to your needs as you go. Here's my recommendation for the bare minimum you should include in your `<head>` element:
```html
<head>
<link rel="icon" sizes="192x192" href="favicon.png">
<link rel="apple-touch-icon" href="favicon.png">
<link rel="mask-icon" href="favicon.svg" color="#000000">
</head>
```
By creating a single 192x192 PNG asset, you can cover almost all modern devices and browsers, without too much hassle. If you want to go the extra mile, you can include a few more quite easily. Simply downscale the image and include more `rel="icon"` meta tags with different `sizes` attributes.