第005篇 主题 - 10 自定义favicons

概要

本专题主要介绍添加自定义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

posted @ 2021-04-09 01:28  2019pawn  阅读(3)  评论(0编辑  收藏