Генерация и оптимизация фавиконов с открытым исходным кодом в 2022 году


🌟 Инструменты для создания фавиконов с открытым исходным кодом

В этом посте о генерации фавиконов с открытым исходным кодом мы рассмотрим, как можно создать фавиконки для вашего сайта или веб-приложения с нуля, используя бесплатные, автономные инструменты. Мы будем использовать Inkscape для создания SVG-значка, затем напишем скрипт для преобразования его в файлы PNG и ICO, необходимые для широкой поддержки в старых и современных браузерах. В качестве последнего шага мы оптимизируем созданные файлы, а также исходный SVG, чтобы вы могли отправлять меньше байт конечным пользователям. Inkscape — это альтернатива с открытым исходным кодом для таких программ, как Adobe Illustrator; вы можете использовать его для создания исходного SVG. Если вы уже пробовали использовать Inkscape некоторое время назад и он вам не понравился, потому что был немного корявым, я бы обязательно попробовал его еще раз. Последняя версия работает плавно и ощущается как новое и другое приложение по сравнению со своими предшественниками.

Мы также будем использовать Inkscape из командной строки для преобразования входного SVG в PNG-файлы, используемые некоторыми устройствами для фавиконов. Для оптимизации PNG-файлов мы используем OptiPNG. Мы также можем оптимизировать входной SVG и использовать для этого Scour. Если это звучит интересно, тогда давайте начнем работу, убедившись, что у нас установлены все необходимые приложения.

Бесплатная автономная генерация фавикона 🛠

Мы создадим оригинальный фавикон в виде SVG-файла. Файлы SVG можно использовать непосредственно в качестве фавиконов в современных браузерах, и они обычно небольшие, потому что используют векторную графику. При использовании векторной графики исходный текст содержит (или может быть легко преобразован в него) инструкции для пошагового создания результата. Например, нарисуйте черную линию толщиной 2 px отсюда досюда. В отличие от растровых файлов (например, PNG), которые содержат подробную информацию о цвете каждого пикселя изображения. Поскольку SVG являются векторными, они легко масштабируются без потери качества.

Если вы измените иконку на более позднем этапе, можно просто повторно запустить скрипт, используя обновленный SVG в качестве входных данных. Хотя существуют онлайн-инструменты для преобразования SVG-фавиконов в файлы ICO и PNG, может быть быстрее и проще создать результат локально, используя бесплатные инструменты с открытым исходным кодом. Именно такой подход мы используем здесь.

Генерация фавиконов с открытым исходным кодом

  1. Мы будем использовать бесплатные приложения с открытым исходным кодом, такие как Inkscape, OptiPNG и Scour. Если у вас на компьютере не установлена ни одна из этих программ, вы можете установить их прямо сейчас. На macOS вы можете использовать Homebrew для их установки:

      brew install inkscape optipng scour
    

    На Linux, Unix или Windows используйте ваш любимый менеджер пакетов вместо Homebrew, чтобы установить приложения на вашу машину.

  2. Затем создайте свой фавикон в Inkscape и сохраните его в формате Inkscape SVG. В идеале он должен быть квадратным (например, 400 px на 400 px).

  3. Теперь сохраните этот сценарий bash в файл на вашем компьютере в удобном месте. Он
    создаст каталог output и сохранит в нем сгенерированные и оптимизированные изображения favicon.

        #! /usr/local/bin/bash
    
        if [ $# -eq 0 ]
          then
            echo "Usage: "$0" input_favicon.svg" 
            exit 1;
        fi
    
        SVG_SOURCE="$(echo $1)"
        OUTPUT_DIR="$(echo `pwd`)"/output
    
        # create the output directory and don't output error if it already exists
        mkdir ${OUTPUT_DIR} 2> /dev/null
    
        # generate optimised SVG
        scour ${SVG_SOURCE} "${OUTPUT_DIR}"/icon.svg --enable-viewboxing --enable-id-stripping 
          --enable-comment-stripping --shorten-ids --indent=none
    
        # generate PNGs
        inkscape -h 32 ${SVG_SOURCE} --export-filename "${OUTPUT_DIR}""/favicon_unoptimised.png"
        inkscape -h 180 ${SVG_SOURCE} --export-filename "${OUTPUT_DIR}""/apple-touch-icon_unoptimised.png"
        inkscape -h 192 ${SVG_SOURCE} --export-filename "${OUTPUT_DIR}""/icon-192_unoptimised.png"
        inkscape -h 512 ${SVG_SOURCE} --export-filename "${OUTPUT_DIR}""/icon-512_unoptimised.png"
    
        # optimise PNGs
        optipng -o7 -out "${OUTPUT_DIR}"/favicon.ico "${OUTPUT_DIR}""/favicon_unoptimised.png"
        optipng -o7 -out "${OUTPUT_DIR}""/apple-touch-icon.png" "${OUTPUT_DIR}""/apple-touch-icon_unoptimised.png"
        optipng -o7 -out "${OUTPUT_DIR}""/icon-192.png" "${OUTPUT_DIR}""/icon-192_unoptimised.png"
        optipng -o7 -out "${OUTPUT_DIR}""/icon-512.png" "${OUTPUT_DIR}""/icon-512_unoptimised.png"
    
        # clean up temporary files
        rm "${OUTPUT_DIR}""/favicon_unoptimised.png"
        rm  "${OUTPUT_DIR}""/apple-touch-icon_unoptimised.png"
        rm "${OUTPUT_DIR}""/icon-192_unoptimised.png"
        rm "${OUTPUT_DIR}""/icon-512_unoptimised.png"
    

    Вероятно, в этом файле вместо пробелов потребуется отступ табуляции.

  4. В терминале перейдите в директорию, в которой вы хотите создать favicon, а затем запустите
    скрипт с помощью следующей команды:

        sh optimised-favicon-generator.sh input-favicon.svg
    

    Обновите input-favicon.svg до фактического пути к вашей SVG фавиконке.

  5. Теперь ваши фавиконы готовы к производству. Дополнительную информацию можно найти в статье Андрея Ситника о шести файлах, которые подходят для большинства фавиконов. Здесь мы создали пять оптимизированных файлов (используя соглашения об именовании из той статьи). Шестой файл — это файл manifest.json, который эта статья может помочь вам создать. Посмотрите видео о фавиконах SvelteKit, чтобы проверить, куда нужно сохранить файлы, чтобы использовать их в SvelteKit. Также есть видео о фавиконах Astro JS.

🔥 Оптимизация фавикона

Скрипт оптимизировал SVG с помощью Scour. Он удаляет некоторые метаданные, сокращает идентификаторы, а также удаляет комментарии. Для файлов PNG мы использовали OptiPNG с максимальными настройками оптимизации. Это может быть медленно для больших файлов, но для фавиконов это не займет много времени. Вот сравнение размеров файлов до и после использования скрипта для конкретной фавиконки:

Файл До (байты) После (байты)
apple-touch-icon.png 3,346 1,772
favicon.ico 798 545
icon.svg 3,110 1,605
icon-192.png 3,606 1,870
icon-512.png 10,310 4,530

🙌🏽 Генерация фавикона с открытым исходным кодом: Подведение итогов

В этом посте мы рассмотрели современный рабочий процесс для генерации фавиконов с открытым исходным кодом. В частности, мы увидели:

  • как можно использовать Inkscape в качестве бесплатной альтернативы Illustrator для создания SVG-фавиконов в проектах,
  • как можно использовать бесплатные инструменты с открытым исходным кодом, такие как Scour и OptiPNG, для оптимизации фавиконов, доставляя меньше байт конечным пользователям,
  • как использовать скрипт для организации преобразования фавиконов, а также оптимизации,

Дайте мне знать, если у вас есть идеи по оптимизации самого скрипта. Также сообщите, если есть другие инструменты, которые вы используете и которые могут быть полезны другим читателям. Вы можете оставить комментарий ниже, а также связаться со мной в чате Element или в Twitter. Вы также можете ознакомиться со скриптом генерации фавикона с открытым исходным кодом в репозитории Rodney Lab на GitHub.

🙏🏽 Open Source Favicon Generation: Обратная связь

Нашли ли вы это сообщение полезным? Предпочитаете ли вы видеть сообщения на другую тему? Свяжитесь с нами, чтобы предложить идеи для новых постов. Также, если вам нравится мой стиль написания, свяжитесь со мной, если я могу написать несколько постов для сайта вашей компании на условиях консалтинга. О том, как связаться с вами, читайте ниже. Если вы хотите поддержать посты, подобные этому, и можете выделить несколько долларов, евро или фунтов, пожалуйста, поддержите меня через Buy me a Coffee.

Наконец, не стесняйтесь поделиться этим постом в своих социальных сетях для всех ваших подписчиков, которые найдут его полезным. Помимо того, что вы можете оставить комментарий ниже, вы можете связаться со мной через @askRodney в Twitter, а также askRodney в Telegram. Также смотрите другие способы связаться с Rodney Lab. Я регулярно публикуюсь на Astro, а также на SvelteKit. Также подпишитесь на рассылку новостей, чтобы быть в курсе наших последних проектов.

Оцените статью
Procodings.ru
Добавить комментарий