Как переделать логотип под фавикон браузера - 16x16px?

Как уже упоминалось, вам нужно перерисовать значок в правильном размере.

Я обнаружил, что это немного сложно сделать в Photoshop, поэтому я экспортировал изображение в полном размере, а затем использовал генератор favicon.cc для ручной настройки пикселей. Вы можете сделать это в любой программе, но я считаю этот инструмент весьма полезным.

Если вы посмотрите на любой хороший веб-сайт, вы увидите, что faviconэто не их логотип, а его крошечная версия, которая достаточно похожа на сайт.

Самый простой способ, который я нашел, для последовательной передачи сообщения бренда в фавиконе — это использование двух наиболее заметных цветов или цветовой схемы логотипа и первой буквы названия компании. С натяжкой, на простом фоне одного цвета у вас может быть две буквы, как на фавиконке SE GD.

В ответ на ваш комментарий:

проблема в том, что на логотипе есть поезд, поезд невозможно представить квадратом, и попытка представить его внутри 16x16 делает основной элемент слишком маленьким, чтобы иметь какой-либо смысл

Без дополнительной информации я могу только предполагать; но учтите это:

Посмотрите на поезд, определите основные черты, определяющие его характер. Особенно форма спереди и клубы дыма. Использование такой формы позволит передать поезд даже размером 16 на 16 пикселей.

Я не говорю, что соглашайтесь с этим, но я уверен, что есть некоторые характеристики, которые вы могли бы извлечь из логотипа, чтобы представить его в крошечном размере.

Просто чтобы продемонстрировать, что можно создать фавикон с небольшими доработками и автоматическим процессом, вот значок, который используется группой, с которой я связан. Это сердце и лилия.

Чтобы создать значок, я удалил тонкие линии в геральдической лилии и утолщил линию «контура» там, где она проходит через верхнюю часть сердца. Он мог бы быть немного толще, но я сохранил белый контур вокруг изображения, и он работает на цветном фоне в панели вкладок браузера.

Затем я использовал Paint Shop Pro, чтобы уменьшить это изображение 150x150 до 16x16, вставив его в выделение 16x16 (которое предположительно использует свой алгоритм «Умный размер», что бы это ни было), и в итоге получилось следующее:

Этот метод хорошо работает для простых изображений, а мой — одноцветный и довольно жирный. Он делает все возможное со сложными изображениями, и результаты можно использовать. Не всегда необходимо работать с каждым из 256 пикселей по отдельности.

Чтобы заставить его работать для более сложного изображения, вам нужно упростить это изображение. Это может быть так же просто, как использование силуэта в основном цвете дома.

В общем, нельзя ничего "переделывать". Лучше всего воссоздать иконку избранного, отрисовывая каждый пиксель. Попытка уменьшить любое изображение до изображения размером 16x16 пикселей приведет к тому, что это будет по существу неидентифицируемая капля.

Этот инструмент отлично экономит время. Попробуйте! Он позаботится обо всем для вас.

Загрузите изображение размером около 800 x 800 пикселей, чтобы оно было красивым и четким.

http://realfavicongenerator.net/

Также добавьте этот метатег, чтобы вы могли назвать свой значок, если некоторые из них сохраняются на устройстве iOS.

<meta name="apple-mobile-web-app-title" content="Website Name">

Надеюсь, это поможет!