Как сделать иконку для сайта прозрачными

Это очень просто. Если фон белый а край рисунка довольно ровный, то выбираем инструмент волшебный ластик и просто тыкаем им один раз на белый фон. Фон уберётся.

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

Вариант с выделением: Берём для начала — обычную картинку и открываем её в фотошопе (Меню: Файл — открыть). Если на слое замочек то нажимаем на слой мышкой дважды и снимаем его. Затем выбираем инструмент «Волшебная палочка» и нажимаем ей в нескольких местах по белому фону — чтобы он у нас выделился.

После этого переключаемся на ластик и правой кнопкой мыши жмем и выбираем «Волшебный ластик»:

Кликаем волшебным ластиком по белому фону — и он у нас исчезает.Далее отключаем выделение:

Затем выбираем обычный ластик — и стираем остатки (если они есть).
После этого выбираем в меню «Размер изображения» и выбираем нужный размер (размер в пикселях), Я для примера сделаю 50х50 и 70х70.

Теперь нам осталось только сохранить нашу иконку в формате png,чтобы остался прозрачный фон.

Как создать фавикон для сайта: самый подробный гайд

Favicon— это значок сайта. Иконка видна в результатах поиска и во вкладках браузера и обозначает конкретный сайт или страницу. Также фавикон — это значок мобильного приложения на рабочем столе смартфона.

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

Фавикон — это возможность сделать сайт более узнаваемым: его видно во вкладках браузера, в закладках, в сниппетах поисковой выдачи, на экране смартфона. Фавикон поможет привлечь на сайт больше посетителей, которые возможно станут вашими клиентами. Этот инструмент подчеркивает уникальность и фирменный стиль бренда.

Сам по себе favicon не влияет на ранжирование сайта в поиске и оптимизацию страниц. При этом он выполняет другие, не менее важные функции:

С фавиконом страница сразу заметна в поисковой выдаче. Без иконки страница не бросается в глаза.
Возрастает узнаваемость сайта. Фавикон — важная часть бренда. Логотип из favicon запоминается лучше и сразу освежает в памяти пользователя черты конкретного бренда.
Пользователю легче найти нужный сайт. В выдаче, истории браузера или закладках найти нужный сайт, который отмечен знакомой иконкой, намного легче, чем без нее.
Фавикон избавляет от ошибок в лог-файлах. Браузер отправляет запрос на файл favicon.ico и, если такой не находится, то возникает ошибка 404.

При создании favicon нужно учитывать несколько параметров — формат, размер и дизайн. Рассмотрим каждый критерий более подробно.

Изначально изображения для favicon существовали только в одном формате — .ico (ико). Он довольно удобный, т.к. позволяет загружать несколько иконок разного размера. Однако браузеры часто выбирали неверный размер этого формата, и фавикон отображался некорректно, например, в низком разрешении.

Позже появились и другие форматы фавикона, они лучше отображались и меньше весили — svg (свг) и .png (пнг).

.svg — векторный формат графики, который смотрится четко в любом разрешении. Именно поэтому .svg отлично подходит для фавиконок, ведь для них не используются сложные изображения с большим количеством мелких деталей. Формат .png позволяет использовать прозрачный фон. Фафикон как бы «парит». Что особенно важно с эстетической точки зрения, если в браузере используется темная тема оформления.

Есть и другие форматы, например, .jpeg и .gif. Однако анимированные изображения могут перетягивать слишком много внимания на себя и отвлекать посетителей от содержимого сайта.

.jpg — весит меньше по сравнению с png, но не поддерживает прозрачность. Это нужно это учитывать.

Рассмотрим рекомендации по формату фавикона от разных поисковых систем. Для Yandex предпочтительнее использовать .svg, но поисковая система также поддерживает иконки в форматах .jpeg, .png, .bmp, .gif (без анимации). Google поддерживает форматы .svg, .ico, .gif без анимации, .jpeg, .png.

Рассмотрим размеры для самого распространенного формата фавикона — .ico.

Favicon.ico можно сравнить с контейнером, в котором содержатся сразу несколько файлов разного размера. Для корректного отображения достаточно использовать три: 16х16, 32х32, 48х48 пикселей. Такой размер будет корректно отображаться на разных браузерах/операционных системах и при необходимости легко масштабируется до нужных параметров.

Кроме того, у разных платформ требования к размеру фавиконок также отличаются. Обычно минимальный размер составляет 16х16 пикселей. Но, например, в соответствии с рекомендациями Яндекса лучше использовать иконки размером 120х120 пикселей, для Google это правило тоже актуально.

Для мобильных устройств нужны иконки большого размера, чтобы использовать их в качестве значков приложений. Так, для Android и Apple лучше подобрать изображения размером 180х180 пикселей.

Кроме формата и размера, важно продумать внешний вид фавикона. Для этого придерживайтесь таких параметров:

Соответствие тематике сайта. Для сайта конкретной компании лучше взять ее логотип. Однако, если логотип сложный, вытянутый, имеет множество мелких элементов, лучше взять только его часть. Когда у бренда нет логотипа, подойдет тематическое изображение в цветовой гамме, соответствующей тематике сайта.
Привлечение внимания. Сейчас 90% сайтов имеют фавиконы, а на первой странице поисковой выдачи они вообще есть у всех. Поэтому важно подобрать картинку, которая привлекает внимание и выделяется на фоне остальных. Часто для этого используют специальные символы, например, красную стрелку.
Простота. Фавикон в закладках браузера, на его вкладках и в поисковой выдаче очень маленький. Поэтому не стоит выбирать картинку со множеством деталей: их просто невозможно разглядеть. Самый лучший вариант — изображение, где будет немного деталей, не больше трех цветов и понятный, однозначный смысл.
Оригинальность. Фавикон должен быть уникальным — таким, чтобы его не использовали другие ресурсы. Например, если в поисковой выдаче будет несколько сайтов с одинаковыми иконками виде лебедя, ни один из них не будет выделяться. Банальные картинки тоже лучше не использовать.

Чтобы фавикон корректно отображался в разных контекстах, лучше сделать два варианта. Первый — со сплошной заливкой фона. Подходит, когда есть маска для фона. Например, в сетчатых закладках, контекстном меню. Второй вариант — с прозрачным фоном. Такая иконка показывается рядом с URL-адресом: в закладках браузера, в адресной строке и т.д.

Создать фавикон можно разными способами. Например, с помощью Photoshop. Установите специальный плагин, который позволит создать файл в формате ico.

Также есть отдельные программы.

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

Для этого сервиса необходимо изображение размером 260х260 пикселей. В редакторе сервиса можно заменить фон, добавить отступы, изменить цветовую гамму. Сервис позволяет получить набор фавиконов нужных размеров и код для вставки на сайт.

Для работы с сервисом нужен исходник размером не менее 310х310 пикселей. Изменить изображение нельзя: после обработки сервис сгенерирует код для вставки на сайт и предложит скачать пакет favicon.

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

Для создания фавикона нужно загрузить изображение размером 310х310 пикселей и весом до 5 Мб. После обработки вы получите готовый пакет файлов. Также внутри будет HTML-код, который нужен, чтобы вставить фавикон на сайт.

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

Еще один полностью бесплатный сервис для создания фавикона. В отличие от предыдущего конвертера, favicon.io — англоязычный ресурс. При этом сервис имеет понятные настройки. Создать фавикон можно из картинки, текста или эмоджи.

Протестируйте несколько разных Favicon Converter Online, чтобы подобрать подходящий.

Есть еще один вариант получения фавикона — скачать его с чужого сайта. Для этого нужно перейти по одной из ссылок, нажать Enter и скопировать изображение:

Вместо example.ru вставьте адрес сайта, с которого хотите извлечь фавикон. Однако вытащить и использовать чужую иконку — не лучший вариант. Во-первых, фавикон может быть защищен авторским правом, и его использование повлечет за собой наказание. Во-вторых, фавикон должен быть индивидуальным: одинаковые логотипы не будут выделяться и не привлекут внимания.

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

Подробное руководство по фавикону для сайта

Favicon (от англ. FAVorites ICON — «значок для избранного») — значок сайта или страницы.

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

Читать:

В чем заключается метод половинного деления

Фавиконы в выдаче Яндекса Сайты с фавиконами в выдаче Яндекса

В Google фавиконки не отображаются. Поисковик периодически тестирует эту функцию, так что они могут появиться в будущем.

Google отображает фавиконки Фавиконки в выдаче Google (тест)

Хотя в результатах иностранного поисковика фавиконов нет, они все равно отображаются на вкладках браузера и в закладках.

Зачем нужен фавикон

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

Выделяет сайт в выдаче

Favicon привлекает внимание к сайту. Без иконки сниппет меньше заметен взгляду, кажется, что ему чего-то не хватает.

С фавиконом сайт запоминается лучше

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

Упрощает поиск нужного сайта

В закладках и истории проще искать нужный сайт не по тексту заголовка, а по опознавательной картинке — знакомому фавикону.

Избавляет от ошибки в лог-файлах

Браузеры запрашивают файл favicon.ico и если не находят строку с указанием фавикона, сервер отмечает в логах ошибку 404.

К примеру, такую:

Какую картинку выбрать для фавикона

Тематическую

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

Контрастную

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

Упрощенную

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

Оригинальную

Фавикон не будет выделять сайт в выдаче, если у конкурентов будут такие же картинки. Банальные популярные иконки лучше не использовать.

Как создать favicon для сайта

Есть три самых распространенных способа:

Специальный плагин для Photoshop
Позволяет работать этому популярному редактору изображений с форматом ico.
Специальные программы для изготовления фавиконов
Они специально «заточены» для изготовления иконок для сайта.
Онлайн генератор favicon
Самый простой и доступный способ — загрузить картинку в генератор, который сделает иконку для сайта из любого изображения. Иконка получится красивее, если изображение-донор кадрировать до квадрата.

Загрузите квадратную картинку в генератор от PR-CY, он создаст архив с файлом ICO, в котором будет несколько вариантов фавикона, в том числе ретина иконки.

Бесплатный генератор фавикона для сайта Панель бесплатного генератора фавикона

Как установить фавикон на сайт

Создайте картинку для фавикона с именем favicon.ico.
Готовый файл нужно сохранить в корневом каталоге сайта.
Если вы захотите использовать разные фавиконы для разделов сайта, скопируйте путь к изображению https://sitename.ru/favicon.ico. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
Добавьте ссылку на размещенный файл в HTML-код главной:

Атрибут «rel» указывает на тип ресурса. Большинство браузеров распознают «icon», для Internet Explorer нужен «shortcut icon».

От формата файла зависит тип передаваемых данных. Для ICO это «image/x-icon» или «image/vnd.microsoft.icon», для PNG — «image/png» и аналогично для других форматов.

Для мобильных устройств часто прописывают отдельные фавиконы, указывая, к примеру, rel=»apple-touch-icon».

Фавиконка не появится сразу после установки кода, нужно дождаться, пока поисковик ее проиндексирует.

Как установить разные favicon для отдельных страниц

Разным страницам сайта можно указать разные фавиконки, чтобы они различались на вкладках. К примеру, веб-мастер может установить разные цвета одной иконки для блога, каталога и форума или для главной и разных сервисов, как у PR-CY:

Разные фавионки на страницах сайта Фавиконы на разных разделах одного сайта

Как установить разные фавиконки разделам сайта:

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

Размеры фавиконов для браузеров и устройств

С технической точки зрения быстрее и проще сделать одну иконку ICO, PNG или SVG для всех устройств. С точки зрения юзабилити лучше сделать несколько для разных устройств и браузеров, потому что они могут отличаться внешне — где-то требуется больший размер, где-то достаточно небольшого файла.

Если мобильный пользователь захочет добавить ссылку на сайт на главный экран смартфона, в Android и iOS иконкой для ссылки станет фавикон.

Фавиконы на рабочем столе смартфона

Фавиконы сайтов на экране смартфона

Если это возможно, ориентируйтесь на каждую платформу, с которой пользователи могут открыть сайт.

Достаточный пакет фавиконок для популярных браузеров

Стандартно для фавикона делают файл favicon.ico — это контейнер для нескольких файлов. Будет достаточно favicon.ico с файлами в размерах 16×16, 32×32 и 48×48.

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

Дополнительно можно добавить файлы для мобильных устройств.

Android

Обычно используют файл .png размером 180×180, можно использовать прозрачность. Указать фавикон и его расположение для Android можно через спецификацию Web App Manifest. В ней описан простой JSON-файл, в котором веб-мастеры указывают иконки, размеры и форматы для сайта или приложения.

Манифест указывают с помощью:

С помощью файла-манифеста у сайта, который пользователь вынес на главный экран смартфона, будет настроенный качественный фавикон.

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML, к примеру:

Apple

Для iOS иногда используют размер 57×57, но рекомендуют лучше делать иконку PNG размером 180×180. В документации Safari такие называются Web Clips, в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах.

В rel нужно указать “apple-touch-icon.png”.

Apple поддерживает и другой формат иконок. Для закрепленных вкладок в Safari и кнопок на Touch Bar в MacBook есть возможность указать монохромную векторную маску и цвет, который ее заполнит при наведении.

Настраивают с помощью link rel=»mask-icon».

Edge и IE 12

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.

У Microsoft есть «Browser configuration schema reference» — XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файлы конфигурации браузера позволяют задавать настройки с помощью внешних XML-файлов.

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

Корректная favicon-иконка с прозрачностью

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

Простой вариант

Делается favicon-иконка легко. В любом графическом редакторе готовим картинку размером 32×32 пикселя. Сегодня лучше именно такой размер, а не 16×16, как было ранее. Большая иконка без проблем подхватывается браузерами, а на всяких устройствах с Retina-дисплеями выглядит более гладко и красиво.

Под Windows могу рекомендовать редактор Paint.Net. Он бесплатен и все что нужно в нем есть.

Просто открываем в нем картинку, если нужно изменяем ее размер до 32×32.

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

Картинку можно подготовить с прозрачным фоном. Если значок/буква, или что там у вас, заполняет не все пространство изображения, как в примере буква «D», то прозрачность крайне желательна. Сохранять результат следует в формат PNG 32-бит. Только так получится сделать PNG с прозрачностью.

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

Я пробовал разные сайты для генерации favicon-иконок, но именно этот мне понравился. Он делает корректную иконку/файл, который 100% открывается везде. Кроме того он не уродует контуры изображения на прозрачном фоне и вообще делает иконку с прозрачностью так, как надо.

Размещать файл favicon.ico следует обязательно в корне сайта.

Если у вас шаблон сайта или движок предусматривает расположение иконки в каком-то каталоге, то можете разместить её там, но дополнительно все равно скопируйте файл и в корень сайта. Так его точно подхватят все, кто только может.

В HTML-коде сайта favicon.ico прописывается внутри тега head так:

Как сделать иконку для сайта прозрачными