Simply put:
<f:viewParam> used inside <f:metadata> to attach a UIViewParameter as metadata for the current view. For example, if you go to myapp/check.jsf?id=3 , and your check.jsf page has the following:
<f:metadata> <f:viewParam name="id" value="#{mrBean.id}"/> </f:metadata>
The value 3 will be set to the mrBean id property when the page loads.
On the other hand, <f:param> sets the parameter in the parent (enclosing) component of this tag, available later, receiving the component parameters themselves. This, in particular, is really powerful (but, nevertheless, catastrophic if used incorrectly), because through EL you can get some interesting results.
It can be used in different contexts. This link provides an interesting range of applications.