From 19eab049fb5cf6f29795c71aa9ca83e2fc9f236a Mon Sep 17 00:00:00 2001 From: Storozhenko Evgeny Vladimirovich aka kpa39l Date: Sat, 7 Mar 2026 17:05:30 +0300 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=BA=D1=83=D0=BC=D0=B5=D0=BD?= =?UTF-8?q?=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=B7?= =?UTF-8?q?=D0=B0=D0=B4=D0=B0=D1=87=D0=B8=20=D0=BF=D0=BE=20=D0=BD=D0=B0?= =?UTF-8?q?=D1=81=D1=82=D1=80=D0=BE=D0=B9=D0=BA=D0=B5=20favicon=20=D0=B8?= =?UTF-8?q?=20=D0=BB=D0=BE=D0=B3=D0=BE=D1=82=D0=B8=D0=BF=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ROADMAP.md | 8 +- docs/favicon-logo-setup.md | 174 +++++++++++++++++++++++++++++++++++++ 2 files changed, 180 insertions(+), 2 deletions(-) create mode 100644 docs/favicon-logo-setup.md diff --git a/ROADMAP.md b/ROADMAP.md index 8a024f4..fb03c4c 100644 --- a/ROADMAP.md +++ b/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 с логотипом/названием - [ ] Уникальные стили для блоков кода - [ ] Анимации и переходы (минималистичные) - [ ] Кастомные иконки для социальных сетей diff --git a/docs/favicon-logo-setup.md b/docs/favicon-logo-setup.md new file mode 100644 index 0000000..a38971f --- /dev/null +++ b/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 для тёмной темы через ``