django-favicon-plus

Django favicon plus是一个简单的Django应用，允许您上传图片，并渲染多种HTML链接标签以显示favicon。这些不同的标签用于在移动设备上的书签链接，或者当您在浏览器中将网站设为收藏时显示。

这个版本是由于缺乏维护而从arteria GmbH的原版分叉出来的。

如何使用

使用PIP安装django-favicon。

pip install django-favicon-plus-reloaded
pip install git+https://edugit.org/AlekSIS/libs/django-favicon-plus.git

将应用程序添加到您的 settings.py 文件中的 INSTALLED_APPS 列表中，确保已安装 sites-应用程序，在管理后端中指定了一个 URL，并在 settings.py 中指定了您的网站 SITE_ID = <您的网站 ID>。

INSTALLED_APPS = (
    ...
    'django.contrib.sites',
    ...
    'favicon',
    ...
)

默认的 FAVICON_CONFIG 看起来像这样，如果您想使用其他设置，您可以在 settings.py 中定义它。字典的键是链接标签的 rel 属性的值，而值中的列表是 size 属性和图像缩放的大小。

FAVICON_CONFIG = {
    'shortcut icon': [16 ,32 ,48 ,128, 192],
    'touch-icon': [196],
    'icon': [196],
    'apple-touch-icon': [57, 72, 114, 144, 180],
    'apple-touch-icon-precomposed': [57, 72, 76, 114, 120, 144, 152,180],
}

请确保您在 settings.py 中指定了 MEDIA_URL，并且您的根 urlconf 看起来像这样

urlpatterns = [
    path('admin/', admin.site.urls),
    ...,
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

您也可以在 settings.py 中提供 FAVICON_PATH 来指定 favicon 文件夹的名称。默认为 favicon

在管理后端中上传图像 --> 将创建所有大小，最好使用较大的基本 favicon。

在您的 base.html 中使用模板标签

{% load favtags %}
    
{% place_favicon %}

这将创建

<link rel="apple-touch-icon-precomposed" size ="180x180" href="/media/favicon/fav-180.png"/>
<link rel="apple-touch-icon-precomposed" size ="152x152" href="/media/favicon/fav-152.png"/>
<link rel="apple-touch-icon-precomposed" size ="144x144" href="/media/favicon/fav-144.png"/>
<link rel="apple-touch-icon-precomposed" size ="120x120" href="/media/favicon/fav-120.png"/>
<link rel="apple-touch-icon-precomposed" size ="114x114" href="/media/favicon/fav-114.png"/>
<link rel="apple-touch-icon-precomposed" size ="76x76" href="/media/favicon/fav-76.png"/>
<link rel="apple-touch-icon-precomposed" size ="72x72" href="/media/favicon/fav-72.png"/>
<link rel="apple-touch-icon-precomposed" size ="57x57" href="/media/favicon/fav-57.png"/>
<link rel="apple-touch-icon" size ="180x180" href="/media/favicon/fav-180_5l5PyO1.png"/>
<link rel="apple-touch-icon" size ="144x144" href="/media/favicon/fav-144_5A8THfC.png"/>
<link rel="apple-touch-icon" size ="114x114" href="/media/favicon/fav-114_GqBGFXA.png"/>
<link rel="apple-touch-icon" size ="72x72" href="/media/favicon/fav-72_UoWu9ik.png"/>
<link rel="apple-touch-icon" size ="57x57" href="/media/favicon/fav-57_sfX3XoJ.png"/>
<link rel="touch-icon" size ="192x192" href="/media/favicon/fav-192.png"/>
<link rel="shortcut icon" size ="192x192" href="/media/favicon/fav-192_rD0bCKr.png"/>
<link rel="shortcut icon" size ="128x128" href="/media/favicon/fav-128.png"/>
<link rel="shortcut icon" size ="48x48" href="/media/favicon/fav-48.png"/>
<link rel="shortcut icon" size ="32x32" href="/media/favicon/fav-32.png"/>
<link rel="shortcut icon" size ="16x16" href="/media/favicon/fav-16.png"/>
<link rel="icon" size ="192x192" href="/media/favicon/fav-192_Gw5Uu1M.png"/>
<link rel="shortcut icon" size ="32x32" href="/media/favicon/fav-32.png"/>

管理

您可以上传多个图像，但只有一个被设置为 favicon 并使用。

贡献

如果您想做出贡献，请发送一个 MR。

来源

基于

GitHub 上的 Favicon Cheat Sheet

Favicon

16x16 .ico 或更好的 .png

<link rel="shortcut icon" href="/images/favicon.png" />

apple-touch-icon(-precomposed)

57x57, 72x72, 114x114 和 144x144 的最高分辨率用于 ipad retina 144x144.png precomposed（=iOS 不会对图标添加任何效果）

<link rel="apple-touch-icon" sizes="144x144" href="/images/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="114x114" href="/images/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="57x57" href="/images/apple-touch-icon-57x57.png">

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/images/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/images/apple-touch-icon-57x57.png">

Android 版本 1.5 和 1.6 将读取第二个标签（带有 "-precomposed"），而版本 2.1 及更高版本将读取第一个标签。

Google 的规范说明您应该使用 48x48 像素的 PNG 图像，但您可以使用大型图像（如 Google 在其自己的应用程序中使用的 128x128）。

https://mathiasbynens.be/notes/touch-icons