I'm planning to create a cross-browser web site that does not use images(.jpg, .png, .svg, etc.) for modern browsers. Is it possible to replace favicon.ico with a @font-face?
The favicon is an image resource, not text, so it cannot be replaced with an icon font using @font-face.
If you absolutely do not want to use an image file, you can always create the favicon in an image editor, then serialize the file into a data URI:
<link rel="shortcut icon" href="data:image/x-icon;base64,...">