☰

Nginx 匹配 favicon 相关文件

tag-icon • tag-icon nginx
Nginx 匹配 favicon 相关文件

网站图标变得越来越乱。为了迎合我使用的所有浏览器/平台这项优质服务。我得到的是以下文件：

android-chrome-192x192.png  favicon-16x16.png  mstile-150x150.png
android-chrome-512x512.png  favicon-32x32.png  safari-pinned-tab.svg
apple-touch-icon.png        favicon.ico
browserconfig.xml           manifest.json

由于某些浏览器不支持自定义路径，因此建议使用 Web 根目录。我真的不想我的 Web 根目录下竟然有这么乱。因此，我正在寻找一种location配置，将它们全部放在其专用目录中，同时让客户端认为它们位于 Web 根目录中。

我见过完全符合规则如下：

location = /favicon.ico {
  root /var/www/path/to/favicons;
}

但仅为这些文件设置 10 个精确匹配位置并不是一个很好的解决方案。我还能做什么？

答案1

试试这个 - 这是一个不区分大小写的正则表达式匹配，适用于包含子字符串 favicon 的任何内容，以及大多数其他表达式的测试。我输入了两个精确匹配，因为 URL 有可能在应用程序中使用。如果在应用程序中使用“favicon”，则会导致问题。

 # Better option below for this line
 location ~* favicon|apple-touch-icon|android-chrome-|mstile-|safari-pinned-tab.svg|browserconfig.xml {
  root /var/www/path/to/favicons;
}
location = /browserconfig.xml {
  root /var/www/path/to/favicons;
}
location = /manifest.json {
  root /var/www/path/to/favicons;
}

我进行了快速测试并且它似乎有效。

泰罗·基尔卡宁提供此位置，这将是更好的匹配。它仅从根目录开始匹配，并且具有非捕获组。

location ~* ^/(?:favicon|apple-touch-icon|android-chrome-|mstile-|safari-pinned-tab.svg|browserconfig.xml|manifest.json)

不过，我可能会将所有位置块匹配放入一个文件中并将其包含。我认为精确匹配会更快一些，而且我的 Nginx 配置文件最多可以有 500 行。

答案2

我在日志文件中看到许多错误，因为客户端尝试访问：

https://my.server.com/some/location/document.html/apple-touch-icon.png

那么为什么不给他们想要的东西呢？

这是适用于此的配置：

# non capturing group is ok here, but a $ at the end would be simply wrong
# this is deliberately not limited to the root directory, because 
# clients look at all places for especially for apple-touch-icon
#
# so we match here : 
#    https://my.server.com/apple-touch-icon*,
#    https://my.server.com/*...*/apple-touch-icon*
# and rewrite to /var/www/path/to/favicons/apple-touch-icon*
#
# on the rewrite we NEED a capturing group !

location ~* /(?:favicon|apple-touch-icon|android-chrome-|mstile-|safari-pinned-tab.svg) {
      rewrite ^.*/(favicon|apple-touch-icon|android-chrome-|mstile-|safari-pinned-tab.svg)(.*)$  /$1$2 break; 
      root /var/www/path/to/favicons;
    }

    # this should be only found in the root
    location = /browserconfig.xml {
      root /var/www/path/to/favicons;
    }

    # this should be only found in the root
    location = /manifest.json {
      root /var/www/path/to/favicons;
    }

相关内容