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

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

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

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

Что такое фавикон и зачем он вообще нужен? Фавикон по англ. пишется как Favicon и переводится дословно — «Любимая иконка», но в Викопедии приводиться другой перевод — «Значок для избранного».  Фавикон можно сравнить с логотипом, уменьшенным в несколько раз и имеющим расширение .icon.

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

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

Фавиконы бывают в виде обычной или анимированной картинки, а еще в  виде зD изображения, на это уже добиваются средствами Фотошоп.

Фавиконы в виде обычной картинки

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

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

Правило №1.

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

Правило №2.

Картинка должна быть квадратной и весом не более 150 kB.

После не долгих поисков я нашел вроде бы подходящую картинку с изображением воздушного шара соответствующую вышеперечисленным правилам:

Теперь мне надо ее преобразователь в формат .icon  и уменьшить до размеров 32х32 пикселя.

Для преобразования картинок в фавиконы существуют специальные серверы и я воспользуюсь одним из них — tools.dynamicdrive.com.

Достаточно выбрать изображение и загрузить его на сервер, затем выбрать формат и нажать кнопочку — «Greate Icon»:

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

Если на картинке размером 32х32 еще можно разобрать силуэт воздушного шара, то на изображении форматом 16х16  уже плохо понятно, то ли это какае-то луковица или перевернутая груша 🙂

Из этого следует. что существует еще одно требование к картинке для фавикона.

Правило №3..

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

Поэтому я немного опустился на землю и нашел другое изображение. Давайте попробуем его:

Отлично, посмотрим, что получается после обработки:

Ну вот, совсем другое дело. Скачиваем фавикон на свой компьютер нажимая — «Download FavIcon».

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

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

Анимированные фавиконы просто супер!  К сожалению не все браузеры поддерживают анимацию в адресной строке и в закладках, но тем не менее они безусловно привлекают внимания пользователя и тем самым способствуют хотя бы не больному увеличению трафика. Для создания анимированных фавиконов есть хороший онлайн сервис favicon.cc. Сервис буржуйский, но страницу можно перевести на русский посредством функций браузера и получится вполне читабельно:

На левую панель вообще не обращаем внимания, в принципе сервис уже готов к работе и осталось выбрать цвет или цвета будущего рисунка. Я для примера нарисую кастрюлю 🙂 С помощью зажатой левой клавиши мышки водим по квадратикам и они закрашиваются в нужный цвет, а если надо стереть лишнее, то нажимаем по квадратику правой кнопкой мыши. Я покажу Вам в качестве примера простенькую анимацию, состоящую всего из 2 изображений. Первое изображение:

После того, как рисунок готов нажимаем — «Использование анимации»  и выпадет панель со следующими функциями:

Выбираем — «Добавление новых кадров» и уже на чистом поле рисуем вторую часть анимации:

Чуть ниже можно посмотреть на результат и скачать готовый файл:

Как выглядит мой «шедевр»? 🙂

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

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

Наверное у Вас в Фотошоп отсутствует формат . icon, но это не беда, сейчас мы это дело поправим. Скачиваем архив плагина ICOFormat для Adobe Photoshop и распаковываем его в папку —  C:\Program Files\Adobe\Adobe Photoshop\Plug-ins\File Formats. Запускаем фотошоп, загружаем любое изображение и пробуем его сохранить в формате .icon

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

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

Установка фавикона минутное дело и описывать даже особо нечего. Значит, у нас уже есть файл размером 32х32 пикселя и на надо всего лишь закачать его в корень сайта с помощью FTP клиента, туда где находятся папки wp-admin, wp-content и wp-includes. Кстати совсем не обязательно помещать файл в корень блога, можно закинуть его и в другое место, но тогда надо правильно указать путь к нему в файле header.php.

Если мы все же поместили файл с фавиконом в корень сайта, то в файле header.php перед закрывающим тегом </head> надо прописать следующее:

<link href="http://Ваш сайт/название картинки.ico" rel="shortcut icon" />
<link href="http://Ваш сайт/название картинки.ico" rel="icon" type="image/x-icon" />							

Вот в принципе и все, фавикон на сайт установлен!

Сервисы готовых фавиконов

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

iconj.com — большой выбор фавиконов.

audit4web.ru — тут тоже много иконок.

Чтобы узнать больше, подпишитесь на обновления блога.

До встречи!

С уважением, Виталий Кириллов

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

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

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

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

1. Зачем нужна фавикон для сайта?

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

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

Итак, favicon – это маленькое изображение размером 16×16 px, с расширением .ico (расширение иконок). Т.к. иконка приобрела широкую популярность, она имеется практически у каждого сайта, а это еще один повод, чтобы создать фавикон для сайта онлайн. При этом не важно, что за хостинг вы используете, на каком движке работает ваш блог – в любом случае вы сможете создать в режиме online, а затем установить favicon или же скачать готовый фавикон для сайта. Благодаря современным генераторам иконок, их создание не занимает много времени – одна-две минуты, и все готов.

У вас все еще нет фавиконки? Исправляйтесь скорее!

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

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

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

• Наберите ваш сайт в окне поиска Яндекс, и вы увидите, есть ли рядом с ним favicon.
• Наберите в браузере ссылку http://favicon.yandex.net/favicon/site.ru, где замените site.ru на адрес вашего сайта. Если фава проиндексирована, вы сможете ее увидеть.
• Зайдите в панель Яндекс.Вебмастер, там тоже отражается фавикона.

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

2. Online генераторы и коллекции favicon

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

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

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

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

1. http://www.thefavicongallery.com/ — хоть и небольшая коллекция, но полезная. Здесь вы найдете иконки на самые разные тематики. Всего их около 300 штук. Для того, чтобы скачать понравившуюся favicon ico для сайта, нажмите на нее правой кнопкой мыши и сохраните на свой компьютер.
2. http://www.iconj.com/favicon-gallery-page1.html — еще одна коллекция favicon для сайта, которая содержит более 3 тысяч мини-картинок. Сохранить понравившуюся можно в двух форматах (ico или gif). Но есть и недостаток: вы можете просматривать за раз только 30 иконок, чтобы увидеть следующие, нужно перейти на новую страницу.
3. http://www.favicon.cc/?action=icon_list&order_by_rating=1 – благодаря этой галереи, вам не придется самому онлайн создавать фавикон. Просто выберите и скачайте понравишуюся картинку. Опять же, за раз можно просматривать 20 фавикон, что замедляет процесс выбора.
4. http://www.favicon.co.uk/gallery.php — этот сайт позволяет не только делать фавикон для сайта, но и скачивать готовые варианты. За раз вы можете проглядывать по 144 иконки, что намного удобнее, чем в двух предыдущих вариантов. Фавы на самые разные темы.
5. http://favicon-generator.org/gallery/ — хоть и маленькая, но полезная коллекция из 84 штук фавиконок. Выбирайте любую!

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

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

2.2.1 Logaster.ru

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

Скачать файлы фавикона можно в форматах ICO или PNG.
Более подробно, как создать фавикон с помощью Логастер можно прочитать здесь

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

2.2.2 Favicon.cc – генератор фавиконок

Этот незамысловатый генератор – один из самых простых и популярных, используемых для online создания favicon для сайта. Вы сможете нарисовать каждый пиксель будущей фавы (всего их 256). Перейдя на сайт, вам станет доступно рабочее окно, в котором вы можете экспериментировать.

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

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

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

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

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

2.2.3. Генератор Amichurin.Appspot.com

Еще один Generator красивых favicon, в котором в режиме online можно создать красивую картинку. Весь генератор на русском, но его функционал будет попроще, чем в предыдущем случае.  Кстати, подписи, сделанные бардовым цветом, – не мои.

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

2.2.4 Генератор Favicon-Generator.org

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

2.3 Favicon из готового изображения

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

Заранее подготовьте картинку, которую вы хотите взять как основу.

2.3.1 Сервис Favicon.ru

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

Добавить картинку или фотку (основу) вы можете так:

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

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

2.3.2 Сервис Favicon.cc

Похожий генератор, но с более мощным функционалом. Чтобы создать фаву из готовой картинки, сначала перейдите во вкладку «Import Image».

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

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

Загрузив файл, вы сможете отредактировать его в режиме online c помощью данного генератора favicon. Когда получившийся результат вас будет устраивать, скачивайте фаву на свой компьютер.

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

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

Как правило, фавикона расположена в корне сайта (в корневой папке) – на это мы и будем ориентироваться. Если ваша фава лежит не в корне, просто перенесите ее туда.

Добавляется favicon.ico в два шага.

ШАГ ПЕРВЫЙ

Первым делом вам нужно найти в вашей теме ту строчку кода, которая отвечает за вывод фавикона. Откройте для редактирования файл Заголовок (header.php) и найдите такую (или похожую) строчку:

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

<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">

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

Если вообще нет ничего похожего и содержащего слово favicon.ico, тогда просто добавьте эти две строчки куда-нибудь между тегами  <head> и </head>.

ШАГ ВТОРОЙ

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

В конце привожу видеоурок о том, как создать фавикон для сайта:

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

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

blog-craft.ru

Фавикон для сайта | ИТ Шеф

Статья, в которой рассмотрим, как сделать правильный favicon для сайта.

Фавикон (favicon) – это значок, который связан с определённым веб-сайтом или веб-страницей. Наличие фавиконки у сайта позволяет, как правило, сделать его более узнаваемым. Это связано с тем, что данный веб-сайт (каждая его страница) будет иметь значок, посмотрев на который пользователь будет знать, что это за ресурс. Иконку favicon сайта можно увидеть в различных элементах браузера, таких как вкладка, адресная строка, история посещений (журнал), панель закладок и др. Кроме этого иконку фавикон можно также обнаружить в результатах поиска Яндекс рядом с названием сайта. Ещё иконка favicon используется при размещении ссылки (на страницу сайта) на главном экране операционных систем iOS (Safari), Android (Chrome), Windows 8 и 10.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проверка favicon у сайта

Проверка favicon сайта осуществляется с помощью ссылки, представленной в 4 пункте (check your favicon). Данное действие также можно осуществить через главное меню Favicon -> Favicon checker.

Чтобы приступить к валидации favicon сайта выбираем в представленной форме протокол сайта (http:// или https://), вводим доменное имя и нажимаем на кнопку «Check Favicon».

После этого убеждаемся, что favicon сайта прошёл проверку на сервисе realfavicongenerator.net и корректно отображается на всех платформах.

Индексация фавикон сайта поисковыми системами

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

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

• Яндекс — https://favicon.yandex.net/favicon/имя_домена
• Google — https://www.google.com/s2/favicons?domain=имя_домена

Вместо имя_домена необходимо указать имя домена (например, itchief.ru).

Примечание: использование в качестве favicon анимированных изображений (gif) поддерживаются только некоторыми браузерами (Firefox). В других браузерах в качестве favicon будет использоваться статичное изображение.

itchief.ru

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

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

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

Кстати, у Вас есть мобильная версия сайта? Как нет?! Быстрее читайте мою подробнейшую статью — Адаптивная верстка!

Что такое favicon?

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

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

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

Какие преимущества дает наличие фавикона?

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

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

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

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

Скачать фавикон можно также на сайте www.favicon.cc. Перейдите по ссылке на сайт. Пролистайте предложенный ТОП фавиконов. Картинка может быть как анимированной, так и обычной. Если нашли что то по душе, скачайте к себе на компьютер. После чего перенесите картинку в корень своего сайта.

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

В принципе, вы можете задействовать любую картинку, уменьшенную до размера 16×16 или 32×32 пикселей. Главное, чтобы качество изображения не пострадало. После чего ее нужно сохранить в формате PNG или ISO.

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

Но если на ваш блог заходят с Internet Explorer, то сохраните изображение в формате ICO. Сделать это можно на этом сайте.
Так же есть еще один замечательный сервис позволяющий нарисовать свою уникальную иконку, переходим сюда — www.michurin.net
Если же, у Вас есть готовая интересная картинка, из которой Вы хотите сделать фавиконку, то этот сервис вам в помощь http://favicon.ru/ru.

Дополнительные On-line сервисы и генераторы:

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

Чтобы установить иконку фавикон необходимо залить ее на хостинг в директорию сайта и прописать следующий мета-тег в head:

<link rel="shortcut icon" href="путь до файла иконки" type="image/x-icon">

Например посмотрите как прописан этот тег у меня:
Весь процесс установки довольно простой, я думаю у Вас все получится

ТОП-3 Плагина фавикон для WordPress:

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

1. Heroic Favicon Generator
2. All In One Favicon
3. Custom Favicon

Как видите, ничего сложного в вопросе «Как сделать фавикон» и его установке на сайт — нет! Если у вас возникнут сложности или вопросы по теме поста, то пишите их в комментариях к статье.
Я с радостью на них отвечу.

savme.ru

что такое и зачем он нужен

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

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

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