mirror of
https://github.com/ruisaraiva19/favycon.git
synced 2026-09-12 19:51:07 +05:00
efa6b4cc1e
* feat(drag-and-drop): add drag and drop wizard * chore(seo): update seo share image url * improvement(upload): add download step 3 * improvement(loading): improve loading and add transitions * improvement: add pwa support, clipboard and animations * improvement(seo): add html lang and update title * fix(button): fix button font family
6.5 KiB
6.5 KiB
Favycon
Favicon generator tool
Browser favicon formats supported
| IE | Edge | Firefox | Chrome | Safari | iOS Safari | Chrome Android | |
|---|---|---|---|---|---|---|---|
| ico | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| png | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ |
| svg | ❌ | ✅ | ✅ | ✅ | ⚠️ | ⚠️ | ✅ |
Favicon recommended sizes
| apple-icon | favicon | ms-icon | pwa | |
|---|---|---|---|---|
| 57x57 | ✅ | |||
| 60x60 | ✅ | |||
| 72x72 | ✅ | ✅ | ||
| 76x76 | ✅ | |||
| 114x114 | ✅ | |||
| 120x120 | ✅ | |||
| 144x144 | ✅ | ✅ | ✅ | |
| 152x152 | ✅ | ✅ | ||
| 180x180 | ✅ | |||
| 16x16 | ✅ | |||
| 32x32 | ✅ | |||
| 96x96 | ✅ | ✅ | ||
| 128x128 | ✅ | |||
| 192x192 | ✅ | ✅ | ||
| 384x384 | ✅ | |||
| 512x512 | ✅ | |||
| 70x70 | ✅ | |||
| 150x150 | ✅ | |||
| 310x150 | ✅ | |||
| 310x310 | ✅ |
HTML tags to add for all favicon sizes
<link rel="apple-touch-icon" sizes="57x57" href="/favicon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-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-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/favicon-144x144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
<!-- SVG favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- PWA compatible -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, install the project dependencies:
yarn install
Then, run the development server:
yarn dev
Open http://localhost:3000 with your browser to see the result.
Also, you can run the Storybook server:
yarn storybook
Open http://localhost:6006 with your browser to see all stories.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
 Rui Saraiva 🚇 💻 📖 💬 🚧 |
 Eduardo Pinto 💻 👀 |
 Augusto Lopes 🎨 |
 Rogério Moreira 💻 👀 |
This project follows the all-contributors specification. Contributions of any kind welcome!