Flask地址栏添加图标为何需使用两个<link>标签？

安全阿岳

2026-5-21

Why Two <link> Tags for Favicon in Flask?

Great question—let’s unpack why the example in Flask Web Development uses two <link> tags instead of just one, even though a single line works in basic HTML.

1. Browser Compatibility (The Core Reason)

The dual tags exist to cover as many browsers as possible, including older legacy ones:

rel="shortcut icon" is a long-standing convention that older versions of Internet Explorer (and some other outdated browsers) depend on. These browsers won’t recognize the standard rel="icon" attribute on its own.
rel="icon" is the official HTML5 standard for defining site icons. All modern browsers (Chrome, Firefox, Safari, Edge, etc.) use this attribute correctly.

By including both, you guarantee your favicon shows up for users on both old and new browser versions—no one gets a blank icon next to your site’s URL.

2. Flask-Specific Best Practices

Beyond compatibility, there are two Flask-focused details at play here:

url_for('static', ...): Using Flask’s url_for function instead of hardcoding static/favicon.ico ensures the path to your favicon is always accurate. This is critical if your app is deployed under a URL prefix, or if you adjust how static files are served later—Flask dynamically generates the correct URL, avoiding broken links.
Template Inheritance with super(): The {{ super() }} line tells Flask to render the content from the parent template’s head block first, then add these favicon links. This way, you don’t overwrite existing head content (like meta tags or stylesheets) from your base template—you just append the favicon code safely.