dedinit.ru/static/images/favicon/favicon-logo-setup.md

🎨 Настройка favicon и логотипа сайта (SmileDed)

Дата выполнения

7 марта 2026 г.

Описание задачи

Настроить favicon и логотип для сайта dedinit.ru на основе пиксель-арт графики SmileDed в стиле Dwarf Fortress.

---

📋 Предыстория

Исходные файлы favicon были созданы в стиле пиксель-арта (Dwarf Fortress) с помощью Piskel App. Файлы хранились в папке static/images/favicon/SmileDed/ с именами, не соответствующими их размерам.

---

🔧 Выполненные шаги

1. Определение размеров существующих файлов

Использован PowerShell скрипт для определения размеров PNG изображений:

Add-Type -AssemblyName System.Drawing

$path = "e:\yandex.disk\YandexDisk\projects\dedinit.ru\static\images\favicon"

Write-Host "=== Корневая папка favicon ==="
$files = Get-ChildItem $path -Filter *.png
foreach($f in $files){
    $img = New-Object System.Drawing.Bitmap($f.FullName)
    Write-Host "$($f.Name) - $($img.Width)x$($img.Height)"
    $img.Dispose()
}

Write-Host "`n=== Папка SmileDed ==="
$files = Get-ChildItem "$path\SmileDed" -Filter *.png
foreach($f in $files){
    $img = New-Object System.Drawing.Bitmap($f.FullName)
    Write-Host "$($f.Name) - $($img.Width)x$($img.Height)"
    $img.Dispose()
}

Результаты:

Файл	Размер
SmileDed512.png	512×512
SmileDed512(1).png	1024×1024
SmileDed512(2).png	64×64
SmileDed512(3).png	192×192
SmileDed512(4).png	128×128
SmileDed512(5).png	256×256

2. Переименование файлов по размерам

Файлы в папке SmileDed переименованы в соответствии с их размерами:

ren SmileDed512.png favicon-512x512.png
ren "SmileDed512(1).png" favicon-1024x1024.png
ren "SmileDed512(2).png" favicon-64x64.png
ren "SmileDed512(3).png" favicon-192x192.png
ren "SmileDed512(4).png" favicon-128x128.png
ren "SmileDed512(5).png" favicon-256x256.png

3. Копирование файлов в основную папку favicon

Скопированы необходимые файлы для стандартного набора favicon:

# Android Chrome
copy SmileDed\favicon-192x192.png android-chrome-192x192.png
copy SmileDed\favicon-512x512.png android-chrome-512x512.png

# Apple Touch Icon
copy SmileDed\favicon-192x192.png apple-touch-icon.png

# Основной favicon
copy SmileDed\favicon-512x512.png favicon.png

4. Обновление конфигурации hugo.toml

Обновлены настройки favicon:

[params.assets]
  favicon = "images/favicon/favicon.png"
  favicon16x16 = "images/favicon/favicon-16x16.png"
  favicon32x32 = "images/favicon/favicon-32x32.png"
  apple_touch_icon = "images/favicon/apple-touch-icon.png"
  theme_color = "#2e2e33"

Добавлен логотип в шапку сайта:

[params.label]
  text = "dedinit()"
  icon = "images/favicon/favicon.png"
  iconHeight = 48

Примечание: Высота логотипа установлена в 48 пикселей для лучшей видимости деталей пиксель-арта. Значение по умолчанию (30px) слишком мало.

5. Тестирование и деплой

# Локальное тестирование
hugo server

# Деплой на хостинг
make deploy

---

📁 Итоговая структура файлов

static/images/favicon/
├── favicon.png                    # Основной favicon (512×512)
├── favicon-16x16.png              # 16×16 для браузеров
├── favicon-32x32.png              # 32×32 для браузеров
├── favicon.ico                    # ICO формат (48×48)
├── favicon48x48.ico               # Дополнительный ICO
├── apple-touch-icon.png           # Apple Touch Icon (192×192)
├── android-chrome-192x192.png     # Android Chrome (192×192)
├── android-chrome-512x512.png     # Android Chrome (512×512)
└── SmileDed/
    ├── favicon-64x64.png          # 64×64
    ├── favicon-128x128.png        # 128×128
    ├── favicon-192x192.png        # 192×192
    ├── favicon-256x256.png        # 256×256
    ├── favicon-512x512.png        # 512×512
    ├── favicon-1024x1024.png      # 1024×1024
    └── *.piskel                   # Исходники Piskel

---

🎯 Результат

✅ На сайте отображается логотип SmileDed слева от названия dedinit() в шапке сайта
✅ Favicon отображается во вкладке браузера
✅ Поддерживаются все стандартные размеры для различных устройств и браузеров
✅ Пиксель-арт стиль сохранён без сглаживания (PNG формат)

---

📝 Коммиты

Commit	Описание
2add28f	Обновлены настройки favicon на SmileDed
56d9a51	Добавлен логотип в шапку сайта (SmileDed 48px)

---

🔗 Полезные ссылки

• Piskel App — редактор пиксель-арта
• RealFaviconGenerator — генератор favicon
• Photopea — удаление фона, редактирование
• Документация PaperMod — параметры label.icon

---

💡 Рекомендации на будущее

1. Обновление логотипа: При изменении дизайна SmileDed обновите файл favicon.png и выполните make deploy
2. Добавление SVG: Для современных браузеров можно добавить favicon.svg для лучшей масштабируемости
3. PWA: Для Progressive Web App добавьте файл site.webmanifest с иконками
4. Тёмная тема: Можно создать альтернативный favicon для тёмной темы через <link rel="icon" media="(prefers-color-scheme: dark)">