Разбираемся как на своем компьютере сделать фавиконку для сайта без разных онлайн-сервисов.
Всем привет.
Рано или поздно (лучше рано, чем поздно) любой человек, который занимается веб-разработкой, дизайном или продвижением сайтов сталкивается с проблемой, что нужно сделать фавиконку для сайта.
Зачем нужен фавикон
Для начала разберемся зачем вообще нужен favicon. Если говорить простым языком, то причины три:
1. Это добавит вам плюсов в карму от поисковых роботов.
2. Вы выделитесь на фоне тех, у кого фавиконки нет или она сделана неправильно, или не во всех вариантах.
3. Это просто краство смотрится в браузере или на рабочем столе копьютера или телефона, если пользователь сделает ярлык.
Форматы фавикон
Про создание favicon во всех возможных вариантах я расскажу в другой статье. Здесь просто обобщу.
Если вы прешили правильно с точки зрения продвижения своего сайта сделать для него фавиконку, то у вас должны быть фавиконки в следующих форматах:
- png
- svg
- ico
Как минимум у вас должен быть файл favicon.ico. Как максимум png и svg. А если по взрослому, то и файл manifest.webmanifest.
Файлы favicon.ico и manifest.webmanifest должны лежать в корне сайта. А все остальное можно расположить в удобной папочке на сайте и прописать в коде сайта правильно к ним ссылочки.
Файл *.svg у вас должен быть один. Он векторный и легко растягивается на любой экран без потери качества. Я обычно его 512 на 512 пикселей.
Файлов *.png должно быть несколько под разные устройства, так как они берут разные размеры фавиконок.
PNG - это растровый формат (просто картинка) и если файл маленький, например 16х16 пикселей, а устройство его растянет до 144 пикселей, то будут видны сплошные точки и будет некрасиво и мутно.
Именно поэтому делают много разных размеров PNG чтобы все было красиво на всех устройствах.
В идеале ваш исходник должен быть векторный, вы из него делаете png разного размера, а также svg. И все выглядит презентабельно.
Проблемы с favicon.ico
Если с svg и png файлами все понятно и легко, а их можно сделать в любом платном и бесплатном редакторе, то с файлами, которые имеют расширение *.ico есть проблемы.
Проблема №1.
Файл favicon.ico не так просто сгенерировать. Для этого понадобится программа, которую можно установить на компьютер или онлайн-сервис.
У первого и второго решения есть свои преимущества и недостатки. Но это вопрос выбора каждого. Навязывать конкретный вариант не буду.
Проблема №2.
Мы живем с вами в России в эпоху, где с одной стороны существуют западные санкции и как следствие ограничения на использование того или иного программного обеспечения или тех или иных интернет-сервисов. А с другой стороны, когда в стране существует инквизиция во главе с господином Шадаевым и его подельниками.
Иными словами сделать фавиконку порой тот еще квест в силу того, что западные сервисы и программы можно скачать или получить к ним доступи можно только через VPN, а Роскомнадзор и Минцифры занимаются тем, что усердно мешают работе VPN лишь бы россияне поскорее перешли в карманный месенджер семейства Кириенко.
У них это не сказать чтобы хорошо выходит, но проблемы в работе указанные инквизиторы создают. И как следмствие имеется определенная проблема в использовании как сервисов для генерации фавиконок, так и проверке сайтов на соответствие требованиям поисковых систем на их наличие.
Решение проблемы с favicon.ico
Решений на самом деле много. Например, переехать в Беларусь, Казахстан или Вьетнам. А из менее радикальных установить прокси или VPN, которые стабильно работают.
А можно просто установить программу ImageMagick и быстро, легко и просто создавать favicon.ico.
Как сделать фавиконку на сайт с ImageMagick
На первом шаге нам просто нужно уствановить эту программу. Это можно сделать либо используя системную консоль или Git Bash.
Я активно использую Git Bash поэтому делаю в нем. Но разницы где делать на этом этапе нет.
Поэтому открываем, что вам удобно, и вводим следующую команду:
В Windows:
winget install ImageMagick.ImageMagick
В MacOS
brew install imagemagick
В Linux
sudo apt-get install imagemagick
Вводим команду:
magick -version
и проверяем что все работает.
Теперь можно перейти непоссредственно к генерации favicon.ico.
Перед началом вы должны убедиться, что находитесь в папке, где расположен файл-исходник.
Файл-исходник - это файл png, с фавиконкой. Я использую как исходник файл с размером 512 на 512 пикселей.
Если вы находитесь именно в папке с файлом-исходником (в моем случае он называется 512.png), то в командной строке вводите следующую команду:
magick 512.png -define icon:auto-resize=256,128,64,48,32,16 favicon.ico
Поясню, что icon:auto-resize=256,128,64,48,32,16 делает много размеров и упаковывает их в один .ico
В идеале у вас должны быть такие файлы в png.
После этого вводите команду:
magick identify favicon.ico
И проверяете, что у вас сгенерировалось внутри файла ico
Если вы находитесь не в папке с файлом-исходником, то вам необходимо указать в команде к нему путь.
В PowerShell Windows это выглядит так:
magick "C:\Users\PutinRulit\Desktop\icons\input.png" -define icon:auto-resize=256,128,64,48,32,16 "C:\Users\PutinRulit\Desktop\icons\favicon.ico"
C:\Users\PutinRulit\Desktop\icons\input.png - это путь где лежит файл-исходник
C:\Users\PutinRulit\Desktop\icons\favicon.ico - это путь, где будет лежать сгенерированный файл favicon.ico
Каждый выбирает как ему более удобно. Мне нравится просто в папке проекта, где я делаю фавиконки открывать Git Bash и генерировать там все, а потом переносить просто favicon.ico в корень сайта.
Это позволяет всегда вводить одну и ту же команду и не возиться с путями к файлам.
На сегодня все. В следующей статье расскажу, как я создаю фавиконки для сайтов и какие теги прописываю в коде сайта.
Подписывайтесь на канал, ставьте лайки.