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

Как сделать и установить фавикон для сайта (favicon)

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

Также рассмотрим бесплатные сервисы (онлайн генераторы) помогающие значительно упростить задачу и за несколько минут создать фавикон.

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

Это изображение называется Фавикон  (читаем Favicon).

Обратите внимание

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

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

Фавикон (favicon) что за атрибут?

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

Словоформа Favicon состоит из пары слов английского языка Favorites Icon (воспользуйтесь переводчиком). Почти для каждого интернет проекта есть свой мини-логотип, который отображается на закладке браузера. Размер файла иконки составляет 16×16 пикселей и имеет расширение ico (хранилище иконок для Windows).

Отображение фавикона на закладках браузера

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

Чем полезен Favicon для сайта?

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

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

Отображение фавикона в поисковой выдаче

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

Способы создания Фавикон для сайта

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

Готовые коллекции Фавикон

Если Вы не хотите заморачиваться с изготовлением изображения для иконки favicon, в помощь Вам готовые коллекции изображений.

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

Источник: https://leonov-do.ru/saitostroenie/favicon-dlya-sajta.html

Фавиконка — Вебмастер. Помощь

Атрибут rel указывает на тип ресурса:

  • icon — учитывается большинством браузеров;
  • shortcut icon — учитывается браузером Internet Explorer.

Тип передаваемых данных зависит от формата файла:

  • image/x-icon или image/vnd.microsoft.icon — для формата ICO;
  • image/gif — для формата GIF;
  • image/jpeg — для формата JPEG;
  • image/png — для формата PNG;
  • image/bmp — для формата BMP.

Пример:

Если в HTML-коде страницы фавиконка прописана несколько раз, робот выберет иконку на свое усмотрение.

Примечание. Для описания кириллического адреса фавиконки используйте Punycode.

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

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

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

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

    Во время проверки вашего сайта в разделе Диагностика Яндекс.

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

    1. Проверьте:

      • Загружается ли файл по прямой ссылке (ответ сервера 200 OK). Вы можете воспользоваться инструментом Проверка ответа сервера.
      • Не запрещен ли файл для индексирования, например в файле robots.txt с помощью директивы Disallow. Может быть запрещен не сам файл, а каталог, в котором он размещается.
    2. Внесите изменения, если это необходимо.
    3. Проверьте, посетил ли робот ваш сайт после размещения файла и внесения изменений. В логах сервера, на котором размещен сайт, найдите User-agent Mozilla/5.0 (compatible; YandexBot/3.0; +http://yandex.com/bots).

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

    Если фавиконки по-прежнему нет в результатах поиска, вероятно, робот не распознал ее. В этом случае:

    1. Измените формат файла. Например, если вы использовали формат ICO, измените его на любой из поддерживаемых: GIF, JPEG, PNG, BMP.
    2. Проверьте размер фавиконки. Он должен быть 16 × 16, 32 × 32 или 120 × 120 пикселей.
    3. Обновите файл на сайте и дождитесь посещения робота.

    Редактирование фавиконкиИзмените файл и разместите его на сайте.Удаление фавиконкиУдалите файл с сайта.

    Изменения вступят в силу в течение двух недель после очередного посещения сайта роботом.

    Была ли статья полезна?

    Предыдущая

    Сниппет

    Следующая

    Навигационные цепочки

    Источник: https://yandex.ru/support/webmaster/search-results/favicon.xml

    Фавикон: что это такое, как создать favicon и установить на сайт

    Фавикон — обычное изображение, значок (в переводе с англ. — «иконка для избранного»), отображаемое в начале адресной строки перед названием URL, в сниппете в результатах поиска Яндекса, а также в закладках.

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

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

    Фавикон под микроскопом

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

    Со слов Яндекса, размер фавикона должен составлять 16х16, 32х32 или 120х120 пикселей. К слову, чаще всего применяется изображения размера 16х16 пикселей. Рекомендованный формат ICO. К допустимым форматам относятся: GIF, JPEG, PNG и BMP.

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

    Важно

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

    В указанной поисковой системе есть специальный бот индексации фавиконов YandexFavicons, который собирает и обновляет иконки для всех ресурсов. Стоит обратить внимание, что индексация осуществляется периодически (несколько дней, месяц). Т. е. новоиспеченный фавикон может появиться в поисковой выдаче Yandex возле описания вашего проекта не сразу, а спустя некоторое время.

    Когда поисковик найдет Favicon.ico на вашем сервере, он изменит его графический формат ICO в PNG, после чего ваш фавикон можно будет найти по следующему адресу:

    https://favicon.yandex.net/favicon/stimylrosta.com.ua

    При проверке не забудьте подставить поле последнего слеша URL-адрес своего блога.

    Создание фавикона — важный этап в продвижении проекта. К преимуществам использования фавиконов можно отнести:

    • узнаваемость бренда;
    • доверие посетителей;
    • повторные посещения;
    • экономия времени пользователей.

    Основная выгода с этого — узнаваемость бренда.

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

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

    Осталось разобраться, как создать и как создать и установить фавикон на сайт?

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

    Из определения он должен быть размещен в корне сайта (возможно и другое местонахождение) и сохранен в одном из вышеуказанных форматов в размере 16х16 пикселей.

    Его можно создать в Photoshop, минус — графический редактор Фотошоп не может сохранять изображения в предпочтительном формате (ІСО).

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

    Вариант для ленивых — скачать готовый favicon из онлайн-каталога или галереи.

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

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

    Faviсon.cc

    Удобный сервис, в котором можно сделать эксклюзивную иконку — нарисовать ее с нуля попиксельно. Для этого переходим на сервис и в меню слева нажимаем кнопку «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».

    Logaster.ru

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

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

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

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

    FaviconGenerator

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

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

    На заключительном этапе остается только кликнуть по ссылке «Download the generated favicon» и на ваш ПК будет скачан архив полный разноразмерных фавиконов.

    AntiFavicon

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

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

    Iconj

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

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

    Спустя секунду изображение можно будет скачать на компьютер по ссылке «Click here to download your Favicon.ico File». Здесь же можно скопировать HTML код, который затем нужно разместить в файле главной страницы сайта. Помимо этого сервис генерирует ссылку на фавикон, которую можно расположить на страницах сайта.

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

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

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

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

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

    Есть некоторые отличия между установкой фавикона на сайт Joomla и WordPress.

    В первом случае достаточно просто закинуть файл в папку с активным шаблоном. Для этих целей используйте бесплатный FTP-клиент FileZilla или консольный файловый менеджер FAR Manager.

    Более простой способ: зайти в панель управления веб-хостингом (ISPmanager, cPanel, ISPConfig), открыть каталог, затем папку templates

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

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

    Обратите внимание

    Если это не так, вам, как и в случае с Джумла, нужно будет загрузить файл с изображением в активный шаблон (/wp-content/themes/ваша_тема). Затем следует отыскать среди прочих файлов файл header.php и сразу же после открывающего тега вставить следующий код:

    Источник: https://stimylrosta.com.ua/voprosy-i-otvety/185-favikon-chto-eto-takoe-i-kak-ego-sdelat

    Как создать фавикон и в чем его польза для продвижения

    Честно, я очень люблю фавикон. Я питаю к нему сколь глубокую, столь же и целомудренную платоническую любовь. Это не значит, что я рассказываю знакомым вебмастерам байки о том, как я сменил фавикон и трафик вырос на 10% (хотя постойте… может такое и было), но значит, что когда фавикон моего нового сайта появляется в индексе Яндекса, то сам сайт начинает казаться мне чуть более СДЛьным.

    Читайте также:  Как раскрутить telegram-канал: 8 реальных способов + мой кейс

    Что такое фавикон?

    Фавикон (Favicon – сокращение от «favorite icon») — это изображение, которое отображается в адресной строке браузера перед адресом, во вкладке, соответствующей окну с открытой страницей сайта, а также при добавлении ресурса во вкладки с избранным. Эти изображения могут помочь пользователю лучше запомнить бренд или компанию, повысят узнаваемость сайта. Часто в качестве фавикона используют уменьшенное или немного переделанное в соответствии с форматом изображение логотипа компании или бренда.

    Преимущества использования фавикона

    Использование favicon приносит пользу со временем. Вот например зацените такие варианты:

    • Когда пользователь открывает много вкладок в браузере, он может сразу определить, на какой из них находится сайт, даже если текст с названием уже не отображается;
    • В выдаче Яндекса фавикон отображается слева от сайта или его страницы, что привлекает внимание посетителей и отличает его от других;
    • Картинка хорошо запоминается и остается в памяти – в результате сайт становится более узнаваемым и привлекательным для пользователей.

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

    Особенности работы Яндекса с фавиконками

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

    Раньше апдейты фавиконок происходили раз в пару месяцев. Сейчас, в 2018, Яндекс индексирует их гораздо бодрее и на некоторых моих новых сайтах favicon появляется уже через несколько дней.

    Чтобы проверить, отображает ли Яндекс favicon, можно найти свой портал в списке выдачи и посмотреть, видна ли иконка слева от него.

    Также можно вписать в адресную строку следующую конструкцию: для Яндекса — http://favicon.yandex.net/favicon/www.site.ru (где вместо www.site.ru нужно напечатать домен своего сайта).

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

    Если фавикон не виден, это может быть связано со следующими причинами:

    • Размер изображения не соответствует требуемому: 16х16 пикселей;
    • Формат изображения не тот – должен быть ico, jpeg или png (первый вариант – более предпочтительный для Яндекса);
    • Картинка размытая или не уникальная – иногда по этим причинам поисковик блокирует иконки;
    • У Яндекса происходит обновление системы – тогда спустя какое-то время все должно исправиться само;
    • Сайт находится далее сотой позиции в выдаче – в этом случае фавикон тоже может не отображаться.

    Проверив картинку по этим критериям, нужно исправить недостатки. Если и после этого не отображается иконка, можно обратиться в поддержку Яндекса.

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

    Происходит это обычно через 2-4 недели после публикации сайта с изменениями.

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

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

    Если вы хотите создать из большого изображения в формате, например, png, ico-файл, то вам не помешало бы поставить Adobe Photoshop для начала. Затем устанавливается плагин ICO для Фотошопа (поищите в поисковике плагин для вашей версии ФШ). Когда он установлен, мы копируем нужный файл ICOFormat.8bi (для 32-бит) или ICOFormat64.8bi (для 64-бит) по одному из следующих путей:

    Если папки «Plug-ins» или «File Formats» нет, то ее необходимо создать. Теперь при диалоге сохранения можно выбрать ico формат. Размеры создаваемых значков могут быть кратны 8 (16×16, 24×24, 32×32 и так далее, но надежнее всего выбрать именно 16×16).

    Затем изображение, которое должно стать фавиконом, открывается в Фотошопе. Жмется “Image – Image Size” и размер изображения меняется на 16х16 пикселей. Затем жмется “File – Save as” и выбирается формат ICO (название файла нужно сделать favicon.ico).

    Важно

    Сам я в последнее время перевожу изображения в ico формат без фотошопа. С помощью сервиса https://realfavicongenerator.net/.

    Далее файл загружается в корневую папку сайта. После этого через «Внешний вид – редактор» админки WordPress в файле header.php прописываются следующие строки:

    Через некоторое время фавикон появится на сайте.

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

    Яндекс пугает фавиконных очкошников

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

    Сервисы

    Для создания иконок также существуют специальные программы и ресурсы, среди которых популярностью пользуются:

    • favicon.cc – простейший редактор позволит создать несложное изображение, принцип работы немного напоминает Paint. Также выбираются цвета, и выполняется рисунок нажатием на пиксельные квадраты, которые нужно закрасить. Есть инструмент для исправления. Созданную картинку здесь же можно сохранить на компьютер в качестве готового изображения favicon. В процессе работы внизу экрана можно наблюдать предварительный результат в том виде, в каком он будет отображаться в браузере. Ресурс также предлагает большой выбор готовых иконок;
    • favicon.ru – здесь лучше создавать фавиконы из уже готовых изображений. Картинка загружается с компьютера, обрабатывается системой и преобразуется в файл favicon.ico, который затем можно скачать;
    • iconj и audit4web – базы, в которых можно найти готовые фавиконы.

    Есть и такой сервис:

    Можно обратиться за разработкой изображения и к дизайнеру, но это обойдется существенно дороже.

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

    Источник: http://znet.ru/raskrutka/favikon/

    Как создать favicon (иконку) для сайта с помощью онлайн генераторов, установить фавикон, галереи иконок

    Добрый день, всем читателя блога LoleknBolek.com. Сегодня поговорим о фавиконе сайта, как его создать с помощью онлайн генераторов, где скачать галерею и как установить favicon на свой сайт WordPress. Иконки сайта — это очень актуальная вещь, так как она улучшает зрительное восприятие и первое впечатление о Вашем сайте.

    К содержанию ↑

     Что такое фавикон сайта?

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

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

    Помимо этого, иконка — это как логотип компании, только это логотип Вашего сайта. Не секрет, что все люди запоминают зрительно и ассоциациями. Так вот, если создать уникальный и интересный favicon, то люди больше будут запоминать Ваш сайт и соответственно больше ставить ссылок на него и чаще заходить.

    У Яндекса даже есть свой бот, который выкачивает фавиконы. Апдейты происходят не часто, но где-то раз в месяц бывают (что такое апдейты читайте здесь). Создать его можно в Фотошопе, правда есть небольшие трудности. Photoshop не может сохранять фото с расширением .ico. Для того, что б он научился это делать, нужно ставить специальный плагин.

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

    К содержанию ↑

     Как создать фавикон для сайта?

    Для создания фавикона для Вашего сайта есть 3 способа:

    1. Создать с помощью Photoshop (как я писал выше, для сохранения в расширение .ico нужно установить плагин)
    2. Использовать онлайн генераторы
    3. Скачать галерею или коллекция и выбрать для себя подходящий

    Онлайн генераторы favicon

    Favicon.ru — очень удобный сервис. Тут Вы можете закачать любую картинку со своего компьютера и подредактировать ее, можно заказать разработку иконки у дизайнеров, а можно нарисовать самому.   Как по мне, то самый лучший вариант — загрузить красивое фото и отредактировать ее в этом сервисе. Быстро, просто и красиво. Внизу есть просмотр того, что Вы нарисовали (или закачали). И большая кнопка «Скачать» с помощью который, Вы сможете сохранить иконку на свой компьютер. Favicon.cc — тут тоже можно загрузить фото и его редактировать онлайн. Соответственно можно и с нуля нарисовать собственный. Очень удобный онлайн генераторов фавиконов. Так же есть возможность предпросмотра Вашего творения

    Источник: https://loleknbolek.com/kak-sozdat-favicon-dlya-sajta/

    Установка Favicon на сайт

    Вы здесь: Главная — HTML — HTML Основы — Установка Favicon на сайт

    Favicon — это небольшая картинка размером 16×16 (или 32×32) пикселя, которая находится в браузере слева от адресной строки. Почему-то не так много людей добавляют favicon на свои сайты. На мой взгляд, они многое теряют.

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

    В общем, в этой статье мы установим favicon на сайт.

    Для начала как найти favicon. Во-первых, Вы можете создать самостоятельно. Очень хороший сервис favicon.cc. На нём Вы прямо в онлайне создадите себе favicon.

    Также Вы можете воспользоваться уже готовыми коллекциями и выбрать себе подходящий. Самый простой способ — это воспользоваться поиском и запросом: «коллекция favicon«.

    Совет

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

    Теперь второй шаг — установка favicon на сайт. Для этого добавьте внутри тега следующую строку:

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

    После обновления страницы, Вы увидите Ваш favicon рядом с адресом Вашего сайта.

    Иногда favicon появляется не сразу. Как правило, виновато кэширование браузера. Поэтому если картинка отсутствует, то попробуйте очистить кэш браузера (в настройках это должно быть). Также может помочь перезапуск браузера. Но ещё раз говорю: если Вы всё сделали правильно, то favicon на Вашем сайте появится.

    Вот и всё, что хотелось рассказать об установке favicon на сайт.

    Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

    Предыдущая статья Следующая статья

    Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

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

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    1. Кнопка:

      Она выглядит вот так:<\p>

    2. Текстовая ссылка:

      Она выглядит вот так: Как создать свой сайт

    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    Источник: https://MyRusakov.ru/ustanovka-favicon.html

    Как установить фавикон на сайт? Как создать фавикон :

    Веб-ресурс — это идея, а его «узнаваемый символ» — это уникальная точка в интернет-пространстве. Традиция придавать особый смысл обозначению идеи, а не конкретной реализации функционала, логики и дизайна веб-ресурса берет начало из давних доинтернетовских времен.

    Узнаваемые символы интернет-пространства

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

    Часто идея понималась как символ (логотип) компании-разработчика или автора, но с течением времени каждый результат интеллектуального труда получал свою иконку — символическое обозначение, которое сопровождало программное изделие всю его «жизнь».

    Обратите внимание

    Считается, что история фавиконов для сайта начинается с Microsoft и с папки избранного (FAVorites ICON) в браузере Internet Explorer 5. Между тем время появления иконок и микрокартинок для тех или иных целей — это далеко не 1999 год, и трудно увязать возникновение файла favicon.ico исключительно с появлением IE.

    Разработчики и авторы программ исторически символизировали свои изделия, делали отличия по версиям и областям применения. Учитывая заслуги Microsoft, можно сказать: фавикон для сайта (favicon.ico) стал привычным и естественным символом современного веб-ресурса, наследуя логику и традиции оформления микрокартинок, кнопок, элементов меню и других объектов из области программирования.

    Как установить favicon.ico

    Файл favicon.ico размещается в корне веб-ресурса и используется браузерами автоматически. Достаточно скопировать файл в формате .png, .gif или любом другом общепринятом в файл favicon.ico и поместить его в корень сайта на хостинге.

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

    Писать на странице код для указания, где находится фавикон для сайта, не обязательно, но допускается. Можно также размещать иконки в любой внутренней папке веб-ресурса.

    Использование явного указания на то, как установить фавикон на сайт в HTML-коде, делается в секции head. Это будет ограничением, поскольку потребует явного указания и жесткой синтаксической конструкции. Применяя общее правило: скопировать файл в правильном формате в корень сайта, можно избежать лишних ограничений.

    Изготовление и поиск фавиконов

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

    При самостоятельном изготовлении иконки следует учесть важный аспект: сегодня favicon.ico — это не только маленькая и узнаваемая картинка для закладок в избранном или пометок в поисковой выдаче. Это картинка гораздо большего размера, чем привычные 16 × 16 или 32 × 32 пикселя.

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

    • символ веб-ресурса;
    • фон веб-ресурса;
    • иконка (фавикон, пиктограммка для смартфона, планшета и т. д.).

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

    Правильный и неправильный фавикон

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

    Вариант a проигрывает варианту b. С этой точки зрения задача, как установить фавикон, значительно отличается от формального копирования файла favicon.ico в корень сайта.

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

    Веб-ресурс — это всегда идея

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

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

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

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

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

    Визитка идеи веб-ресурса и его функционал

    Сайт — это не всегда шедевр. Чаще всего это реализация конкретного функционала для его посетителей. Автор (владелец) сайта предоставляет своим клиентам конкретную продукцию, услуги, информацию или иные возможности.

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

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

    Важно

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

    Узнаваемость и оригинальность — важные требования к пиктограммке сайта.

    Как установить фавикон за одну минуту

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

    Когда стоит задача создать веб-ресурс в конкретном стиле или для конкретного общепринятого применения, установка фавикона за одну минуту имеет смысл и является однозначным решением.

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

    Фавикон — это установка автора (владельца) веб-ресурса на формирование в сознании посетителей конкретного мнения о сайте, о его ориентации и функциональности.

    Источник: https://www.syl.ru/article/423549/kak-ustanovit-favikon-na-sayt-kak-sozdat-favikon

    Фавикон: сделай свой сайт узнаваемым

    Блог Ярослава Перелыгина

    yaroslaff.su

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

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

    Фавиконы можно сравнить с иконками на рабочем столе компьютера.

    Совет

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

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

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

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

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

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

    То есть если вы сменили значок у своего сайта, к примеру, сегодня, не значит, что уже завтра яндекс будет его отображать, нужно подождать. При помощи данной ссылки http://favicon.yandex.

    net/favicon/wp можно проверить каким видит фавикон вашего сайта яндекс на данный момент, не забываем менять адрес сайта на свой.

    Как сделать фавикон

    Фавикон представляет из себя небольшое изображение размером 16 на 16 пикселей формата ICO, но большинство современных браузеров, кроме Internet Explorer, поддерживают также фавиконы PNG и GIF форматов.

    Как сделать фавикон (favicon)? В принципе, его можно нарисовать во многих графических редакторах, к примеру, в фотошопе, беда только в том, что изначально он не умеет сохранять изображения в формате ICO. Лично я вам рекомендую воспользоваться онлайн генераторами.

    Их существует достаточно много. В качестве примера можно привести буржуйский www.favicon.cc и русскоязычный favicon.ru. Особых отличий между ними нет.

    Обратите внимание

    Пользоваться генераторами проще, чем калькулятором, но все же я продемонстрирую вам работу одного из них, чтобы меня не посчитали ленивым. 🙂 И так, заходим на www.favicon.cc и видим следующее:

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

    Можете нарисовать солнышко, как это сделал я, но только покрасивее, моих талантов на это не хватило. Кстати, хочу заметить, что фавикон, который вы еще только создаете, в режиме онлайн отображается внизу под надписью «Favicon in original size» и во вкладке браузера, что очень удобно.

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

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

    Если собственных умений и фантазии, как в моем случае, не хватает, кликните по пункту меню «Import Image» и загрузите изображение с компьютера, можете даже свою фотографию. Сразу хочу заметить, что лучше всего, если изображение будет содержать какой-либо один объект крупным планом.

    То есть если вы берете свою фотографию, то акцент должен быть сделан именно на вас, а не изображено 10 человек и вы третий справа. Пикселей-то очень мало, всего 256 (16 на 16), имейте это в виду. Хотя, наверное, неплохо будет смотреться и какой-нибудь пейзаж, где использовано не очень много цветов.

    В общем, на месте разберетесь, это не так трудно. Также сервис дополнительно позаботился о нас и предлагает нам скачать последние созданные и самые рейтинговые фавиконы. Для этого используем пункты меню «Latest Favicons» и «Top Rated Favicons», выбираем понравившийся и качаем или же редактируем его под свой вкус.

    После того как фавикон будет полностью готов, кликаем по «Download Favicon» (подчеркнуто красным цветом) и скачиваем его на свой компьютер. Вот, собственно, и все. Трудно? Думаю, нет. Также многие сайты предлагают для скачивания уже готовые фавиконы. Вот www.iconj.com один из них.

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

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

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

    Естественно указываем свой путь, у всех он разный. Вот, в принципе, и все. А вы думали будет сложнее? Нет. Сегодня мы с вами узнали о том, как сделать и установить фавикон на сайт. Теперь у вашего интернет-ресурса будет свой собственный значок, при помощи которого пользователям будет легче его узнать и найти среди других. Делайте свои сайты узнаваемыми, друзья!

    Источник: http://yaroslaff.su/chto-takoe-favikon-kak-ustanovit-favikon-na-sajt/

    Как сделать фавикон для сайта бесплатно?

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

    Что такое фавикон и зачем он нужен?

    Фавикон – это иконка или значок сайта, который выводится в адресной строке браузера, в заголовке браузера рядом с Title, в закладках, в результатах поиска и ряде других мест. Впервые фавикон стал поддерживаться браузером Internet Explorer в 1999 году. В переводе favicon означает favotite icon, т.е. иконка для избранного.

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

    На скриншоте ниже фавиконы указаны стрелочками:

    Стандартный размер фавикона – 16х16 пикселей для обычного дисплея и 32х32 пикселя для устройств с ретина-дисплеем.

    Важно

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

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

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

    Однако браузеры способы выводить в качестве иконки сайта и файлы другого формата: .jpg, .gis, .png. Однако я рекомендую использовать формат .ico.

    Каким должен быть фавикон?

    При создании значка для сайта необходимо соблюдать следующие рекомендации:

    1. Фавикон должен быть в стиле сайта.
    2. Передавать тематику сайта. Например, если вы торгуете шинами, на фавиконе можно изобразить колесо. Если продаете книги, то сделать иконку, похожую на книгу. Для поисковой системы в качестве фавиконки подойдет лупа.
    3. Фавикон должен привлекать внимание.
    4. Оптимально сделать простой для восприятия значок. Учитывая стандартный размер иконки, изобразить какой-то сложный предмет не получиться.
    5. Значок должен запоминаться.

    Как сделать фавикон для сайта? Обзор онлайн-сервисов

    Создать файл .ico можно при помощи специальных сервисов, которые мы разберем ниже. Если вы хотите поручить работу профессионалам, то найти недорогих дизайнеров для создания favotite icon можно на биржах фриланса, а также в магазине фриланс-услуг Kwork.ru. На последнем сайте можно заказать логотип для сайта с фавиконом в комплекте всего за 500 рублей.

    Если вы хотите сделать фавикон своими руками, то вот несколько полезных онлайн-сервисов:

    1. Favicon.cc

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

    Под редактором находится поле с превью, которое позволяет посмотреть, как выглядит нарисованная фавиконка. Нажав на ссылку «Download favicon», вы скачаете готовую иконку в формате .

    ico (ссылка выделена красной стрелкой).

    2. Создание Favicon на сайте Cy-pr.com

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

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

    3. Xiconeditor.com

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

    4. Favicon.ru

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

    Совет

    5. Findicons.com

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

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

    Проще всего добавить файл в формате favicon.ico в корневую папку сайта. Например, фавикон данного блога находится по адресу http://adblogger.ru/favicon.ico

    Там его найдет большинство браузеров и поисковых систем. Добавлять какие-либо команды в код страниц при этом не потребуется. Волшебство произойдет автоматически

    FAQ по добавлению и замене фавиконок

    1. Как поменять фавикон?

    Замените файл favicon.ico в корневой папке сайта на новый вариант. Фавикон на сайте изменится автоматически на новый. В поисковых системах изменения произойдут после индексации новой иконки.

    2. Как проверить фавикон сайта в Яндексе?

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

    Источник: https://webmaster-seo.ru/seo/kak-sdelat-favikon-dlya-sayta-besplatno/

    Favicon — что это такое, как создать фавикон и установить на свой сайт, онлайн-генераторы иконок

    Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Разговор в сегодняшней статье пойдет о так называемых иконках Favicon.ico. Мы разберемся, что такое фавикон, почему в обязательном порядке его нужно устанавливать на своем сайте и как самому создать иконку нужного размера.

    Чуть ранее я уже писал про то, где можно взять иконки для сайта и упомянутые там сервисы (в той статье) можно использовать для поиска подходящих вариантов Favicon.

    ico, но есть и специальные онлайн-генераторы (favicon generator), как отечественные, так и зарубежные, а также специализированные коллекции и галереи с подходящими по размеру фавиконами.

    Ну, и естественно мы поговорим о том, как настроить и подключить их к своему сайту.

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

    По сути 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-адреса моего блога написать свой.

    https://www.youtube.com/watch?v=1-oy00_nSmA

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

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

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

    Важно

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

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

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

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

    Как создать Favicon онлайн и где можно скачать их коллекцию

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

    1. Faviсon.cc — довольно-таки удобный онлайн-генератор фавиконов. Используя его вы можете, например, создать свою иконку с нуля (полный эксклюзив), нарисовав ее попиксельно. Для этого вам нужно будет нажать в левой части окна сервиса на кнопку «Create New Favcon».

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

      Для закрашивания одного квадратика цветом нужно поставить галочку в правой части окна сервиса в поле «Color Picker», выбрать на расположенной там же палитре нужный цвет и щелкнуть по нужному квадратику.

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

      Для перемещения пикселя по холсту генератора вам нужно будет поставить галочку в поле «move». Результат своих трудов в реальном масштабе вы сможете наблюдать в области «Preview» под холстом.

      Если созданный вами Фавикон вам подходит, то нажмите на кнопку «Download» для его сохранения к себе на компьютер.

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

      Теперь вы знаете как сделать мини-логотип для своего сайта с нуля.

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

      Совет

      Картинка может быть абсолютно любого размера и формата. Для загрузки файла значка на онлайн сервис вам нужно будет нажать в левой части окна сервиса на кнопку «Import Image».

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

      Это актуально, если загружаемое вами изображение не квадратное. В этом случае возможны два варианта: оставить соотношение сторон неизменным (Keep dimensions), либо преобразовать картинку к квадратному виду (Shrink to square icon).

      Во втором случае изображение будущей фавиконки будет искажено по одной из осей.

      Для загрузки в online generator и преобразования вашей картинки нужно будет нажать на кнопку «Upload». Созданная из него Favicon.ico будет доступна к редактированию точно так же, как и нарисованная вами. Когда закончите колдовать над шедевром, то нажмите на кнопку «Download» для того, чтобы скачать его к себе на компьютер.

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

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

    2. Favicon.

      ru — когда-то этот сервис был значительно проще описанного выше онлайн генератора, но последнее время он стал практически его аналогом, но только на русском языке. Favicon.

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

      Этот вариант online favicon generator примечателен, пожалуй, только тем, что он отечественный.

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

    3. Logaster.ru — это онлайн генератор логотипов, но помимо логотипов он еще создает и фавикон. В отличии от всех других сервисов, вам не нужно рисовать дизайн фавикона или конвертировать ее с логотипа. Для того, чтобы создать фавикон, сначала необходимо ввести название сайта или компании и выбрать вид деятельности. Сервис предложит готовые к использованию несколько десятков шаблонов фавикона. Более подробно, как создать фавикон, можно прочитать здесь. После создания Favicon.ico, вы можете скачать файл к себе на компьютер в формате ICO или PNG.

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

    Подборка онлайн генераторов, коллекции и галереи фавиконов

    Если вам по каким-либо причинам не понравились описанные выше favicon generator, то могу предложить попытать счастье на одном из следующих бесплатных онлайн-сервисов:

    1. FaviconGenerator — позволяет преобразовать в нужный формат фавикона любое загруженное с вашего компьютера изображение (загружать можно картинки в формате PNG, JPEG, JPG, GIF).
    2. AntiFavicon — достаточно интересный Favicon Generator. На нем вы можете создать фавикон с надписью. Текст надписи вам нужно будет ввести в поля «Top text» и «Bottom tex», а цветовую гамму — настроить в области «Colors».
    3. FavIcon from Pics — еще один простой онлайн сервис — указываете путь до картинки на своем компьютере, преобразуете и скачиваете результирующий файл в формате ICO и GIF.
    4. Iconj — примечательно то, то созданную иконку вы можете либо скачать, либо оставить на сервисе и получить на этот файл ссылку
    5. DeGraeve — достаточно мощный Favicon Generator, по функционалу похож на рассмотренный ранее Faviсon.cc. Здесь тоже можно сделать все либо с нуля, либо загрузить изображение, которое в последствии можно подкорректировать и скачать уже в формате ICO подходящего размера.
    6. Generator — позволяет как генерировать фавикон из загруженного изображения, так и создать ее с нуля в специальном редакторе.
    7. Онлайн редактор иконок favicon.ico — ну, как бы, все при нем — и создание фавиконов с нуля, и доработка уже имеющегося изображения.
    8. Online Favicon — очень функциональный инструмент для создания и редактирования мини-логотипов
    9. Free Favicon Generator — на случай, если ничего из выше предложенного списка вас не устроит.
    10. Фавикон-генератор — простенько и со вкусом…

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

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

    Если у вас нет желания или возможности (вы не художник и ни когда им не были), то проще всего будет попробовать поискать в галереях с коллекциями бесплатных фавиконов:

    1. Галерея иконок для сайта favicon.ico — более чем 15000 мини-логотипов для вашего сайта на любой вкус и цвет
    2. Iconj — достаточно большая коллекция значков, разработанных другими людьми и выложенных в общий доступ
    3. Favicon.cc — 55 тысяч различных вариантов на все случаи жизни. Имеются также анимированные фавиконы, которые правда будут видны только в браузере FireFox
    4. The Favicon Gallery — еще чутка подходящих по размеру иконочек

    Если вы знаете еще какие-то подобные ресурсы, то я добавлю ваши ссылки в этот список.

    Как установить Favicon на сайт и прописать путь до него

    Ваш браузер и поисковый робот Яндекса будут искать фавикон прежде всего в корневой папке вашего сайта.

    Поэтому можно просто подключиться к сайту по FTP и загрузить в его корневую директорию (обычно это папки public_htm или htdocs) ваш файлик Favicon.ico (лучше его название писать с маленькой буквы).

    Откройте теперь ваш ресурс в каком-нибудь браузере и посмотрите, не поменялась ли пиктограмма на вкладке. Поменялась? Нет? Ну, ничего страшного.

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

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

    Если дело не в кэше браузера, то это значит, что для вашего сайта задано другое место для favicon, отличное от корневой папки. Как это проверить?

    Источник: https://KtoNaNovenkogo.ru/seo/favicon-favikon-sozdanie-ikonki-favicon-ico-i-razmeshhenie-ee-na-svoem-sajte.html

    Ссылка на основную публикацию