Skip to content

Fix favicon docs #2899

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pwizla wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix favicon docs #2899

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 17 additions & 25 deletions docusaurus/docs/cms/admin-panel-customization/favicon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,31 +13,23 @@ tags:

Strapi's [admin panel](/cms/admin-panel-customization) displays its branding on various places, including the [logo](/cms/admin-panel-customization/logos) and the favicon. Replacing these images allows you to match the interface and application to your identity.

To replace the favicon:

1. Create a `/src/admin/extensions/` folder if the folder does not already exist.
2. Upload your favicon into `/src/admin/extensions/`.
3. Replace the existing **favicon.png|ico** file at the Strapi application root with a custom `favicon.png|ico` file.
4. Update `/src/admin/app.[tsx|js]` with the following:

```js title="./src/admin/app.js"
import favicon from "./extensions/favicon.png";

export default {
config: {
// replace favicon with a custom icon
head: {
favicon: favicon,
},
},
};
```

5. Rebuild, launch and revisit your Strapi app by running `yarn build && yarn develop` in the terminal.

:::tip
This same process may be used to replace the login logo (i.e. `AuthLogo`) and menu logo (i.e. `MenuLogo`) (see [logos customization documentation](/cms/admin-panel-customization/logos)).
:::
There are 2 approaches to replacing the favicon:

* Replace the `favicon.png` file at the root of a Strapi project
* Edit the [`strapi::favicon` middleware configuration](/cms/configurations/middlewares#favicon) with the following code:

```js title="/config/middlewares.js"
// …
{
name: 'strapi::favicon',
config: {
path: 'my-custom-favicon.png',
},
},
// …
```

Once done, rebuild, launch and revisit your Strapi app by running `yarn build && yarn develop` in the terminal.

:::caution
Make sure that the cached favicon is cleared. It can be cached in your web browser and also with your domain management tool like Cloudflare's CDN.
Expand Down
23 changes: 9 additions & 14 deletions docusaurus/static/llms-code.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -902,23 +902,18 @@ strapi develop --bundler=webpack
Source: https://docs.strapi.io/cms/admin-panel-customization/favicon

## Favicon
Description: Create a /src/admin/extensions/ folder if the folder does not already exist.
Description: Replace the favicon.png file at the root of a Strapi project Edit the strap::favicon` middleware configuration, to replace the existing configuration or create it with the following code:
(Source: https://docs.strapi.io/cms/admin-panel-customization/favicon#favicon)

Language: JavaScript
File path: ./src/admin/app.js

```js
import favicon from "./extensions/favicon.png";
Language: JSON
File path: /config/middlewares.js

export default {
config: {
// replace favicon with a custom icon
head: {
favicon: favicon,
},
},
};
```json
{
name: 'strapi::favicon',
config: {
path: 'my-custom-favicon.png',
},
```


Expand Down
33 changes: 11 additions & 22 deletions docusaurus/static/llms-full.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1454,31 +1454,20 @@ Source: https://docs.strapi.io/cms/admin-panel-customization/favicon

Strapi's [admin panel](/cms/admin-panel-customization) displays its branding on various places, including the [logo](/cms/admin-panel-customization/logos) and the favicon. Replacing these images allows you to match the interface and application to your identity.

To replace the favicon:
There are 2 approaches to replacing the favicon:

1. Create a `/src/admin/extensions/` folder if the folder does not already exist.
2. Upload your favicon into `/src/admin/extensions/`.
3. Replace the existing **favicon.png|ico** file at the Strapi application root with a custom `favicon.png|ico` file.
4. Update `/src/admin/app.[tsx|js]` with the following:
* Replace the `favicon.png` file at the root of a Strapi project
* Edit the [`strap`::favicon` middleware configuration](/configurations/middlewares#favicon), to replace the existing configuration or create it with the following code:

```js title="./src/admin/app.js"
import favicon from "./extensions/favicon.png";

export default {
config: {
// replace favicon with a custom icon
head: {
favicon: favicon,
},
},
};
```

5. Rebuild, launch and revisit your Strapi app by running `yarn build && yarn develop` in the terminal.
```js title="/config/middlewares.js"
{
name: 'strapi::favicon',
config: {
path: 'my-custom-favicon.png',
},
```

:::tip
This same process may be used to replace the login logo (i.e. `AuthLogo`) and menu logo (i.e. `MenuLogo`) (see [logos customization documentation](/cms/admin-panel-customization/logos)).
:::
Once done, rebuild, launch and revisit your Strapi app by running `yarn build && yarn develop` in the terminal.

:::caution
Make sure that the cached favicon is cleared. It can be cached in your web browser and also with your domain management tool like Cloudflare's CDN.
Expand Down
Loading