The_Great_Archive/favycon
1
0
Fork 0
mirror of https://github.com/ruisaraiva19/favycon.git synced 2026-09-12 19:51:07 +05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #4 from ruisaraiva19/docs/favicon-sizes-formats

Browse Source 
docs: add favicon sizes and formats
This commit is contained in:
Eduardo Pinto 2020-04-10 14:20:47 +01:00 committed by GitHub
commit b3303feab9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 54 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
README.md
View File

@ -1,2 +1,56 @@
# favicon-tool # favicon-tool
Favicon generator tool Favicon generator tool
## Browser favicon formats supported
| | IE | Edge | Firefox | Chrome | Safari | iOS Safari | Chrome Android |
| --- | --- | ---- | ------- | ------ | ------ | ---------- | -------------- |
| ico | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| png | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ |
| svg | ❌ | ✅ | ✅ | ✅ | ⚠️ | ⚠️ | ✅ |
## Favicon recommended sizes
| | apple-touch-icon | icon | msapplication |
| ------- | ---------------- | ---- | ------------- |
| 57x57 | ✅ | | |
| 60x60 | ✅ | | |
| 72x72 | ✅ | | |
| 76x76 | ✅ | | |
| 114x114 | ✅ | | |
| 120x120 | ✅ | | |
| 144x144 | ✅ | | ✅ |
| 152x152 | ✅ | | |
| 180x180 | ✅ | | |
| 16x16 | | ✅ | |
| 32x32 | | ✅ | |
| 96x96 | | ✅ | |
| 192x192 | | ✅ | |
| 70x70 | | | ✅ |
| 150x150 | | | ✅ |
| 310x150 | | | ✅ |
| 310x310 | | | ✅ |
## HTML tags to add for all favicon sizes
```html
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<meta name="msapplication-config" content="browserconfig.xml" />
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
```