how do I display Friendly website name and Favicon?

Question

How do I in the tabview header display the favIcon and friendly name?

like this example below:

Answer 1

Hello,

Welcome to Microsoft Q&A!

In general, the value of icon in tabview header is available from Symbol enum, if you want to show the Favicon, you can use the TabView in Windows Community Toolkit and then custom head template. Adding image control as icon and pass the url to its Source property. For example:

xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"  

Update:

.xaml:

<controls:TabView x:Name="Tabs"  
               CanCloseTabs="True"  
               IsCloseButtonOverlay="False"  
               CanDragItems="True"  
               CanReorderItems="False"  
               AllowDrop="False"  
               SelectedTabWidth="200" ItemsSource="{x:Bind Lists,Mode=OneWay}" Margin="0,60,0,0" TabNavigation="Local" TabFocusNavigation="Local">  
    <controls:TabView.ItemHeaderTemplate>  
        <DataTemplate x:DataType="local:MyViewModel">  
            <StackPanel Orientation="Horizontal">  
                <Image Width="20" Height="20" Source="{Binding IconUrl}" Margin="0,0,10,0"></Image>  
                <TextBlock Text="{Binding HeaderName}"></TextBlock>  
            </StackPanel>  
        </DataTemplate>  
    </controls:TabView.ItemHeaderTemplate>  
    <controls:TabView.ItemTemplate>  
        <DataTemplate x:DataType="local:MyViewModel">  
            <WebView Source="{Binding WebUrl}"></WebView>  
        </DataTemplate>  
    </controls:TabView.ItemTemplate>  
</controls:TabView>  

.cs:

public class MyViewModel   
{  
    public string IconUrl { get; set; }  
    public string WebUrl { get; set; }  
    public string HeaderName { get; set; }  
}  


private ObservableCollection<MyViewModel> Lists { get; set; }  

public MainPage()  
{  
    this.InitializeComponent();  

    Lists = new ObservableCollection<MyViewModel>();  
}  

When you try to add TabViewItem, just need to add a MyViewModel to Lists, it will also update the UI.

Lists.Add(new MyViewModel() { WebUrl = "http://www.facebook.com", HeaderName="Facebook",IconUrl= "https://www.google.com/s2/favicons?domain=https://www.facebook.com/" });