Способы добавления favicon на сайт

Antifavicon

Стандартный размер favicon-ки (16×16) — это конечно же маловато для текста. Однако Antifavicon позволяет поместить две строчки текста в это маленькое пространство. Используемый шрифт конечно не ахти, но что поделаешь:).

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

Создание более сложных значков

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

Заданные рамки конечно же сковывают. Однако, посмотрев некоторые примеры, можно придумать что-то довольно-таки интересное.

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

Я подготовил для вас небольшой список с достаточно популярными и простыми в освоении ресурсами по созданию фавиконок. Ну а чтобы не возникло вопросов о том, как с ними работать – составил небольшие инструкции. Кстати, о том, как добавить созданный фавикон на сайт можете прочитать в моей статье — как добавить фавикон на сайт WordPress: готовые фавиконы для сайта.

X-Icon Editor

Достаточно простой в освоении сервис. Можно творить непосредственно в редакторе или создать фавикон из своей картинки. Выбор целиком и полностью принадлежит вам.

Итак, для начала перейдите на сайт – x-icon.

Затем, выберите один из двух вариантов работы:

• Создать фавикон самому, попиксельно, используя редактор;
• Подгрузить заранее созданную в фотошопе картинку и работать непосредственно с ней.

Небольшая инструкция для тех, кто выбрал второй вариант:

1. Нажмите «Import»:

1. Загрузите картинку нажав «Upload», выделите необходимую область и размеры. Нажмите «Ok»:

1. В случае необходимости воспользуйтесь редактором и подкорректируйте загруженную картинку по своему усмотрению;
2. Когда все будет готово — нажмите «Preview» и посмотрите, как ваш фавикон отображаться в браузере;
3. Если все устраивает, вернитесь на вкладку с редактором и нажмите «Export». В появившимся окошке нажмите «Export your icon» и фавикон будет автоматически скачан на ПК:

Готово. Вам остается только добавить его на сайт.

BWS

Еще один достаточно простой в освоении ресурс. Правда, у него есть один существенный минус: если сравнивать с X-Icon – он так же позволяет создать фавикон из картинки в режиме онлайн, вот только не дает его редактировать. По сути – он просто конвертирует ваше заранее подготовленное изображение в иконку необходимого размера и расширения. Поэтому, придется как следует попотеть в фотошопе, чтобы потом не переделывать все по сто раз.

Итак, как же сделать фавикон для сайта в этом сервисе? Все просто. Вы заранее подготавливаете картинку в пейнте или фотошопе, подгружаете ее, выбираете подходящие размеры и нажимаете «Конвертировать». Когда все будет готово, иконка автоматически скачается на компьютер:

Pr-cy

Данный сервис (ссылка на сайт) своим функционалом очень похож на предыдущий. Вы так же заранее подготавливаете изображение, загружаете его и нажимаете «Создать Favicon». Сервис сам сгенерирует иконку и покажет, как она будет выглядеть в строке поиска. Вам остается только нажать «Скачать»:

Favicon.by

Весьма симпатичный и крайне интересный ресурс. Позволяет выбрать один из трех вариантов создания значка: сделать фавикон для сайта онлайн вручную, использовать для этого заранее подготовленную картинку или импортировать чужую иконку введя url сайта. Круто, не правда ли? А теперь давайте пройдемся по всем трем функциям и посмотрим, как именно они работают:

Сделать фавикон онлайн используя редактор;

Главная фишка сервиса — вам сразу же будет виден результат вашей работы:

Когда закончите творить, просто нажмите «Скачать фавиконку» справа от строчки с результатом. Загрузка начнется автоматически.

Сделать фавикон из своей картинки;

Ну, тут все по аналогии с предыдущими сервисами. Просто подгружаете изображение, редактируете и нажимаете скачать.

А теперь самое интересное – импортировать фавиконку с чужого сайта.

Введите url сайта с понравившейся иконкой и нажмите «Импортировать»:

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

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

1. Создайте картинку для фавикона с именем favicon.ico.
2. Готовый файл нужно сохранить в корневом каталоге сайта. 
3. Если вы захотите использовать разные фавиконы для разделов сайта, скопируйте путь к изображению  https://sitename.ru/favicon.ico. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
4. Добавьте ссылку на размещенный файл в 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:

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

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

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

Краткая техинструкция по фавиконам

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

Формат фавикона

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

Раньше Internet Explorer поддерживал только этот формат, сегодня же практически все известные браузеры распознают иконки в PNG, некоторые — в GIF, JPEG, SVG. Исключение — Internet Explorer 10 и более ранние версии браузера, которые принимают только ICO-файлы.

Сегодня ICO считается уже немного устаревшим форматом, чаще всего предпочтение отдают PNG. Почему именно этот формат? Ответ простой — чтобы при любых обстоятельствах (браузерах и девайсах) сохранять высокое качество фавикона. PNG поддерживается и корректно отображается практически всеми современными браузерами. 

У фавиконов в формате SVG, GIF, JPEG проблемы именно в отсутствии такой широкой поддержки. Но пару слов в защиту SVG формата все-таки хочется сказать — иконки в SVG масштабируются без потери качества, что в будущем может стать отличным решением всех проблем с отображением фавиконов. Дело за браузерами, которые уже постепенно начали внедрять поддержку этого формата свободной векторной графики. 

Узнать, какие именно форматы фавиконов поддерживают разные браузеры, можно с помощью онлайн-сервиса . Например, вы сможете увидеть, какие браузеры поддерживают или не поддерживают фавиконки в формате PNG и SVG.

Размер фавикона

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

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

Не так давно некоторые веб-мастера получили от Google письмо с рекомендацией увеличить разрешение фавикона до 192×192. 

В письме речь шла о том, что более качественные фавиконы могут принести в 2 раза больше кликов по новым вкладкам в Chrome и на главной странице Android. Согласитесь,  на расплывчатый фавикон вряд ли захотят кликать — значит, низкое разрешение иконки не вариант для хорошего пользовательского опыта.

Несколько общих правил, которых стоит придерживаться:

• Использовать квадратный значок сайта.
• Не использовать фавикон чужой компании или неприемлемого характера (например, свастика) — иначе поисковик будет отображать картинку по умолчанию – бесцветную планетку.
• Фавикон должен быть доступным для сканирования поисковыми роботами.

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

<link rel="icon" sizes="<ширина>X<высота>">

<link rel="icon" sizes="<ширина1>X<высота1>,<ширина2>X<высота2>">

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

Что такое фавикон и где он используется

Фавикон (favicon) — это в дословном переводе с англ. «значок для избранного» (FAVoritesICON). Именно так называются закладки в браузере Internet Explorer, где впервые стали использоваться визуальные иконки для быстрого поиска нужного сайта. 

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

Где же можно увидеть фавикон?

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

2. В истории просмотров браузера.

3. На панели закладок.

4. В избранном, куда вы сохраняете все интересные страницы.

5. В десктопной и мобильной выдаче Яндекса — как в органике, так и в рекламных объявлениях.

6. В мобильной и десктопной выдаче Google. Фавиконы на мобильных экранах появились еще весной 2019 года, а вот в десктопной выдаче — буквально в первые недели 2020 года.  

Где бы вы ни увидели фавиконки, они обращают на себя внимание, помогают запомнить бренд и отличить его от других, повышают узнаваемость компании и создают эффект полноценного бизнеса. Фавиконки любимых брендов вы ни с какими другими не перепутаете. . Как же создать собственный фавикон для сайта? Можно ли просто уменьшить существующее лого бренда и загрузить его на сайт? Какого размера фавикон лучше использовать? Давайте разбираться

Как же создать собственный фавикон для сайта? Можно ли просто уменьшить существующее лого бренда и загрузить его на сайт? Какого размера фавикон лучше использовать? Давайте разбираться.

Что такое Фавикон и зачем он нужен для сайта

По сути Favicon — это обычный значок (изображение небольшого размера 16 на 16 пикселей, иконка). Но для владельца сайта он может очень много значить. Однако, обо всем по порядку.

Само по себе название «фавикон» произошло от английского словосочетания FAVorites ICON, означающего — иконка для «Избранного» (так называются закладки в браузере Internet Explorer). Зачем она нужна? Очевидно, что так гораздо проще отыскивать взглядом нужную вам закладку, ибо легче искать знакомый значок, чем читать названия сайтов.

Раньше картинку Favicon вы могли видеть в адресной строке браузеров, перед URL-адресом открытой страницы (в моем IE9 так до сих пор и осталось), но после того, как все браузеры стали поддерживать вкладки, то данный значок мигрировал как раз на эти самые вкладки. Зато, когда их открыто очень много, именно фавиконы позволяют понять какая вкладка какому сайту соответствует:

Само собой, что и свое изначальное значение Favicon.ico не утратил, он по-прежнему используется в закладках всех браузеров для быстрого визуального поиска нужного сайта среди тысяч закладок (взгляните на верхнюю панель вашего обозревателя и убедитесь в этом).

А также, что немаловажно, поисковая система Яндекс отображает Favicon в своей выдаче (результатах поиска) для каждого ресурса, если у него этот значок будет иметься (был добавлен и правильно настроен владельцем сайта, а робот Яндекса успел уже его проиндексировать)

У Яндекса имеется специальный бот для индексации фавиконов под названием YandexFavicons (у них даже апдейты бывают, после которых и имеет смысл проверять наличие нового и обновленного Favicon.ico рядом с вашим сайтом в выдаче), в задачу которого входит сбор и обновление иконок для всех сайтов. Робот Яндекса, специализирующийся на их индексации, посещает сайты с периодичностью от нескольких дней до одного месяца (апы, соответственно, очень редкие получаются).

Поэтому не стоит ждать того, что недавно созданный в online generator или сделанный самостоятельно фавикон сразу же появится в поисковой выдаче Яндекса рядом с описанием вашего ресурса. Должно будет пройти какое-то время. Яндекс, после того как найдет Favicon.ico у вас на сервере, преобразует ее в формат PNG (из графического формата ICO) и с этого момента фавикон вашего сайта будет доступен по адресу:

http://favicon.yandex.net/favicon/ktonanovenkogo.ru

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

Если у вашего проекта Favicon еще не настроен, то самое время задуматься о его создании и установке, т.к. это позволит вам привлекать большее количество посетителей с страниц Яндекса (из поисковой выдачи), ибо рядом с адресом вашего проекта будет красоваться эта иконка, побуждая пользователей выбрать вас, а не соседа по выдаче).

В принципе, Favicon.ico нужного размера вы можете сделать и сами, так же у вас будет возможность создать его с помощью онлайн генераторов (из загруженных вами картинок) или же просто скачать целиком их online коллекцию или галерею.

В общем, выгода создания яркого и запоминающегося значка (мини-логотипа) для своего сайта очевидна (прежде всего это узнаваемость «бренда» и все хорошее, что из этого следует). Осталось только понять, как его создать и поставить на свой сайт, а также, что из себя должен представлять этот графический файл? На второй вопрос ответить проще — по определению Favicon должен быть сохранен в формате ICO, размещен в корне сайта (хотя, можно и другом месте), а его размер при этом должен составлять 16 на 16 .

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

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

Ну, а самый простой вариант — это скачать коллекцию Favicon-ок из какой-нибудь онлайн галереи или каталога. О том, где ими можно будет разжиться, читайте чуть ниже.

Установить favicon на WP с помощью плагина

Единственный вменяемый плагин это “Favicon by RealFaviconGenerator”, особенность заключается в том, что он проставляет фото для всех устройств:

• Mac
• Iphone
• Android
• IOS
• Surface

Устанавливаем стандартно и переходим к работе, в панели заходим Внешний вид > Favicon. В открывшемся окошке находим “Выберите из библиотеки мультимедиа”.

Выбор изображения для плагина

Откроется форма с выбором картинки, можете загрузить собственное или воспользоваться ранее сохраненными в WordPress. Не забудьте заранее оптимизировать фото под WP.

Библиотека медиафайлов

Далее нажимаем кнопку Генерировать.

Генерация

Перекинет на официальный ресурс realfavicongenerator, если изображение выбрано правильно то нажимаем синюю кнопку “Continue with this picture”.

Подтверждение и продолжение процесса

Смотрим, как будет отображение на разных устройствах и браузерах, если все нормально, то перелистываем страницу вниз и нажимаем Generate your favicon and HTML code.

отображение на разных устройствах

Ждем пока сервис обработает запрос и автоматически перебросит обратно в админку WordPress. Для надежности обновляем Ctrl+F5 и любуемся на установленный значок, который корректно отображается на всех устройствах.

Проверка работы плагина

Установка

1. При помощи плагина.
2. Через шаблон WordPress.
3. Вручную – ввод кода через редактор в админке.

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

Установка при помощи плагина

Начнем с самого простого и наиболее понятного метода — установка фавикона при помощи плагина. Главный плюс данного метода — с ним справится кто угодно, даже если он полный 0 в создании сайтов. Говорю по личному опыту.

Итак, для начала нужно скачать и установить плагин All in One Favicon. Вот ссылка на скачивание. Ну а если вы вдруг забыли, как это делается, то вот моя статья на эту тему.

Скачали? Установили? Отлично, просто переходите в настройки плагина и подгружайте понравившуюся картинку. На этом все, дело сделано. Остается только дождаться, когда она начнет отображаться. И не забудьте очистить кэш браузера!

Через шаблон WordPress

Если у вас такого нет, можно сделать немного по другому. Подгружаете изображение в корень сайта и в настройках внешнего вида в разделе дополнительные коды в «header» прописываете:

<link rel="shortcut icon" href="ссылка на ваш сайт/favicon.ico" type="image/x-icon">
<link rel="icon" href="ссылка на ваш сайт/favicon.ico" type="image/x-icon">

Если вдруг ничего не вышло, добавьте код вручную через «Редактор», как это описано чуть ниже.

Прописываем код

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

• Подгрузить изображение в корень сайта. Это можно сделать вручную или через FTP соединение.
• Перейти в раздел «Внешний вид» – «Редактор» и найти там файл header.php. В этом файле необходимо прописать следующий html код:

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png" />

Сделали? Отлично, все готово.

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

Процесс установки иконки favicon на сайт, как правило, начинается с её создания. Из-за того что требования к разрешению и формату иконки favicon на различных устройствах разные лучше её сначала подготовить в векторном формате svg (масштабируемой векторной графике). Это действие позволит, используя одно изображение (svg), получить в отличном качестве значок favicon как с разрешением 16×16 пикселей, так и с 512×512.

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

Подготовка изображения для favicon

Рассмотрим основные действия по подготовке изображения в формате svg для favicon.

Изображение, которое будет использоваться в качестве иконки favicon сайта, можно нарисовать, или получить через поиск картинок сервиса Google или Yandex. Поиск изображения (значка) желательно осуществлять в формате svg. Но если найти подходящей иконки в формате svg не удаётся, то можно выбрать и другой формат (например, png или jpg). А потом в программе Inkscape с помощью специального инструмента перевести её в векторную графику (векторизовать растр).

Например, рассмотрим, как с помощью программы Inkscape можно подготовить изображение (иконку двери) в формате svg для фавикон.

1. Используя сервис «Google Картинки» находим подходящие изображение двери и сохраняем его на компьютер.
2. Открываем программу Inkscape и создаём в ней новый файл.
3. Устанавливаем странице любой размер в пикселях с одинаковыми значениями по ширине и высоте (например, 260×260).
4. Импортируем найденное изображение двери. Если картинка имеет растровый формат (png, jpg), то дополнительно выполняем её преобразование в вектор (правая кнопка мыши на изображении -> Векторизовать растр).
5. Размещаем изображение по центру области содержимого страницы (высоту изображения устанавливаем равной 260 пикселей с сохранением пропорций изображения). В горизонтальном направлении (если ширина изображения меньше 260 пикселей) выравниваем её по центру.
6. Сохраняем файл (например, под именем ).

Примеры, подготовленных изображений (красная стрелка, лампочка, бабочка, часы, сердце и книга) для фавикон (для скачивания — в контекстном меню картинки выбрать пункт «Сохранить картинку как…»):

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

Генерацию иконки фавикон для всех платформ (iOS, Android, PC, MAC и др.) осуществим онлайн на сайте http://realfavicongenerator.net/.

Для этого необходимо нажать на кнопку «Select your Favicon picture» и выбрать в диалоговом окне подготовленное изображение (door.svg).

После этого необходимо настроить цвета фона и ввести название приложения для операционной системы Android (Chrome).

После этого выбираем опцию «I will place …», которая говорит о том, что полученные файлы фавикон необходимо положить в корень сайта. Это действие обеспечит её поддержку в большинстве браузеров.

Далее нажимаем на кнопку «Generate your Favicons and HTML code».

После этого действия сервис realfavicongenerator.net осуществит генерацию иконки favicon и HTML-кода. Результат данной операции будет выведен на экран.

Установка фавиконки на сайт

После выполнения подготовительных операций приступим к подключению favicon на сайт. Все основные действия по добавлению иконки на веб-сайт приведены на странице «Install your favicon».

Основные шаги:

1. Скачивание сгенерированного пакета (favicons.zip).
2. Распаковка его в корень сайта
3. Вставка HTML-кода представленного на странице в секцию head ваших страниц:

   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
   <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
   <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
   <link rel="manifest" href="/manifest.json">
   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
   <meta name="theme-color" content="#ffffff">

Например, на CMF MODX подключение favicon (HTML-кода) к страницам обычно осуществляется в чанке, с помощью которого выполняется формирование раздела head документа.

Favicon для Android

Когда речь касается мобильных устройств, встает важный вопрос разрешения экрана. Как известно, все современный смартфоны имеют параметр плотности пикселей на дюйм — PPI, а это значит иконка одного и того разрешения будет выглядеть по разному на экранах с различной плотностью. Поэтому браузеры под андроид используют целый ряд различных разрешений для иконки: 

• 36×36 – для экранов с коэффициентом плотности 0.75
• 48×48 – для экранов с коэффициентом плотности 1
• 72×72 – для экранов с коэффициентом плотности 1.5
• 96×96 – для экранов с коэффициентом плотности 2
• 144×144 – для экранов с коэффициентом плотности 3
• 192×192 – для экранов с коэффициентом плотности 4

Андроид воспринимает иконки в формате .png, а так же опирается на файл manifest.json который может содержать в себе ряд различных косметических параметров. В случае отсутствия возможных вариантов иконки под андроид, система опирается на иконки apple-touch-icon.

Способы создания «favicon» для веб-сайта

На сегодняшний день можно воспользоваться следующими способами создания:

• Использование готовых фавиконок в интернете. Благо, таких онлайн-хранилищ сейчас в достаточном количестве. Есть, как платные сервисы, так и с бесплатным скачиванием выбранной картинки. В некоторых нужна регистрация, в других такая необходимость отсутствует. Рассмотрим поиск и последующее сохранение картинки формата «.ico» на сервисе findicons.com.
  , вводим необходимую нам тематику или переходим сразу в пункт меню «Обзор».

  Остаётся найти необходимую и наиболее понравившуюся подборку, перейти в нее, найти необходимый формат и произвести сохранение.

  Остается готовое изображение разместить на сайте, но об этом поговорим позже.

• При помощи специальных онлайн-генераторов с возможностью их создания непосредственно там же. Одна из таких платформ —
  . Все очень просто. Рисуем или загружаем подготовленную иконку, при необходимости редактируем и затем сохраняем себе на компьютер. Возможен еще и импорт файла с внешнего интернет-ресурса, заказ (от 500 рублей) или просмотр уже подготовленных файлов, находящихся в разделе «Коллекция фавиконок»

Еще один способ, являющийся наиболее актуальным с точки зрения профессионализма и свободы действий – использование графических векторных программ типа «Photoshop». Как это делается? Находим необходим файлик на просторах интернет-пространства, сохраняем его на свой компьютер/ноутбук и открываем через вышеуказанную программу.

Возьмем к примеру колесо для сайта шиномонтажа.

Открываем. Сразу находим инструмент «Волшебная палочка» (специальный вид ластика) и стираем те белые места, в которых нам нет нужды, делая данные части прозрачными. Зачем? Во-первых, делаем картинку более презентабельной, во-вторых, уменьшаем общий вес изображения для быстрой загрузки.

Для того, чтобы удалить ненужные области и «подогнать» размер холста под очертания непосредственного изображения, необходимо зайти в раздел «Изображение» в верхнем меню, далее «Тримминг».

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

Заготовка есть. Теперь остается выполнить команду «Сохранить как» и выбрать формат «пнг».

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

Обзор онлайн-генераторов, где найти коллекцию фавиконов

Favicon generator — сервисы, где можно сотворить «мини-логотип» для сайта или преобразовать подходящую картинку в нужный формат.

Удобный сервис, в котором можно сделать эксклюзивную иконку — нарисовать ее с нуля попиксельно. Для этого переходим на сервис и в меню слева нажимаем кнопку «Create New Favicon».

В центральной части окна находится область, в которой каждый квадратик — это пиксель будущего фавикона. Следует закрасить эти квадратики в разные цвета. Чтобы это проделать, нужно обратиться к блоку «Color Picker», который расположен в правой части сервиса. Здесь необходимо выбрать из предоставленной палитры необходимый цвет и щелкнуть по определенной области, где находится пиксельная сетка. Чтобы удалить неправильную закраску, достаточно поставить галочку возле чекбокса «transparent» и щелкнуть по квадрату, после чего он станет прозрачным.

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

Если вы не Пабло Пикассо и нарисовать с нуля для вас равносильно прыжку из парашюта, загрузите на сервер для будущего фавикона картинку любого формата и размера, она будет, как болванка. Чтобы загрузить изображение на генератор, нажимается кнопка «Import Image» в левом меню.

На открывшейся странице нужно кликнуть кнопку «Выбрать файл», найти на компьютере подходящую картинку. При загрузке прямоугольной картинки можно отформатировать ее в квадрат (16х16). Для этих целей предусмотрена вкладка «Shrink to square icon». Учтите, в таком случае изображение будет искажено по одной из осей.

Чтобы соотношение сторон остались прежними, поставьте точку в чекбоксе «Keep dimensions».

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

Этот онлайн генератор еще и предоставляет коллекцию фавиконов, которые создавались другими пользователями этого сервиса ранее. Они выложены в общем доступе. Чтобы посмотреть галерею нужно в левом меню нажать кнопку «Latest Favicons» — экспонаты, отсортированные по дате или кнопку «Top Rated Favicons» — по рейтингу.

Чтобы скачать понравившийся экземпляр кликните левой кнопкой мыши по его названию и на открывшейся странице выберите «Download Favicon».

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

Для создания фавикона необходимо ввести название компании или сайта и нажать кнопку «Далее».

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

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

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

Последовательность действий следующая: выбираем файл и нажимаем кнопку «Create Favicon».

Сервис, предоставляющий возможность создавать фавикон с надписью. Цветовая гамма настраивается в области «Colors», а текст надписи вводится в полях «Top text» и «Bottom tex».

Для скачивания готового значка следует кликнуть по миниатюрной надписи «save as favicon file».

От остальных отличается тем, что позволяет созданную иконку не скачивать (но можно и скачать), а оставить непосредственно на сервисе и получить ссылку к этому файлу.

Для создания фавикона выбираем файл и нажимаем «Upload Now».

Также в сети можно найти и другие генераторы, которые позволяют создать фавиконы с нуля или же доработать уже имеющееся изображение. В частности FavIcon from Pics, DeGraeve, Generator, Онлайн редактор иконок favicon.ico, Online Favicon, Free Favicon Generator и Фавикон-генератор. Стоит отметить, что все они бесплатные.

Можно не растрачивать силы на эксклюзивность и найти уже готовые иконки в интернете. Для этого существуют специальные галереи с коллекциями бесплатных фавиконов. Хотелось бы выделить:

• Галерея иконок для сайта favicon.ico;
• Iconj;
• Favicon.cc;
• The Favicon Gallery.

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

Заключение

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

А о том, как восстановить удаленные фотографии в Одноклассниках, читайте в соответствующей статье.

https://youtube.com/watch?v=fokgeVxEU4Q

Читайте далее:

«Это видео недоступно» – что значит такое сообщение в Ютубе?

Восстановление удаленных фотографий в Одноклассниках

Удаляем видео в TikTok: а можно ли восстановить удаленное?

Удаляем видео с Ютуба: быстро и навсегда

Инструкция, как удалить видео с Ютуб канала