mirror of
https://github.com/ruisaraiva19/favycon.git
synced 2026-09-12 19:51:07 +05:00
| .github | ||
| .husky | ||
| .storybook | ||
| .vscode | ||
| components | ||
| cypress | ||
| hooks | ||
| pages | ||
| public | ||
| styles | ||
| utils | ||
| .all-contributorsrc | ||
| .editorconfig | ||
| .eslintignore | ||
| .eslintrc.json | ||
| .gitignore | ||
| .npmrc | ||
| .nvmrc | ||
| .prettierignore | ||
| .prettierrc | ||
| .stylelintrc.json | ||
| commitlint.config.js | ||
| cypress.config.ts | ||
| LICENSE | ||
| lint-staged.config.js | ||
| next-env.d.ts | ||
| next.config.js | ||
| package.json | ||
| postcss.config.js | ||
| README.md | ||
| release.config.js | ||
| tsconfig.json | ||
| vercel.json | ||
| yarn.lock | ||
Favycon
A favicon generator tool
A small online tool to help you generate your favicon in all the sizes and formats you need.
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 🚇 💻 📖 💬 🚧 |
 Augusto Lopes 🎨 |
 Miguel Teixeira 💻 👀 |
This project follows the all-contributors specification. Contributions of any kind welcome!