../courses.php
HEAD
HEAD108
90
Favicon And App Icons
Give the page a visual identity in tabs, bookmarks, and devices.
How does the head connect a page to its icons?
The head uses icon link tags to connect the page to favicon and app icon files used by browser tabs, bookmarks, shortcuts, and devices.
After previews, a page also needs small visual identity. The favicon is the small icon often shown in the browser tab.
Icons help users recognize a site quickly when many tabs are open.
App icons can also be used when a page is saved to a phone home screen or installed as a web app.
Icons are not the main content of the page, but they are part of professional page setup.
Icon links in the head
<head>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="theme-color" content="#f4efe3">
</head>
rel="icon"
identifies a favicon or browser icon.
href="/favicon.ico"
points to the icon file.
sizes="any"
can be used for flexible icon support.
apple-touch-icon
supports icons used by Apple devices when saving a site.
theme-color
can influence browser UI color on supported devices.
Recognition
A favicon helps users recognize your site among many tabs.
Bookmarks
Saved pages look more professional with icons.
Mobile shortcuts
Touch icons support saved shortcuts on devices.
Brand polish
Icons are small, but they make a site feel complete.
No icon setup
<head>
<title>My Site</title>
</head>
Icon setup
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Ask ChatGPT: "Does this head include reasonable favicon and app icon links?" Then check that the icon files actually exist.
Add a favicon link to a page.
Add an Apple touch icon link.
Add a theme color.
Open the icon path in the browser to confirm it exists.
Reload the page and check the browser tab.
Linking to an icon file that does not exist.
Using a huge image as a favicon.
Forgetting mobile touch icons.
Changing icon filenames without updating the head.
Assuming favicons update instantly when browsers cache them.
Connect a page to favicon and app icon files so the site has visual identity in tabs, bookmarks, and device shortcuts.
Login - Jit4All
Login
Welcome back to Jit4All