Создать favicon и иконки для сайта с помощью сценария Nautilus в Linux

Из одной картинки собираю набор favicon и png под сайт, плюс site.webmanifest и короткую инструкцию по подключению — всё одним сценарием Nautilus.

Куда положить

Можно просто скачать скрипт Nautilus ниже и положить по этому пути. Скрипты Nautilus живут здесь:

bash
~/.local/share/nautilus/scripts/

Этот файл — ~/.local/share/nautilus/scripts/Создать favicon для сайта. В свойствах включаю «Исполняемый как приложение» — без этого пункта в меню не будет.

Или через командную строку

  1. Ставлю зависимости

    Скрипт проверяет команду convert из ImageMagick — без неё выходит. OptiPNG желателен: без него PNG остаются без доп. оптимизации.

    bash
    sudo apt install -y imagemagick optipng
  2. Создаю файл

    Имя файла — то, что будет в меню: Создать favicon для сайта.

    bash
    mkdir -p ~/.local/share/nautilus/scripts
    touch ~/.local/share/nautilus/scripts/"Создать favicon для сайта"
  3. Даю права на исполнение

    Без прав на исполнение Nautilus скрипт не покажет.

    bash
    chmod +x ~/.local/share/nautilus/scripts/"Создать favicon для сайта"
  4. Открываю в редакторе

    xdg-open поднимает графический редактор, не nano.

    bash
    xdg-open ~/.local/share/nautilus/scripts/"Создать favicon для сайта"
  5. Вставляю код и пользуюсь

    Вставляю код ниже и пользуюсь: выделил файлы → ПКМ → «Сценарии». Чтобы меню подхватило файл:

    bash
    nautilus -q

Код

bash
#!/bin/bash

readonly SCRIPT_TITLE="Создать favicon для сайта"

# Проверка зависимостей
check_dependencies() {
    if ! command -v convert &> /dev/null; then
        notify-send "$SCRIPT_TITLE" "ImageMagick не установлен. Установите: sudo apt install imagemagick"
        exit 1
    fi

    if ! command -v optipng &> /dev/null; then
        notify-send "$SCRIPT_TITLE" "OptiPNG не установлен. PNG без доп. оптимизации. sudo apt install optipng"
    fi
}

# Создание квадратного изображения с центрированием
create_square_icon() {
    local input="$1"
    local size="$2"
    local output="$3"
    
    convert "$input" 
        -resize "${size}x${size}^" 
        -gravity center 
        -extent "${size}x${size}" 
        -background transparent 
        "$output"
    
    if command -v optipng &> /dev/null; then
        optipng -quiet -o7 "$output"
    fi
}

# Создание favicon.ico
create_favicon_ico() {
    local input="$1"
    local output="favicon.ico"
    convert "$input" 
        ( -clone 0 -resize 16x16^ -gravity center -extent 16x16 ) 
        ( -clone 0 -resize 32x32^ -gravity center -extent 32x32 ) 
        ( -clone 0 -resize 48x48^ -gravity center -extent 48x48 ) 
        -delete 0 -colors 256 "$output"
}

# Генерация site.webmanifest
create_webmanifest() {
    local output="site.webmanifest"
    cat <<EOF > "$output"
{
    "name": "My Website",
    "short_name": "Website",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}
EOF
}

# Создание инструкции по подключению favicon
create_instructions() {
    local output="favicon_instructions.txt"
    cat <<EOF > "$output"

Подключение всех иконок

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

1. Стандартный favicon (все браузеры)
--------------------------------------------------
Добавьте в <head> вашего HTML:
<link rel="icon" type="image/x-icon" href="/favicon.ico">

2. Favicon для современных браузеров (PNG)
--------------------------------------------------
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

3. Apple Touch Icon (Safari, iOS)
--------------------------------------------------
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

4. Иконки для Android Chrome (PWA)
--------------------------------------------------
Уже подключены в site.webmanifest:
- android-chrome-192x192.png
- android-chrome-512x512.png

5. Web App Manifest (PWA)
--------------------------------------------------
Добавьте в <head>:
<link rel="manifest" href="/site.webmanifest">

6. Цвета темы (PWA)
--------------------------------------------------
<meta name="theme-color" content="#ffffff">

EOF
}

# Основной процесс
main() {
    check_dependencies

    local input_file=""

    if [[ $# -gt 0 ]]; then
        input_file="$1"
    elif [[ -n "${NAUTILUS_SCRIPT_SELECTED_FILE_PATHS:-}" ]]; then
        input_file=$(printf '%sn' "$NAUTILUS_SCRIPT_SELECTED_FILE_PATHS" | head -n1)
    fi

    if [[ -z "$input_file" ]]; then
        notify-send "$SCRIPT_TITLE" "Выберите одно изображение."
        exit 1
    fi

    if [[ ! -f "$input_file" ]]; then
        notify-send "$SCRIPT_TITLE" "Файл не найден: $(basename "$input_file")"
        exit 1
    fi

    cd "$(dirname "$input_file")" || exit 1
    input_file="$(basename "$input_file")"
    
    # Favicon (ICO + PNG)
    create_favicon_ico "$input_file"
    create_square_icon "$input_file" 16 "favicon-16x16.png"
    create_square_icon "$input_file" 32 "favicon-32x32.png"
    
    # Apple Touch Icon
    create_square_icon "$input_file" 180 "apple-touch-icon.png"
    
    # Android Chrome Icons
    create_square_icon "$input_file" 192 "android-chrome-192x192.png"
    create_square_icon "$input_file" 512 "android-chrome-512x512.png"
    
    # Web Manifest
    create_webmanifest
    
    # Инструкция
    create_instructions

    notify-send "$SCRIPT_TITLE" "Готово. Созданы favicon, png, site.webmanifest и инструкция."$'n'"Папка: $(pwd)"
}

main "$@"
← К списку статей

Поделиться

Комментарии

Пока нет комментариев — можете написать первый.

Оставить комментарий

Войти с помощью

или оставьте комментарий как гость

Отправка защищена сервисом Yandex SmartCaptcha. Подробности — в политике конфиденциальности.