搭建的网站不显示favicon.ico

新项目,在本地调试可以正常显示favicon.ico
然后部署到服务器上时不显示
下面是目录结构

index.html中引用了favicon.ico

<link rel="icon" href="./favicon.ico" type="image/x-icon"/>

下面是打包结构

下面是nginx配置

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;
   include /etc/nginx/conf.d/*.conf;
    server {
    listen       80 default;
    listen 443 ssl http2;

    gzip on;
    gzip_buffers 32 4k;
    gzip_comp_level 6;
    gzip_min_length 200;
    gzip_types text/css text/xml application/javascript application/json;

   location / {
     root  /usr/local/blog/front;
     index index.html index.htm;
     try_files $uri $uri/ /index.html;
   } # 配置前端访问地址

   location /admin {
     root    /usr/local/blog;
     index  index.html index.htm;
     try_files $uri $uri/ /admin/index.html;
    } 
location ^~ /api/blog {
     index  index.html index.htm index.php;
     index  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     index  proxy_set_header Host $host;
     index  proxy_set_header X-Real-IP $remote_addr;
     proxy_pass http://localhost:8086/api/plumemo-service; 
   }

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;


        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
}

本地可以显示,到服务器就不行了。。

调试发现,服务器上没有请求favicon.ico

而本地调试有请求favicon.ico

大佬救救孩子

阅读 6.5k
2 个回答

问题解决了...
参考 stackOverflow
大意是浏览器会自动选择这个favicon.icon,并且自动缓存,需要加一个条件查询来强制刷新缓存
index.html里的的引入代码改为

<link rel="icon" href="/favicon.ico?v=1.1"/>

成功发起请求刷新缓存

href="./favicon.ico" 这里改成href="/favicon.ico"绝对路径引用试试

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题