Документирование задачи по настройке favicon и логотипа
This commit is contained in:
+6
-2
@@ -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 с логотипом/названием
|
||||
- [ ] Уникальные стили для блоков кода
|
||||
- [ ] Анимации и переходы (минималистичные)
|
||||
- [ ] Кастомные иконки для социальных сетей
|
||||
|
||||
@@ -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)">`
|
||||
Reference in New Issue
Block a user