Favicon что это

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

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

Основные плюсы

Улучшает вид сайта в поисковой выдаче

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

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

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

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

Данная строчка ‹link rel=»icon» type=»image/png» href=»/шаблон/favicon.ico» /› вставляется в код сайта после тега ‹head› и указывает браузеру и поисковикам, откуда брать иконку.

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

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

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

Почему у моего сайта не отображается иконка в поиске?

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

Вывод

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

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

1ps.ru

Favicon (сокр. от англ. FAVorites ICON — «значок для избранного» , от названия папки с закладками в MSIE) — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. Традиционно использовались изображения размера 16×16 пикселей формата ICO, помещённые в корень сайта под именем favicon.ico, — тогда Microsoft Internet Explorer использовал их для закладок.

br /> Самые первые фавиконы применялись для закладок, по которым можно было считать посетителей, отправивших страничку на сайте в папку «Избранное» . Сейчас фавикон применяется более широко, например он отображается в поисковых системах.
Фавикон имеет смысл делать свой, а не выбирать в сети, что бы он соответствовал тематике сайта, его оформлению и т. д. Если для пользователя самостоятельное создание фавикона затруднительный процесс, то можно обратиться к профессионалу.
Если правильно подойти к созданию фавикона, то можно сразу увеличить посещаемость сайта и соответственно увеличить свою доходность. Необходимая деталь, вызывающая интерес при просмотре списка, выдавшегося поисковиком вот, что такое фавикон .
Чем интереснее, красочнее, индивидуальнее будет ваш фавикон, тем больше будет вероятность увеличения посетителей вашего сайта.

favicon.ico Generator

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

Можно загрузить произвольную картинку, которую движок сам сожмет до размера 16×16 пикселей, и корректировать ее. Или рисовать с нуля самому. Результат деятельности отображается в реальном времени в текущем окне браузера, что весьма удобно. Итоги работы сохраняются сразу в формате ico.
Favicon – это иконка, которая отображается в адресной строке браузера, в закладках браузера, в папках Windows, если ваша была страница была сохранена на жёсткий диск.

Такая иконка нужна для нескольких вещей:

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

Подробнее ЗДЕСЬ.

http://work.free-lady.ru/favikon-favicon-chto-eto-takoe/

otvet.mail.ru

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

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

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

Сделайте иконку простой и понятной для среднестатистического пользователя. Не стоит вставлять целые шедевры мировых художников! Фавикон должен быть простым и понятным – это аксиома.
Как уже говорилось выше, данный графический элемент должен отображать тематику сайта. Но если вы продаете бытовую технику, будет проблематично уместить в фавикон все ее многообразие или, наоборот, ограничиться одной лишь стиральной машиной. Подумайте ещё и найдите верное решение!
Favicon должен ассоциироваться с сайтом. Обратите внимание, на иконку, к примеру, Яндекса – большая красная буква «Я». Или Google– буква «g». Благодаря созданию определенного образа, ваш сайт станет более узнаваемым как онлайн, так и оффлайн.

Сервисы для генерации фавиконов и галереи

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

Готовые фавиконы для сайта

Галерея favicon’s от рекламного агентства ВЕБ АУДИТ. Данная сборка является одной из наиболее популярных в российском сегменте интернета. На сегодняшний день количество графических изображений в базе насчитывает более 15 тысяч.
IconJ – это не только один из самых больших каталогов фавиконов, но и их генератор. На сайте вы сможете подобрать изображение на любой вкус или же создать свое собственное. Каталог насчитывает более 18 тысяч иконок.
Самым простым и популярным сервисом не только в заграничном сегменте интернета, но и русском является Favicon.cc. Он содержит в себе большое количество функций и настроек, которые помогут сделать именно тот фавикон, который вы давно хотели. Все изменения происходят в режиме реального времени и отображаются в специальном окне предварительного просмотра.

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

seranking.ru

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

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

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

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

Фавикон может быть создан ещё в нескольких форматах, например, в формате GIF или JPEG, но проблемы с поддержкой делают их использование нецелесообразным.

HTML5 и атрибут sizes

Атрибут sizes пришел в нашу жизнь с HTML5. Благодаря ему браузер или устройство может выбрать необходимый размер фавикона. Атрибут sizes указывается в формате [ширина х высота] без указания единиц. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться до любого размера, например, если она хранится в векторном формате SVG.

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

Пора ли отправлять ICO на свалку?

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

Windows

Начнём, пожалуй, с Windows.

До 11 версии формат PNG в IE не поддерживался, поэтому для IE10 и более младших версий по-прежнему необходимо использовать формат ICO. А вот с IE11 смело можно переходить на PNG. Для устаревших браузеров Microsoft рекомендует размеры 16х16, 32х32 и 48х48 для фавиконов формата ICO.

Начиная с IE9, сайты получили возможность быть закрепленными в меню и панели задач, а с приходом IE11 и Windows 8.1 появилась возможность создавать закрепленные сайты в виде живых плиток. По умолчанию изображением на плитке будет фавикон, но только не для больших и широких плиток, для которых нужно задавать изображение специального размера. Сделать это можно следующими способами: добавив теги метаданных в разметку веб-страницы или файл конфигурации браузера.

Сначала давайте рассмотрим первый способ.

Определение фавикона в устройствах Windows с помощью метаданных в <head>:

<meta name="msapplication-TileImage" content="imagestileimage.jpg">

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

<meta name="msapplication-square70x70logo" content="images/smalltile.png"> <meta name="msapplication-square150x150logo" content="images/mediumtile.png"> <meta name="msapplication-wide310x150logo" content="images/widetile.png"> <meta name="msapplication-square310x310logo" content="images/largetile.png">

Можно указать цвет фона плитки:

<meta name="msapplication-TileColor" content="#009900">

Можно указать имя закрепленного сайта:

<meta name="application-name" content="Rick and Morty">

Если нет этих метаданных, то в качестве имени используется значение в <title&gt; страницы.

Можно указать текст дополнительной подсказки, появляющейся при наведении указателя мыши на ярлык закрепленного сайта в меню “Пуск” Windows или на рабочем столе:

<meta name="msapplication-tooltip" content="Title">

Можно даже определить адрес документа:

<meta name="msapplication-starturl" content="./">

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

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

Начиная с IE11 Windows 8.1 и Edge Windows 10 можно закрепить веб-сайт с помощью файла конфигурации браузера. Это удобно: создать один файл browserconfig.xml и поддерживать, и подключать его на каждой странице, если у нас есть несколько страниц, которые будут использовать одни и те же плитки.

Вызов файла в <head>:

<meta name="msapplication-config" content="browserconfig.xml">

browserconfig.xml

<?xml version=”1.0" encoding=”utf-8"?> <browserconfig>  <msapplication>  <tile>  <square70x70logo src="/img/favicons/mstile-70x70.png"/>  <square150x150logo src="/img/favicons/mstile-150x150.png"/>  <square310x310logo src="/img/favicons/mstile-310x310.png"/>  <wide310x150logo src="/img/favicons/mstile-310x150.png"/>  <TileColor>#000000</TileColor>  </tile>  <notification>  <polling-uri src="notifications/contoso1.xml"/>  <polling-uri2 src="notifications/contoso2.xml"/>  <polling-uri3 src="notifications/contoso3.xml"/>  <frequency>30</frequency>  <cycle>1</cycle>  </notification>  </msapplication> </browserconfig>

square70x70logo, square150x150logo, wide310x150logo, square310x310logo — элементы, внутри которых объявляются изображения для различных размеров плитки.

Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей. Желательно, чтобы размер исходного изображения примерно в 1.8 раза превышал размер целевой плитки, чтобы его можно было увеличивать и уменьшать. Например, для 70х70 рекомендуемый размер 128х128, а для широкой плитки 310×150 исходное изображение имеет размер 558×270.

Если плитка сайта статическая, то вышеперечисленных элементов будет достаточно. Если же предполагается динамическая плитка, то необходимо добавить элемент <notification>. Этот элемент может включать в себя до 5 элементов <polling-uri>, содержащих в атрибуте src пути к соответствующим xml-файлам уведомлений. Также внутри этого тега содержится элемент <frequency>, значение которого указывает в минутах интервал между обращениями к сайту за обновлением уведомлений, то есть живая плитка будет обновляться каждые, например, 30 минут. Да, значение не произвольное, а только 30, 60, 360, 720 или 1440.

Наконец, есть внутри тега <notification> еще элемент <cycle>, отвечающий за способ повторения уведомлений (может принимать значения от 0 до 7). Шаблоны доступны только для средних, широких и больших плиток.

Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.

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

<tile>  <visual lang="en-US" version="2">  <binding template="TileWide310x150ImageAndText01"  <image id="1" src="images/image1.png" alt="alt text"/>  <text id="1">Text Field 1</text>  </binding>  </visual> </tile>

То, что написано в кавычках в атрибуте template — название шаблона. Этот шаблон содержит изображение и небольшой текст. Используется для больших изображений и средних названий. На самом деле, подобных шаблонов очень много: и просто c текстом, и просто с изображением, и с несколькими изображениями, и с несколькими строками текста, и так далее. Большинство шаблонов изображения или текста размещают текст на той же плитке, что и изображение. Но шаблоны с Peek в названии выполняют переключение между изображением и текстом на плитке.

Подробнее о шаблонах можно узнать на официальном сайте.

Mac OS

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

Safari — вот где нам пригодится формат SVG. Чтобы использовать SVG, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.

<link rel="mask-icon" href="safari-pinned-tab.svg" color="#00а0ff">

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

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

iOS

Safari в iOS вообще не отображает favicon во вкладках, но использует их для закладок, так же как и в Mac OS. В iOS пользователи могут добавить сайт на рабочий стол, и оно будет выглядеть как нативное приложение. Эти ссылки отображаются в виде значков и называются Web Clips.

Для этого нужно добавить rel=«apple-touch-icon» и указать размер с помощью атрибута sizes. Каждое устройство нуждается в своем размере иконки. Так как iOS устройств довольно много, и каждое устройство имеет свое разрешение экрана, спецификация, разработанная Apple, поддерживает возможность указать несколько тегов с иконками разных размеров.

<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">

Если значок не соответствует рекомендуемому размеру устройства, используется самая близкая по размеру иконка большего размера, нежели рекомендуемый. Когда пользователь заходит на ваш сайт с iOS устройства, запрашиваются файл apple-touch-icon-precomposed.png, который должен быть оформлен в стиле iOS: закругленные углы, блики, и тень. Если файла с таким названием в корне проекта или rel=«apple-touch-icon-precomposed» нет, будет запрошен apple-touch-icon.png, которому разрешено быть таким, какой он есть, а все эффекты будут наложены самим iOS. Соответственно, нужна иконка под каждый размер. А вот если нет и этих файлов, то на рабочем столе iPhone или iPad будет отображаться не красивая иконка, а миниатюра страницы — ее скриншот.

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

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

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

Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch Icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну из этих иконок.

В iOS можно указать заголовок веб-приложения. По умолчанию используется значение тега <title>. Чтобы задать другой заголовок, добавьте метатег на веб-страницу:

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

Кстати, можно даже установить стиль строки состояния для веб-приложения:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Можно поменять её цвет, можно сделать полупрозрачной. Это тоже повлияет на вид нашего сайта.

Android

Устройства на Android отлично понимают формат PNG, а ещё поддерживают манифест веб-приложения manifest.json, в котором можно прописать все параметры того, как будет вести себя сайт, если его установить на домашний экран. Этот манифест пока, к сожалению, не читают устройства под IOS. А если Android не найдет этот файл, то он будет использовать apple-icon-touch.

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

{  "name": "Rick and Morty",  "short_name": "Rick",  "icons": [  {  "src": "/android-chrome-192x192.png",  "sizes": "192x192",  "type": "image/png"  },  {  "src": "/android-chrome-512x512.png",  "sizes": "512x512",  "type": "image/png"  } ],  "theme_color": "#b3adad",  "background_color": "#b3adad",  "display": "standalone" }

Ключ name определяет подпись в приложению на домашнем столе. Если этот параметр не указан, подпись будет взята из <title> в <head>;

Ключ short_name определяет укороченную подпись для приложения, если не хватает места для полного имени;

Ключ icons — определяет массив объектов иконок, может принимать три значения: sizes, src, type;

Ключ theme_color определяет цвет строки состояния. Начиная с 39 версии хрома для Android Lollipop появилась возможность менять цвет интерфейса браузера и цвет вкладки браузера.

Задать цвет можно и через <head>, добавив следующий мета-тег:

<meta name="theme-color" content="#9CC2CE">

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

Ключ display определяет режим отображения веб-приложения. Например, значение standalone, которое мы указали, позволило открывать нам сайт как приложение.

Вызов в <head>:

<link rel="manifest" href="manifest.json">

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

Автоматизация

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

Есть пакеты для сборки и для Gulp, и для Grunt.

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

habr.com

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

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

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

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

В чем создать favicon

Вы, конечно можете попытаться найти готовый файл favicon.ico на сайте www.iconfinder.com, но думаю многим хотелось бы сделать что-то свое. Ведь именно фавиконка будет выделять ваш сайт в поисковой выдаче. О том как это сделать вы сейчас знаете. Итак, приступим.

Существует масса программ и сервисов. Можно воспользоваться, например, с помощью инструмента Favicon Generator, можно легко преобразовать любой GIF, PNG или JPEG в ICO, который поддерживается всеми современными браузерами. Программа также позволяет создавать фавиконки «с нуля» с помощью удобного онлайн-редактора.

Создание фавиконки онлайн

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

Logaster — это онлайн-сервис для создания логотипов и элементов фирменного стиля. В нем вы в автоматизированном режиме, буквально в несколько кликов, получите иконку для сайта в формате ICO и PNG.

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

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

Как происходит процесс создания иконки в Логастер

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

Вот что у меня получилось

Теперь можно нажать на кнопочку «Скачать логотип». В бесплатной версии на нем будет водяная надпись Logaster.com

Логотип можно купить. После этого вы сможете скачать в выбранном формате (PNG, JPEG, PDF, SVG) и размере (1024 px, 5000 px).

Теперь переходим непосредственно к созданию фавиконки.

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

Вот какая получилась фавиконка. В принципе, выглядит неплохо.

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

Купите и активируйте фавиконку.
Скачайте ее.
Разархивируйте скачанный файл в корневую папку вашего сайта.
Вставьте следующий код на все страницы сайта в тег <head>:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="icon" href="/favicon.ico">

Дизайн-пакет со скидкой

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

Плагин для создания фавиконок

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

Создать фавиконку можно прямо в Фотошопе. Для этого понадобится плагин, который можно скачать по адресу www.telegraphics.com.au. Для его установки, скопируйте файл ICOFormat.8bi в директорию c:Program FilesAdobeAdobe Photoshop CS2Plug-InsFile Formats.

С помощью плагина ICOFormat.8bi, вы сможете сохранять картинки в виде «.ico-файлов».

Как установить плагин ICO (Windows Icon) Format

64-bit Windows (Vista/Windows 7):
- Restart before installing;
- Положить плагин в папку C:Program FilesAdobePhotoshopPlug-InsFile Formats, но у меня другая структура, у меня этот файл хранится здесь: C:Program FilesAdobeAdobe Photoshop CS6 (64 Bit)Plug-ins.
- If you are running on a 64-bit Windows system and are launching the 64-bit version of Photoshop CS4 or CS5, download the 64-bit version of the plugin and put it in the Plug-Ins folder corresponding to 64-bit Photoshop (i.e., the one in «Program Files» not «Program Files (x86)»).
Move the plugin into the «File Formats» folder inside your Photoshop Plugins folder:
- For Windows (32-bit), ICOFormat.8bi
- For Windows (64-bit), ICOFormat64.8bi
- For Mac OS X, ICOFormat.plugin (note that separate versions are provided for CS2, CS3/4 and CS5)
- For Mac OS X/Classic, icoformat
- For 68K MacOS, icoformat(68K)
If using Corel PSP Photo X2, put the plugin in C:Program FilesCorelCorel Paint Shop Pro Photo X2LanguagesENPlugIns
Quit and relaunch Photoshop, if it’s already running.

Есть еще онлайн-сервис www.convertico.com. ConvertICO это бесплатный онлайн-конвертер файлов ICO/PNG. Он работает быстро и прост в использовании. Он используется для преобразования значков рабочего стола, иконок приложений, а также фавиконок для веб-сайтов.

Как сделать favicon.ico самому

Открыть Фотошоп.
Создать документ 32×32 пикселей.
Вставить из Иллюстратора смарт-объект готового изображения.
С помощью команды «Сохранить как» сохранить фавиконку в формате .ICO*.
Полученную фавиконку загрузить в корень сайта и подключить через тему Вордпресс, либо руками прописать в шаблон сайта. О том как подключать favicon, я уже писал ранее.

* Если у вас не установлен специальный плагин ICO (Windows Icon) Format, можете скачать его с сайта www.telegraphics.com.au/sw/. Там есть для Маков, Винды 32, 64-разрядных с поддержкой всех версий Photoshop, включая CS6.

Отображение favicon

Чтобы ваш сайт отображал фавиконку, ее можно просто расположить в корне сайта. Браузер и поисковые системы сами определят, что у вас есть файл favicon.ico и будут ее отображать автоматически. Данный способ является самым простым и он действенен в 95% случаев. Но, можно и явно подключить фавиконку.

Как подключить favicon

Фавиконка подключается при помощи метатега <link> c указанием соответствующих атрибутов.

После создания favicon сохраните его в корневом каталоге вашего сайта. Затем включите следующий код в секции <head> документа HTML.

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

где:

Аттрибут rel означает, что это иконка для сайта; может содержать и «shortcut icon» (при этом Microsoft Internet Explorer будет реагировать на строку «shortcut icon», а браузеры, соответствующие стандартам — на слово «icon»)
href содержит абсолютный или относительный URL к файлу, где он размещен.
Форматом файла может быть png или gif, размером 16×16 или 32×32 и с 8-битной или 24-битной глубиной цвета.

В некоторых темах подключение происходит программно, с помощью php-кода:

/*  <link rel="icon" type="image/png" href="<?php //echo get_template_directory_uri(); ?>/img/favicon.ico" />  */

Как проверить корректность установки фавиконки

Перейдите по ссылке ниже и вместо www.fortress-design.com напишите адрес своего сайта

http://favicon.yandex.net/favicon/www.fortress-design.com

Возможные проблемы

Бывают проблемы с фавиконкой в Яндексе — Вебмастер ее почему-то не видит. На что поддержка отвечает таким письмом:

fortress-design.com

Что такое favicon?

Favicon (англ. Favorite Icon) — это небольшая иконка (изображение, картинка) в специальном формате, которая отображается в адресной строке браузера при просмотре сайта, вкладке браузера или в его закладках (“Избранном”).

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

Зачем нужен favicon для сайта?

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

Что лучше изобразить на фавикон?

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

Разместите полученный файл в корне вашего сайта, там где находится основной индексный файл(index.php). Для указания браузеру местонахождения иконки сайта(favicon) в секции заголовка страницы (head) вставьте следующую строку:

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

Как сделать анимированный favicon?

Формат ICO не поддерживает анимацию. Но современные браузеры позволяют использовать формат GIF для миниатюр. Возможно указать для современных браузеров один анимированный файл(favicon.gif), а для древних, типа Intertet Explorer, другой(favicon.ico). Для этого в секцию head внесите следующие две строчки:

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

Естественно предварительно нужно поместить оба файла в корневую папку сайта.

Здесь можно сделать анимированнй gif.

Как быть, если запрещен показ изображений в браузере?

Если сделать favicon c внедренным изображением в код старницы:

 <link rel="icon" type="image/gif" href="data:image/gif;base64,R0l...куча_символов...gCADs=" />

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

Как получить favicon с сайта

Не все вебмастера располагают favicon.ico в корне сайта. Для получения адреса favicon используйте следующий скрипт:

<? $url='http://htmlweb.ru'; $html=file_get_contents($url); if (preg_match('/<([^>]*)link([^>]*)(rel="icon"|rel="shortcut icon")([^>]*)>/iU', $html, $out)) {  $link_tag = $out[0];  if (preg_match('/href([s]*)=([s]*)"([^"]*)"/iU', $link_tag, $out))  {  $favicon = trim($out[3]);  if (strpos($favicon, '://')===false)  $favicon = $url. '/' . ltrim($favicon, '/');  } } ?>

Поисковые системы Google, Яндекс и favicon

Робот поисковых систем кешируют иконки сайтов. Закешированные иконки доступны по следующим запросам:

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

http://www.google.com/s2/favicons?domain=htmlweb.ru

Кроме этого, Яндекс может сделать Вам «спрайт» из иконок разных сайтов:

http://favicon.yandex.net/favicon/google.com/yandex.ru/htmlweb.ru

Иконки для iPhone и iPad

<!-- For iPhone 4 Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon- 114x114-precomposed.png" /> <!-- For iPad: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon- 72x72-precomposed.png" />

Даже если Вы не указываете link-ссылку на картинку iphone все равно будет искать в корневой папке сайта файл с именем apple-touch-icon.png и если найдет, то Возьмет из него картинку, закруглит по углам и на нее будет наложен блик автоматически самоим устройством. Для избежания этого вместо apple-touch-icon.png следует написать apple-touch-icon-precomposed.png владельцы айфонов и точей, т.к. для них мы делаем красивую иконюшку размером 57×57 (можно кстати и больше, но это стандартный размер иконки на ланч-скрине), подключая ее так:

<link rel="apple-touch-icon" href="apple-touch-icon.png"/>

Правильно опубликовать и объявить иконки для старых и новых Retina iPad:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

Как динамически менять favicon?

Если Вы попробуете поменять значение свойства тега через DOM, то Вы не пролучите желаемый результат. Чтобы динамически поменять иконку страницы, надо сперва удалить тег link со старой иконкой из заголовка страницы, а затем добавить его с новым содержимым. Делается это так:

// Ссылка на файл новой иконки  var icon='new_favicon.ico';  var head = document.getElementsByTagName('head')[0];   // Найти и удалить старую иконку из тега HEAD  var links = head.getElementsByTagName('link');  for (var i = 0; i < links.length; i++) {  var lnk = links[i];  if (lnk.rel=='shortcut icon') {  head.removeChild(lnk);  }  }   // Добавить новую иконку  var link = document.createElement('link');  link.setAttribute('href',icon);  link.setAttribute('type','image/x-icon');  link.setAttribute('rel','shortcut icon');  head.appendChild(link);

HTML5 и favicon

В HTML5 был добавлен атрибут sizes, позволяющий объявить несколько различных версии одной и той же иконки, и это могут быть PNG файлы:

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

Как объявить плитку для планшетов на Windows 8?

Объявление для Windows 8.0 выглядит как-то так:

<meta name="msapplication-TileColor" content="#2b5797"> <meta name="msapplication-TileImage" content="/mstile-144x144.png">

Windows 8.1 и IE 11 ожидают несколько версии изображения, объявленных в browserconfig.xml. Например:

Можно не объявлять, если имя файла не менять:

<meta name="msapplication-config" content="browserconfig.xml">

<?xml version="1.0" encoding="utf-8"?> <browserconfig>  <msapplication>  <tile>  <square70x70logo src="/mstile-70x70.png"/>  <square150x150logo src="/mstile-150x150.png"/>  <square310x310logo src="/mstile-310x310.png"/>  <wide310x150logo src="/mstile-310x150.png"/>  <TileColor>#2b5797</TileColor>  </tile>  </msapplication> </browserconfig>

htmlweb.ru

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

Итак, сначала разберемся что такое фавикон. Если Вы посмотрите на адресную строку Вашего браузера, то увидите примерно вот такую картину:

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

У большинства сайтов перед названием стоят фавиконы. Некоторые фавиконы несут смысловую нагрузку, связаны с тематикой сайта, как например, на сайте Mail.ru:

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

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

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

Продолжим. Само слово фавикон происходит от английского favicon, которое в свою очередь является сокращением двух слов – FAVorites ICON, что переводится как «иконка (значок) для избранного». Так она стала называться потому, что первоначально использовалась в Microsoft Internet Explorer в качестве картинки около закладки в «Избранном».

Такие картинки были одного формата 16×16 пикселей, формат таких картинок, как правило, — ico и располагаются они в одном месте – корне сайта.

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

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

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

Более-менее похоже на правду утверждение – «чтобы было как у всех», «чтобы было не хуже, чем у соседа» и все в таком роде. Ну, не знаю – не знаю, это дело каждого.

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

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

А что Вы думаете, для чего еще нужен фавикон? Напишите в комментариях, буду Вам признателен.

Другие статьи о фавиконах:

Как сделать из картинки фавиконку?

Где найти (скачать) фавикон?

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

Где найти (скачать) фавикон для сайта на бесплатном хостинге?

А еще Вы можете подписаться на рассылку и первым получать самые свежие статьи.

Удачи!

Автор: Сергей Ваулин

www.novichkoff.ru

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:

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

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

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

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

great-world.ru