Allow admins to configure instance favicon and logo (#30040)

app/helpers/application_helper.rb

@@ -240,6 +240,13 @@ module ApplicationHelper
     EmojiFormatter.new(html, custom_emojis, other_options.merge(animate: prefers_autoplay?)).to_s
   end
 
+  def site_icon_path(type, size = '48')
+    icon = SiteUpload.find_by(var: type)
+    return nil unless icon
+
+    icon.file.url(size)
+  end
+
   private
 
   def storage_host_var

app/models/form/admin_settings.rb

@@ -37,6 +37,8 @@ class Form::AdminSettings
     status_page_url
     captcha_enabled
     authorized_fetch
+    app_icon
+    favicon
   ).freeze
 
   INTEGER_KEYS = %i(
@@ -63,6 +65,8 @@ class Form::AdminSettings
   UPLOAD_KEYS = %i(
     thumbnail
     mascot
+    app_icon
+    favicon
   ).freeze
 
   OVERRIDEN_SETTINGS = {

app/models/site_upload.rb

@@ -19,7 +19,15 @@
 class SiteUpload < ApplicationRecord
   include Attachmentable
 
+  FAVICON_SIZES = [16, 32, 48].freeze
+  APPLE_ICON_SIZES   = [57, 60, 72, 76, 114, 120, 144, 152, 167, 180, 1024].freeze
+  ANDROID_ICON_SIZES = [36, 48, 72, 96, 144, 192, 256, 384, 512].freeze
+
+  APP_ICON_SIZES = (APPLE_ICON_SIZES + ANDROID_ICON_SIZES).uniq.freeze
+
   STYLES = {
+    app_icon: APP_ICON_SIZES.each_with_object({}) { |size, hash| hash[size.to_s.to_sym] = "#{size}x#{size}#" }.freeze,
+    favicon: FAVICON_SIZES.each_with_object({}) { |size, hash| hash[size.to_s.to_sym] = "#{size}x#{size}#" }.freeze,
     thumbnail: {
       '@1x': {
         format: 'png',

app/serializers/manifest_serializer.rb

@@ -1,21 +1,10 @@
 # frozen_string_literal: true
 
 class ManifestSerializer < ActiveModel::Serializer
+  include ApplicationHelper
   include RoutingHelper
   include ActionView::Helpers::TextHelper
 
-  ICON_SIZES = %w(
-    36
-    48
-    72
-    96
-    144
-    192
-    256
-    384
-    512
-  ).freeze
-
   attributes :id, :name, :short_name,
              :icons, :theme_color, :background_color,
              :display, :start_url, :scope,
@@ -37,9 +26,12 @@ class ManifestSerializer < ActiveModel::Serializer
   end
 
   def icons
-    ICON_SIZES.map do |size|
+    SiteUpload::ANDROID_ICON_SIZES.map do |size|
+      src = site_icon_path('app_icon', size.to_i)
+      src = URI.join(root_url, src).to_s if src.present?
+
       {
-        src: frontend_asset_url("icons/android-chrome-#{size}x#{size}.png"),
+        src: src || frontend_asset_url("icons/android-chrome-#{size}x#{size}.png"),
         sizes: "#{size}x#{size}",
         type: 'image/png',
         purpose: 'any maskable',

app/views/admin/settings/branding/show.html.haml

@@ -40,5 +40,33 @@
           = fa_icon 'trash fw'
           = t('admin.site_uploads.delete')
 
+  .fields-row
+    .fields-row__column.fields-row__column-6.fields-group
+      = f.input :favicon,
+                as: :file,
+                input_html: { accept: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'].join(',') },
+                wrapper: :with_block_label
+
+    .fields-row__column.fields-row__column-6.fields-group
+      - if @admin_settings.favicon.persisted?
+        = image_tag @admin_settings.favicon.file.url('48'), class: 'fields-group__thumbnail'
+        = link_to admin_site_upload_path(@admin_settings.favicon), data: { method: :delete }, class: 'link-button link-button--destructive' do
+          = fa_icon 'trash fw'
+          = t('admin.site_uploads.delete')
+
+  .fields-row
+    .fields-row__column.fields-row__column-6.fields-group
+      = f.input :app_icon,
+                as: :file,
+                input_html: { accept: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'].join(',') },
+                wrapper: :with_block_label
+
+    .fields-row__column.fields-row__column-6.fields-group
+      - if @admin_settings.app_icon.persisted?
+        = image_tag @admin_settings.app_icon.file.url('48'), class: 'fields-group__thumbnail'
+        = link_to admin_site_upload_path(@admin_settings.app_icon), data: { method: :delete }, class: 'link-button link-button--destructive' do
+          = fa_icon 'trash fw'
+          = t('admin.site_uploads.delete')
+
   .actions
     = f.button :button, t('generic.save_changes'), type: :submit

app/views/layouts/application.html.haml

@@ -11,13 +11,13 @@
     - if storage_host?
       %link{ rel: 'dns-prefetch', href: storage_host }/
 
-    %link{ rel: 'icon', href: '/favicon.ico', type: 'image/x-icon' }/
+    %link{ rel: 'icon', href: site_icon_path('favicon') || '/favicon.ico', type: 'image/x-icon' }/
 
-    - %w(16 32 48).each do |size|
-      %link{ rel: 'icon', sizes: "#{size}x#{size}", href: frontend_asset_path("icons/favicon-#{size}x#{size}.png"), type: 'image/png' }/
+    - SiteUpload::FAVICON_SIZES.each do |size|
+      %link{ rel: 'icon', sizes: "#{size}x#{size}", href: site_icon_path('favicon', size.to_i) || frontend_asset_path("icons/favicon-#{size}x#{size}.png"), type: 'image/png' }/
 
-    - %w(57 60 72 76 114 120 144 152 167 180 1024).each do |size|
-      %link{ rel: 'apple-touch-icon', sizes: "#{size}x#{size}", href: frontend_asset_path("icons/apple-touch-icon-#{size}x#{size}.png") }/
+    - SiteUpload::APPLE_ICON_SIZES.each do |size|
+      %link{ rel: 'apple-touch-icon', sizes: "#{size}x#{size}", href: site_icon_path('app_icon', size.to_i) || frontend_asset_path("icons/apple-touch-icon-#{size}x#{size}.png") }/
 
     %link{ rel: 'mask-icon', href: frontend_asset_path('images/logo-symbol-icon.svg'), color: '#6364FF' }/
     %link{ rel: 'manifest', href: manifest_path(format: :json) }/