As far as I'm aware, you cannot bookmark dynamic URLs. What you can do is compressing your HTML page into a data URL which can be used as a bookmark:
data:text/html;utf-8,<!DOCTYPE html><head><title>Title</title><link rel="shortcut icon" href="http://example.com/favicon.ico"></head><body><script>setTimeout(function(){ window.location.replace('http://example.com/') },1);</script></body>
This is just the following HTML without new lines and data:text/html;utf-8,
at the beginning:
<!DOCTYPE html>
<head>
<!-- Page title, can be omitted -->
<title>Title</title>
<!-- Link to the favicon in href -->
<link rel="shortcut icon" href="http://example.com/favicon.ico">
</head>
<body>
<script>
setTimeout(function(){
// URL to redirect to in quotes
window.location.replace('http://example.com/')
},1);
</script>
</body>
I just tested this and it seems to display the correct favicon if you provide the path to it. To add it to your bookmarks, right-click the bookmark bar and select Add page...
then enter the data URL for the location.
If you need to use local favicons, then you can convert your .ico
to a data URL as well. Here's one tool of many that I found through Google: http://dopiaza.org/tools/datauri/
A simple search for ico to data url
should give you relevant results.
You'll get a nice long URL that you can use in place of http://example.com/favicon.ico
and it'll still be contained within the bookmark.