Access media made from a blueprint of type:file

I have defined the following in my blueprints.yaml

        media: # load user assets for the theme
          type: tab
          title: Media
          fields:
            custom_favicon:
              type: section
              title: Custom Favicon
              fields:
                media.favicon:
                  type: file
                  label: Upload your custom favicon
                  destination: 'theme://assets/user_favicon/'
                  multiple: false
                  avoid_overwriting: yes
                  limit: 1
                  filesize: 1
                  accept:
                    - image/*

It works. I was able to upload a file that generated the following yaml markup

media:
  favicon:
    user/themes/canvas/assets/user_favicon/android-chrome-512x512.png:
      name: android-chrome-512x512.png
      full_path: android-chrome-512x512.png
      type: image/png
      size: 11710
      path: user/themes/canvas/assets/user_favicon/android-chrome-512x512.png

all the user-made attributes can be accessed if I dumped theme_config.media.favicon. But I cannot access the path of the uploaded image with an url() filter or a dot notation i.e. {{ theme_config.media.favicon.path }}. I am lost as to which I got wrong here. Is my blueprints malformed or am I using the wrong dot notation?

Please help. thanks.

Solved. this solution is based on Quark’s logo partials.

{# extract the media array #}
{% set favicon = theme_config.media.favicon %}

{# assign the uploaded file name to a variable #}
{% set favicon_file = (favicon|first).name %}

{# append the filename to the intended source url #}
{{ url('theme://assets/user_favicon/' ~ favicon_file) }}