Сделать ico favicon – Сделать favicon для сайта — онлайн генератор фавикона

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ресурсы с иконками:

  1. http://www.thefavicongallery.com/ — небольшая коллекция изображений разных тематик. Всего в коллекции около 300 иконок. Каждую будущую фавиконку можно просмотреть в увеличенном виде, а затем сохранить на свой компьютер
  2. http://www.iconj.com/ — содержит более 3 тысяч изображений для фавикон. Сервис позволяет сохранять изображения в разных графических форматах.
  3. http://www.favicon.cc/ — огромнейший банк favicons, количество которых на момент написания статьи 228 839 штук. Единственный минус, что на одной странице находится 20 иконок, и чтобы выбрать понравившуюся придется долго листать.
  4. http://www.favicon.by/ — не знаю количество, но очень много готовых иконок, при нажатии на понравившуюся, фавиконка сразу скачивается на компьютер.
  5. http://www.flaticon.com — ресурс с огромным количеством готовых иконок, на все случаи жизни, которых на момент написания статьи более 384 тыс. сгруппированных по 7 тыс. группам. Иконки можно скачать в разных форматах с необходимым разрешением.

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

Графические редакторы

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

Будущий фавикон для своего сайта я создавал в любимом всеми редакторе Adobe Photoshop. Сделал нужную мне картинку размером 800×800 пикселей, с последующей конвертацией в необходимый формат — 16×16 pix.

Картинки в поисковых системах

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

В поисковой строке в разделе Картинки

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

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

Иконки в Яндекс.Картинках

Онлайн сервисы создания Favicon

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

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

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

  1. http://www.favicon.cc/ — англоязычный сервис создания Favicon
  2. http://favicon.ru/ — русскоязычный аналог, есть один минус, при сохранении конечной картинки изначальный прозрачный фон получается черным, хотя может я не до конца разобрался с настройками.
  3. http://www.favicon.by/ — имеет два интерфейса, русский и английский. Очень мне понравился этот сервис, рекомендую и Вам.

Устанавливаем Favicon на сайт

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

Разберем наиболее популярные варианты установки favicon.

Плагин — простейшее решение

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

Для этого необходимо установить плагин Favicons и далее в настройках плагина можно выбрать один из трех вариантов установки фавикона:

  1. Использовать свой граватар (gravatar), для этого у Вас должен быть настроен глобально распознаваемый аватар. Как правило это фото владельца блога. Не рекомендую использовать данную опцию, после установки Вы сами поймете почему.
  2. Заранее подготовленный файл с изображением. Для этого необходимо указать внешний URL картинки.
  3. Готовые фавиконы зашитые в плагин по умолчанию, коих ровно 100.

Установка фавикона с помощью плагина

Встроенные возможности WordPress

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

Встроенная возможность в WordPress

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

Установка с помощью кода html

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

Первым шагом подготовленный файл иконки (16×16 pix) необходимо загрузить на сервер Вашего хостинга, в корневую папку Вашего сайта (папки www или public_html) . Сделать это можно из админки хостинга, либо как вариант воспользоваться службой FTP в Total Commander.

Далее в файл

index.html (если у Вас лендинг или подписная страница), или в файле header.php (если у Вас сайт на одной из популярной CMS) внутри тега <head> необходимо прописать следующий код:

link rel="icon" href="/favicon.ico" type="image/x-icon"
link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"

После этой процедуры Фавикон порадует своим появлением на вкладке браузера Вашего сайта. Если он не появится рекомендую очистить кэш браузера используя сочетание CTRL+R.

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


P.S. Рекомендую посетить страницу РЕКОМЕНДУЮ, где собраны качественные, а главное бесплатные курсы.

С Уважением Дмитрий Леонов | leonov-do.ru

Рекомендую прочитать похожие статьи:

Новости блога Получай обновления первым!



Согласен (-на) с политикой конфиденциальности и обработки персональных данных

leonov-do.ru

Как создать favicon.ico (фавикон) для сайта.

Здравствуйте, уважаемые читатели! Сегодняшняя статья посвящена созданию фавикона (favicon.ico) для вашего сайта. Из поста вы узнаете, что такое фавикон, каких размеров бывает эта иконка и почему ее обязательно нужно сделать и установить на свой блог. Кроме того, в статье будут приведены favicon генераторы, позволяющие за пару минут создать фавикон в режиме онлайн, а также сайты, на которых  можно скачать галереи и коллекции готовых фавиконок.

Для начала давайте разберемся, что такое Фавикон, зачем она нужна, может, вообще без нее можно обойтись?

1. Что такое иконка favicon и для чего она нужна

Понятие Favicon происходит из двух английских слов Favorites Icon, что можно перевести как иконка (маленькое изображение) для «избранного». «Избранное» – это название закладок в базовом браузере Internet Exprorer. Они выглядят, например, так в браузере Хром:

Для каждого ресурса существует маленькое изображение, что-то вроде мини-логотипа для сайта. Согласитесь, что сохранять в закладки удобнее не url-адреса сайтов, а их небольшие логотипы – фавиконы. Кстати, кроме этого favicon отображается в адресной строке браузера сразу перед URL открытой страницы сайта или в заголовке закладки:

Favicon – это файл небольшого размера (16×16 пикселов), имеющий расширение .ico (это расширение используется операционными системами для хранения иконок). Favicon.ico есть практически у каждого сайта, причем неважно, на каком он хостинге расположен или какой движок/тему использует. Онлайн генераторы и галереи favicon позволяют сделать иконку за пару минут из любого изображения, нарисовать ее с нуля или же скачать готовую, поэтому если вы еще не используете favicon на вашем блоге, то скорее исправляйте ситуацию.

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

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

  • Набрать адрес вашего сайта в окне поиска от Яндекса (например, http://great-world.ru) и посмотреть, есть ли рядом фавикон.
  • Перейти по ссылке http://favicon.yandex.net/favicon/great-world.ru (где вам нужно «great-world.ru» заменить на URL-адрес вашего сайта). Если иконка проиндексирована, то вы ее увидите.
  • Зайти в Яндекс.Вебмастер (http://webmaster.yandex.ru) и проверить наличие favicon.ico

2. Онлайн генераторы и галереи Favicon

Итак, мы уже разобрались, что представляет собой фавикона, так необходимая для сайта. Узнали, что она должна быть размером в пикселях – 16 на 16, а ее расширение должно быть .ico. Теперь есть несколько путей создания favicon.ico:

  1. Скачать  готовую иконку из галерей favicon.
  2. Сделать фавикон с нуля с помощью фотошопа или онлaйн генератора.
  3. Сделать favicon из готового изображения (размеры изображения неважны).

2.1 Коллекции и галереи Фавикон

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

  1. http://www.thefavicongallery.com/ — небольшая галерея, включающая в себя иконки самых разных тематик. Содержит около 300 изображений. Чтобы скачать понравившуюся картинку, нужно нажать на ней правой кнопкой мыши и выбрать «сохранить как», затем сохранить фавикон на компьютер.
  2. http://www.iconj.com/ — более 3 тысяч иконок на любой вкус и цвет. Есть возможность сохранить изображение в формате .gif или .ico. Можно взять даже html-код иконы. Имеются анимированные фавиконы. Единственный недостаток коллекции – на одной странице расположено лишь 30 иконок, поэтому придется просматривать много страничек, чтобы выбрать подходящее изображение.
  3. http://www.favicon.cc/ – огромная коллекция favicons, но на одной странице находится лишь 20 штук, листать придется долго.
  4. http://www.favicon.co.uk/ — тоже неплохая галерея, содержащая множество favicon. На каждой странице по 144 иконки, это делает просмотр очень удобным. Тематики фавиконок самые разные.
  5. http://favicon-generator.org/ — небольшая коллекция (84 штуки) мини-изображений для вашего сайта.

2.2 Как сделать Фавикон для сайта с нуля

Преимущество создания favicon с нуля заключается в том, что получившаяся иконка будет уникальна, а уникальность очень важна! Поэтому лучше не полениться и потратить 5-10 минут на создание собственной фавиконы.

2.2.1 Logaster.ru (рекомендую!)

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

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

2.2.2 Favicon.cc

Этот онлайн генератор, пожалуй, самый простой для создания фавикон с нуля. Пиксель за пикселем вы сможете с легкостью создавать, пока не закончите делать favicon и не закрасите все 256 пикселей. Для начала перейдите на сайт Favicon.cc. Вы увидите рабочее окно:

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

Каждый квадратик рабочей области представляет собой один пиксель. Вам нужно закрасить каждый квадрат так, чтобы получилась картинка – ваша будущая favicon.ico. Чтобы начать закрашивать, вам нужно поставить галочку рядом с пунктом pick existing color, находящуюся справа от рабочей области. Чуть выше находится палитра цветов, выбрав подходящий цвет, вы можете начинать закрашивать квадратики в рабочей области.

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

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

Чтобы скачать сделанный favicon, нажмите на ссылку Download Favicon (она выделена красным на скрине выше).

2.2.3. Amichurin.Appspot.com

Данный онлайн генератор фавикон полностью на русском, но его функционал значительно уступает вышеописанному ресурсу. Для создания favicon.ico нужно перейти по ссылке – http://amichurin.appspot.com/.

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

2.2.4 Favicon-Generator.org

Еще один неплохой online generator фавиконок. Попасть на него можно по данной ссылке — http://favicon-generator.org/.

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

2.3 Как сделать Favicon для сайта из уже имеющегося изображения

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

2.3.1 Favicon.ru

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

Добавить изображение можно двумя способами:

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

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

2.3.2 Favicon.cc

Этот онлайн generator мощнее предыдущего, но и сложнее его. Для начала перейдите по ссылке – favicon.cc, а затем нажмите «Import Image» (в левом окне).

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

  • Keep dimensions – оставить соотношения сторон картинки неизменными.
  • Shrink to square icon – привести стороны изображения к квадратному виду, при этом картинка может исказиться.

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

3. Как установить favicon на блог WordPress

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

ПЕРВЫЙ ШАГ. Сначала вам нужно будет найти в теме строчку html-кода, указывающую путь к фавиконе. Для блога на Вордпресс вам нужно найти файл header.php (Заголовок) и найти строчку, она должна выглядеть примерно так (она может немного отличаться в зависимости от темы):

<link rel="icon" type="image/x-icon" href="http://путь_к_фавикон/favicon.ico">

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

<link rel="icon" type="image/x-icon" href=" /favicon.ico">

Вам нужно заменить эту строчку на следующие две:

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

ВАЖНО! Эти строчки должны быть размещены внутри тегов <head> и </head>

ВТОРОЙ ШАГ. Теперь вам нужно добавить фавикон в корневую папку сайта. Зайдите на ваш хостинг и поместите в папку с вашим сайтом файл с именем favicon.ico (размером 16×16 пикселей).

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

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

great-world.ru

Создать фавикон онлайн | favicon.ico для сайта

31.08.2018 21:01

Определяем Яндекс ИКС!

Мы выпустили новый инструмент, функционал умеет массово определять новый, еще горяченький, показатель Яндекс ИКС, за раз можно узнать ИКС до 500 сайтов. https://be1.ru/yandex-iks/

14.12.2017 12:07

Обновления для Антиплагиата!

Функциональность инструмента Антиплагиат обновилась — исчезла строка «Исключить URL». Теперь эта функция работает автоматически при использовании вкладки «Проверить URL». Также, первая проверка инструмента осуществляется намного быстрее. Однако, если Вы нацелены проверить всё до деталей, нажимайте кнопку «Расширенная проверка».

24.11.2017 14:26

Black Friday! 40% скидка на рекламу!

Успейте заказать рекламу с максимальной скидкой! Оформить заявку можно на странице https://be1.ru/advertising/

15.11.2017 11:14

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

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

09.11.2017 12:07

Инструмент проверки позиций получил дополнительный функционал!

В связи с тем, что инструментом начало пользоваться много пользователей, мы решили сделать его лучше, удобнее, функциональнее. Добавили зарегистрированным пользователям возможность сохранять проект, чтобы быстро ежедневно проверять позиции в 2 клика. Также начали вести историю позиций запросов и разработали возможность разбить запросы по релевантным страницам. Enjoy =)

08.11.2017 09:45

Аудит сайта доступен каждому!

Be1 начал предоставлять свою первую услугу, благодаря которой можно получить чёткую инструкцию как продвинуть свой сайт на ТОП-овые позиции! Получите отчёт за 3 дня с готовыми решениями.

19.10.2017 16:01

Реклама на сайте Be1.ru

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

11.10.2017 16:18

Добавили историю позиций по запросам!

Теперь, когда Вы проверили позиции своего сайта, данные запоминаются и ведется история их изменений.

13.09.2017 16:15

Разработали составление конкурентного анализа

Это сводка, важных при продвижении, показателей, к которым необходимо стремиться, чтобы попасть в ТОП-1 выдачи Яндекс. Найти ее можно проанализировав сайт нажать в блоке о видимости на «отчёт».

27.07.2017 16:08

Разработали инструмент, который обнаруживает упущенную семантику!

Инструмент бесплатно покажет список упущенной семантики — ключевые запросы конкурентов, по которым они показываются в выдаче, а Вы нет.

be1.ru

Как сделать favicon ico (фавикон) для сайта за 5 минут в фотошопе?

Здравствуйте, уважаемые друзья! Сегодня я напишу о том, как сделать фавикон для сайта или блога. Причем, я рассмотрю 2 способа создания фавикона. Вы узнаете, как сделать favicon ico в фотошопе и при помощи онлайн сервиса ;-).

Перед тем, как перейти к прочтению этой статьи, я советую также ознакомиться с другими полезными постами, которые позволят улучшить ваш ресурс:  «Красивая страница 404 для сайта», «Как сказать спасибо за комментарий?», «Красивая подписка на комментарии в WordPress».

А теперь вернемся к теме поста. Если на сайте нет фавикона, то он теряет многое. Во-первых, фавикон способен увеличить посещаемость с Яндекса. Спросите как? Очень просто. Дело в том, что Яндекс рядом с заголовком Title показывает еще и фавикон сайта. И если заголовки и описания двоих ресурсов примерно одинаковые, но на одном будет фавикон, а на другом нет, то посетитель, скорее всего, перейдет на ресурс с фавиконом.

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

Как сделать favicon для сайта с нуля

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

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

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

Как сделать фавикон для сайта с готового изображения

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

Потом нужно обрезать изображения так, чтобы оно стало квадратным. Для этого я выбираю инструмент «Кадрирования» обвожу часть фото, которую я хочу оставить и нажимаю «Enter».

Потом нужно уменьшить изображения до 16 рх. Для этого выбираем на панели инструментов Изображения – Размер изображения.

Указываем ширину и высоту 16 рх и нажимаем «Ок».

Теперь нам нужно сохранить фавикон на компьютер. Для этого выбираем на панели инструментов Файл – Сохранить как. Указываем название изображения, формат iso и нажимаем «сохранить».

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

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

  • www.audit4web.ru/info/favicon
  • www.favicon.cc — уже знакомый сервис
  • www.iconj.com
  • www.favicon.co.uk/gallery.php
  • thefavicongallery.com
  • favicon-gallery.ru/gallery

Как сделать favicon для wordpress

После того, как вы сделали или скачали фавиконку, ее нужно как-то прикрутить до сайта. Я сейчас покажу, как это сделать на движке wordpress.

Сначала нужно закачать иконку на хостин по такому адресу: wp-content/themes/названия темы/images/

После этого зайдите в Панель управления – Внешний вид – Редактор, откройте файл header.php и пропишите там вод такой код, перед тегом «/head»:

<link rel="shortcut icon" href="http://vachevskiy.ru/wp-content/themes/BusinessBlog/images/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://vachevskiy.ru/wp-content/themes/BusinessBlog/images/favicon.ico" type="image/x-icon" />

В этом коде нужно изменить:

  • vachevskiy.ru – укажите свой домен;
  • BusinessBlog – укажите названия своей темы;
  • favicon.ico – укажите названия своей иконки, которую вы загрузили на хостинг.

Теперь сохраните изменения и смотрите, что у вас получилось:

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

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

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

Ну, а теперь все, что касается вопроса, как сделать favicon ico для сайта. Всем пока.

vachevskiy.ru

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

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

Наверняка, многие еще не знают о том, про какое “чудо” я говорю. Проще говоря, Favicon (фавикон) это картинка (иконка), которая стоит в браузере перед адресом сайта. Наглядно покажу Favicon моего блога:

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

План урока:

  1. Создание Favicon с нуля.
  2. Создание фавиконки из готового изображения.
  3. Сервисы с готовыми иконками для сайта.
  4. Прикрепление полученной иконки к сайту.

Как создать Favicon (фавикон) с нуля

Есть один очень удобный сервис. Он имеет адрес favicon.cc. Этот сервис по построению фавиконок выглядит так:

Чтобы нарисовать favicon достаточно выбрать цвет и просто рисовать. Если Вы нарисовали что-то, где-то не так, для удаления фрагмента рисунка выберите инструмент transparent (поставьте галочку) и “тыкайте” на пикселы (“квадратики”), которые нужно убрать:

Я нарисовал следующий фавиконку:

Больше всего в favicon.cc мне понравилось то, что можно мгновенно видеть результат своего труда в оригинальном размере. Для этого нужно немного спуститься вниз в раздел Previw:

Или же можно прямо в браузере (Opera, Firefox, Internet Explorer и т.п.) посмотреть итог работы:

Теперь нам нужно просто сохранить иконку сайта на свой компьютер. Для этого нужно нажать на кнопку “Download Favicon”:

Создание favicon (фавикон) из готового изображения

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

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

Список сервисов с готовыми favicon (фавикон)

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

  1. iconj – Огромная база фавиконок;
  2. favicon.cc – Да, в этом сервисе тоже есть уже готовые фавиконки.
  3. Favicon.co.uk – Можете глянуть и сюда, вдруг найдете что-то подходящее.
  4. audit4web – Большое количество иконок для сайта.

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

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

  1. Полученный favicon.ico скопировать в корень блога (т.е. в папку, где находятся папки wp-content, wp-admin и т.п.). В моем случае эта папка называется public_html:
  2. Далее открываете файл header.php (напомню, он находится в папке темы Вашего блога). И прописываете в этом файле следующий код (главное условие: код должен быть после тега <head> и до </head>):
    <link rel="shortcut icon" href="http://адрес_сайта/favicon.ico"; type="image/x-icon" />
    <link rel="icon" href="http://адрес_сайта/favicon.ico"; type="image/x-icon" />

    Естественно в 2 местах слова адрес_сайта меняете на адрес СВОЕГО блога.

  3. У меня получилось следующее:
  4. Теперь сохраняете файл header.php, обновляете на сервере и наблюдаете за результатом:

Как видите, все “встало” правильно. Надеюсь у Вас тоже проблем не возникло. Будут вопросы, пожалуйста, задавайте их в комментариях. А то мне на почту ссыпатся письма с вопросами технического характера, я не могу успевать отвечать на все.

P.s. Постоянные читатели, наверное, заметили, что я уроки WordPress стал давать немного реже. Возникла небольшая проблема со временем. До какого периода это продлиться? Честно, не знаю. Но минимум раз в неделю буду стараться писать уроки (по возможности – чаще). Поэтому лучше Вам, уважаемый читатель, для удобства подписаться на RSS блога Новичка.

P.s.s. Открыл новый раздел Ученики. Новички, которые создают блог с нуля, это отличная возможность “засветиться”!

_____________________________________________

Следующий урок: Урок 51 Регистрация в поисковиках.

Подпишитесь на бесплатные уроки

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

wpnew.ru

Создаем и устанавливаем красивый фавикон (favicon) для сайта

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

Favorite Icon (“значок для избранного”) — именно так расшифровывается favicon.ico. Он был придуман еще в прошлом веке. В марте 1999 года, браузер «Internet Explorer 5» стал первым поддерживать эти значки. По сравнению с 99 годом, интернет-технологии ушли далеко вперед, а иконка осталась и используется по сей день. Конечно, за 16 лет она претерпевала ряд усовершенствований, о некоторых из них мы сегодня поговорим. Также расскажу о том, как можно нарисовать собственную иконку или сгенерировать ее из графического файла. Не обойду вниманием и сайты, где можно выбрать и скачать красивый favicon для своего сайта.

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

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

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

Есть два основных способа создания иконки. Первый — ручная прорисовка favicon на специализированных онлайн-сервисах или при помощи графических редакторов типа Photoshop. Второй – работа уже с готовыми иконками или изображениями. Рассмотрим оба варианта, и пойдем по порядку…

Онлайн-сервисы для создания фавикон

Их принцип достаточно прост. Вам доступно поле для рисования, размером 16х16 квадратиков, каждый из которых символизирует пиксель. И самый простой набор инструментов в виде карандаша, ластика и т.д. Где вы, притворившись художником, начинаете рисовать свой favicon.

Как правило, эти сервисы позволяют не только рисовать, но и конвертировать графический файл в стандарт ICO. Таких сервисов существует несколько, вот только некоторые из них:

  1. Favicon.ru – русскоязычный сервис, скриншот из которого вы видите чуть выше. Позволяет как рисовать, так и конвертировать из других форматов в формат ICO.
  2. Favicon.cc – англоязычный сервис, с аналогичными возможностями, но поддерживающий создание анимированных иконок.
  3. Favicon.by – русскоязычный сервис (судя по домену белорусский). Функционал, также аналогичен предыдущим. Анимация не поддерживается, но есть возможность указав адрес сайта, «утащить» с него иконку для последующей переделки в редакторе.

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

Использование готовых иконок для сайта

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

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

  1. IconSearch.ru – русскоязычный сервис, с приличным набором иконок. Размеры иконок от 16х16 до 128х128 пикселей. Есть возможность сохранения иконки в форматы ICO и PNG.
  2. IconSeeker.com – аналогичный сервис, только англоязычный. Больших отличий нет, за исключением того, что попадаются иконки размера 256х256.
  3. IconFinder.com – это один из моих любимых поисковиков иконок. Там правда много платных иконок, но и среди бесплатных есть что выбрать. Помимо упомянутых уже ICO и PNG форматов, можно скачать в SVG, или даже в AI (векторная графика Adobe Illustration). Иконки размерностью до 512х512 пикселей.

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

Прозрачность и размер иконки

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

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

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

Так в мобильном Google Chrome, вместо иконки 16х16, можно увидеть цветной квадрат с первой буквой из названия сайта по середине. Другие браузеры могут растягивать маленькую иконку, что выглядит визуально не очень красиво. Доля мобильного трафика сегодня высока, и может достигать 20-25%. И с каждым годом только растет, поэтому, подумать о нем на будущее будет не лишним.

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

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

Если стандартной иконку и вас нет, и в админке она тоже не меняется, то необходимо прописать небольшие строчки в HTML код вашего сайта. Их нужно размещать между тегов <head> и </head>. У разных CMS структура шаблонов разная, поэтому, иногда приходится поискать в каком файле шаблона есть эти теги. У WordPress, например, этот файл называется «header.php», а у OpenCart – «header.tpl».

Если у вас иконка в формате ICO, то нужно вставить следующий код:

<link rel=»icon» href=»/favicon.ico» type=»image/x-icon»> <link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon»>

<link rel=»icon» href=»/favicon.ico» type=»image/x-icon»>

<link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon»>

Данная запись справедлива, если фавикон находится в корне сайта. Если он имеет иной путь, то перед «/favicon.ico», нужно записать путь к файлу. Например, такой: «http://мой-сайт.ru/моя-папка/favicon.ico».

Код для иконки в формате GIF:

<link rel=»icon» href=»/favicon.gif» type=»image/gif»> <link rel=»shortcut icon» href=»/favicon.gif» type=» image/gif»>

<link rel=»icon» href=»/favicon.gif» type=»image/gif»>

<link rel=»shortcut icon» href=»/favicon.gif» type=» image/gif»>

Код для иконки в формате PNG:

<link rel=»icon» href=»/favicon.png» type=»image/png»> <link rel=»shortcut icon» href=»/favicon.png» type=» image/png»>

<link rel=»icon» href=»/favicon.png» type=»image/png»>

<link rel=»shortcut icon» href=»/favicon.png» type=» image/png»>

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

sa1nikov.ru

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

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

Фавиконы самых популярных сайтов

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

Видеоверсия:
[iframe align=»center» mode=»normal» autoplay=»no» maxwidth=»1280″]


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

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

  • Является четким и понятным
  • Сделан в хорошем качестве
  • Передает смысл вашего сайта
  • Имеет общую стилистику с вашим сайтом
  • Выделяется на фоне значков других сайтов

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

Каких размеров бывают значки сайтов

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

  • 16*16px — стандартные размеры фавиконов, подходящие для большинства браузеров и устройств
  • 32*32px — используются в некоторых случаях в Internet Explorer и Safari
  • 57*57px — используются при отображении на iPhone
  • 72*72px — используются при отображении на iPad
  • 114*114px — используются при отображении на ретина дисплеях (57*2=114)
  • 144*144px — используются при отображении на ретина дисплеях iPad (72*2=144)

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

Раньше браузеры воспринимали фавиконы только в формате «ico». Сейчас они научились понимать и другие форматы, в том числе и «png». В нашем случае, мы убьем 2-х зайцев одним выстрелом. Вначале мы создадим фавикон в формате «png», а затем сконвертируем его в «ico».

Несколько способов создания фавиконов

На сегодня существует два основных способа создания фавиконов:

  1. Через специальные онлайн сервисы
  2. Создание самостоятельно через специальные программы типа Photoshop и Adobe Illustrator

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

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

Создаем фавикон

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

Подбираем изображение

Брать изображения Вы можете откуда угодно. Например, через тот же яндекс картинки. Главное условие — чтобы изображение было простое, без теней и объемов. Это связано с тем, что при ее уменьшении до размеров в 16 пикселей она не будет обладать большой детализацией. Из-за лишних объемов и теней картинка может смазаться.

Я нахожу подходящее изображение при помощи поиска google по запросу «колесо». Мне лишь остается ее сохранить кликнув правой кнопкой мыши и выбрав функцию «Сохранить картинку как».

Подходящее изображение в google images

Далее, мы открываем это изображение при помощи Photoshop. Очень важно, чтобы фавикон был с прозрачным фоном. В нашем случае это не так. Для удаления заднего фона мы используем инструмент «Волшебная палочка». Суть ее работы очень проста. С помощью этого инструмента мы можем выделять области на изображении одного и того же цвета. Так как фон нашего изображения четко контрастирует с самим колесом, сделать это будет очень легко. Кликнув один раз мы выделяем одноцветную область. Нажав сочетание клавиш CTRL+Delete мы удаляем эту область.

Удаляем фон нашего колеса

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

Колесо на прозрачном фоне

Создаем фавикон в 2-х разных размерах

Я предлагаю сделать 2 фавикона размерами 64px и 16px. Для начала нам нужно создать значок большего размера (64px). Для этого мы нажимаем сочетание клавиш CTRL+N. В появившемся окне мы выбираем высоту и ширину изображения в 64px.

Задаем размеры будущего фавикона

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

Переносим колесо в новое изображение

После перемещения колеса в новое изображение мы видим что они не подходят по размеру. Нам нужно уменьшит колесо до размеров в 64 px. Для этого мы зажимаем клавишу SHIFT и кликнув по диагональной точке изображения уменьшаем ее. Вот мы и создали первый фавикон для нашего сайта. Напоминаю что он у нас размером 64*64px. Теперь нам остается сохранить ее выбрав функцию «Сохранить для веб» во вкладке «Файл». Мы выбираем формат PNG-24 и папку images. Сам фавикон называем также, только латинскими буквами — «favicon».

Сохраняем фавикон

Отлично. Теперь нам остается создать фавикон меньшего размера. Для этого мы кликаем по вкладке «Изображение» и выбираем функцию «Размер изображения». Здесь мы задаем ширину и высоту в 16px.  Теперь нам остается сохранить данное изображение для веб. Ее мы можем назвать «favicon-2».

Итак, вот мы и создали 2 фавикона для нашего сайта в формате «png». Мы создали сначала вариант с размером в 64px для того, чтобы потом легко уменьшить ее до размеров в 16px. Если вначале создать вариант с 16px, то увеличить ее до 64px без потери качества не получится. Поэтому, имейте это ввиду чтобы не делать двойную работу.

Устанавливаем фавикон на сайт

Для установки фавикона на сайт внутри тега <head> мы прописываем:

<link rel="shortcut icon" href="images/favicon-2.png" type="image/png">

В случае, если у нас фавикон в формате «ico» то мы вместо «png» прописываем «ico». Например:

<link rel="shortcut icon" href="images/favicon-2.ico" type="image/ico">

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

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

Как видите, значок сайта отображается как мы и задумывали.

Конвертируем значок для сайта в формат «ico»

Современные браузеры без проблем могут распознавать и отображать фавиконы в формате «png». Однако, у Вас может возникнуть необходимость конвертировать ее в формат «ico». Одним из преимуществ данного формата является хранение фавиконов всех размеров в одном файле. Согласитесь, что это очень удобно. Итак, для конвертации наших значков мы воспользуемся классным сервисом — xiconeditor.com. Работать с ним очень просто. Все происходит 4 шага:
1. Для начала нам нужно загрузить наши фавиконы. Для этого мы кликаем по кнопке «Import».

Загрузка фавиконов в сервисе xiconeditor.com

2. Далее, мы выбираем загружаемые файлы кликнув по кнопке «Upload». Следующим шагом убираем галочки с ненужных размеров (32 и 24px) и нажимаем «Ok».

Выбор загружаемых файлов

3. При желании можно кликнуть на кнопку «Preview» и посмотреть как они будут отображаться.  Для скачивания наших фавиконов в формате «ico» мы кликаем по кнопке «Export».

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

  1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
  2. [popup_trigger tag=»span»]Подписывайтесь[/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с Вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

site4business.net

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *