第005篇主题 - 10 自定义favicons

2024-02-19 17:02:58

概要

本专题主要介绍添加自定义favicons。

概览

Magento默认提供了一个16*16px的favicons，可以通过在后台管理中上传自定义icon或者手动在指定目录添加。如果这些地方都有，则后台上传的优先级最高。如果想拥有不同尺寸的favicons，需要手动将他们添加到系统中，并在布局中进行。Magento支持的favicon格式有：.ico, .png, .gif, .jpg, .jpeg, .apng, .svg。并不是所有的浏览器都支持上述格式，使用最广泛的是.ico。以下为添加favicons的详情。

管理后台添加favicon

通过后台菜单：Content => Design => Configuration => 编辑任意主题 => Other Setting => HTML Head => Favicon icon，上传后记得保存。如果系统启用了缓存，需要清除对应的缓存。可以通过System => Tools => Cache Management => Flush Magento Cache 或者命令行：php bin/magento cache:flush清除。

手动添加favicon

在<your_theme_dir>/Magento_Theme/web/目录favicon.ico文件覆盖默认favicon文件。按照如下步骤添加其他尺寸的favicon：

将不同尺寸的icon添加到<your_theme_dir>/Magento_Theme/web/目录。

在<your_theme_dir>/Magento_Theme/layout/default_head_blocks.xml中指定icon的路径和尺寸，例如添加faicon-32*32.png作为icon，default_head_blocks.xml配置如下：

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="Magento_Theme::favicon-32x32.png" rel="icon" sizes="32x32" />
    </head>
</page>

为了使更改生效，清理浏览器缓存和清除服务端如下目录(除了.htaccess文件)：pub/static/，var

码农公寓

概要

概览

管理后台添加favicon

手动添加favicon

相关文章