Документирование задачи по настройке favicon и логотипа

ROADMAP.md

@@ -21,6 +21,10 @@
 ### Кастомизация темы
 - [x] **Создание собственной темы rDedInit** на базе PaperMod
 - [x] Документирование структуры темы (STRUCTURE.md)
+- [x] **Настройка favicon и логотипа сайта** (docs/favicon-logo-setup.md)
+  - [x] Создан набор favicon в стиле пиксель-арт (SmileDed)
+  - [x] Добавлен логотип в шапку сайта (48px)
+  - [x] Настроены все стандартные размеры для браузеров и устройств
 
 ### Контент
 - [x] Создание структуры папок content/posts/
@@ -58,7 +62,7 @@
 ### Визуальные изменения
 - [ ] Настроить цветовую схему под бренд dedinit()
 - [ ] Кастомизировать главную страницу
-- [ ] Добавить кастомный favicon
+- [x] Добавить кастомный favicon
 - [ ] Настроить типографику для удобного чтения лонгридов
 
 ### Контент
@@ -71,8 +75,8 @@
 ## 📈 Среднесрочные задачи (1-2 месяца)
 
 ### Улучшение темы
+- [x] **Кастомный header с логотипом** — добавлен логотип SmileDed 48px (docs/favicon-logo-setup.md)
 - [ ] **Разработка уникальных элементов дизайна**
-  - [ ] Кастомный header с логотипом/названием
   - [ ] Уникальные стили для блоков кода
   - [ ] Анимации и переходы (минималистичные)
   - [ ] Кастомные иконки для социальных сетей

docs/favicon-logo-setup.md

@@ -0,0 +1,174 @@
+# 🎨 Настройка favicon и логотипа сайта (SmileDed)
+
+## Дата выполнения
+7 марта 2026 г.
+
+## Описание задачи
+Настроить favicon и логотип для сайта dedinit.ru на основе пиксель-арт графики SmileDed в стиле Dwarf Fortress.
+
+---
+
+## 📋 Предыстория
+
+Исходные файлы favicon были созданы в стиле пиксель-арта (Dwarf Fortress) с помощью Piskel App. Файлы хранились в папке `static/images/favicon/SmileDed/` с именами, не соответствующими их размерам.
+
+---
+
+## 🔧 Выполненные шаги
+
+### 1. Определение размеров существующих файлов
+
+Использован PowerShell скрипт для определения размеров PNG изображений:
+
+```powershell
+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` переименованы в соответствии с их размерами:
+
+```bash
+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:
+
+```bash
+# 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:
+```toml
+[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"
+```
+
+#### Добавлен логотип в шапку сайта:
+```toml
+[params.label]
+  text = "dedinit()"
+  icon = "images/favicon/favicon.png"
+  iconHeight = 48
+```
+
+**Примечание:** Высота логотипа установлена в 48 пикселей для лучшей видимости деталей пиксель-арта. Значение по умолчанию (30px) слишком мало.
+
+### 5. Тестирование и деплой
+
+```bash
+# Локальное тестирование
+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](https://www.piskelapp.com/) — редактор пиксель-арта
+- [RealFaviconGenerator](https://realfavicongenerator.net/) — генератор favicon
+- [Photopea](https://www.photopea.com/) — удаление фона, редактирование
+- [Документация PaperMod](https://github.com/adityatelange/hugo-PaperMod/wiki/Configuration) — параметры 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)">`