mirror of
https://github.com/ruisaraiva19/favycon.git
synced 2026-09-12 19:51:07 +05:00
78c9508195
The about modal is lazily mounted, so the credits and contact address are not in the server-rendered HTML and no crawler ever sees them. Authorship therefore goes in the head, where it is always present: a meta author, a rel=author link to ruisaraiva.dev, and SoftwareApplication JSON-LD. The structured data names Rui as author and Augusto and Miguel as contributors, because the modal credits three people and the markup should not tell a machine a tidier story than the page tells a reader. Also adds public/llms.txt: accepted input formats, the 310px and 512px minimums, and exactly what the zip contains, including that favicon.svg only appears for SVG input and manifest.json only with the PWA option. It is written from utils/favicon.ts and the route handler rather than from memory. Note it is a static file, so it is the one thing here that can drift from the sizes it documents. Two hardcoded favycon.vercel.app strings become the SITE_URL constant the rest of the file now uses. |
||
|---|---|---|
| .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!