Стрелочка фавикон – Коллекция favicon.ico (фавикон) на Favicon.by

Содержание

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

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

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

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

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

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

Главная страница сайта inkscape.org

Подготовка изображения для 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/.

Главная страница сайта realfavicongenerator.net

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

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

Настройка фавиконки сайта для iOS (Safari)Настройка иконки favicon для Android (Chrome)Настройка фавиконки сайта для операционных систем Windows 8 и 10Настройка favicon для закреплённых вкладок браузера SafariНастройка параметров генерации favicon для сайта

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

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

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

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

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

После выполнения подготовительных операций приступим к подключению 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

Iconizer.net | стрелка бесплатные иконки

375

Вся коллекция

554

https://icons8.com/iconizer/files/IconSweets_2/orig/cloud_upload_arrow.png

https://iconizer.net//files/IconSweets_2/orig/cloud_upload_arrow.png

383

Вся коллекция

511

https://icons8.com/iconizer/files/Retina_Display_Icons/orig/arrow_up.png

https://iconizer.net//files/Retina_Display_Icons/orig/arrow_up.png

147

Вся коллекция

1585

https://icons8.com/iconizer/files/WPZOOM_Developer_Icon_Set/orig/arrow-up.png

https://iconizer.net//files/WPZOOM_Developer_Icon_Set/orig/arrow-up.png

154

Вся коллекция

8910

https://icons8.com/iconizer/files/Bright/orig/red_arrow.png

https://iconizer.net/files/Bright/thumb/64/red_arrow.png

149

Вся коллекция

451

https://icons8.com/iconizer/files/Black_ToolBar_Icons/orig/Black_Circle-Arrow.png

https://iconizer.net//files/Black_ToolBar_Icons/orig/Black_Circle-Arrow.png

30

Вся коллекция

1209

https://icons8.com/iconizer/files/Gloss_Basic_Icons/orig/arrow-up.png

https://iconizer.net//files/Gloss_Basic_Icons/orig/arrow-up.png

365

Вся коллекция

3425

https://icons8.com/iconizer/files/Simple_But_Sophisticated_App_Icon_Set/orig/arrow_up.png

https://iconizer.net//files/Simple_But_Sophisticated_App_Icon_Set/orig/arrow_up.png

39

Вся коллекция

560

https://icons8.com/iconizer/files/Sketchdock_Ecommerce_Icons/orig/arrow-down-blue.png

https://iconizer.net//files/Sketchdock_Ecommerce_Icons/orig/arrow-down-blue.png

111

Вся коллекция

541

https://icons8.com/iconizer/files/Sketchdock_Ecommerce_Icons/orig/arrow-down-grey.png

https://iconizer.net//files/Sketchdock_Ecommerce_Icons/orig/arrow-down-grey.png

111

Вся коллекция

527

https://icons8.com/iconizer/files/Sketchdock_Ecommerce_Icons/orig/arrow-up-grey.png

https://iconizer.net//files/Sketchdock_Ecommerce_Icons/orig/arrow-up-grey.png

111

Вся коллекция

1060

https://icons8.com/iconizer/files/Elegant_Themes_Icons/orig/Arrow-back-red.png

https://iconizer.net//files/Elegant_Themes_Icons/orig/Arrow-back-red.png

76

Вся коллекция

1377

https://icons8.com/iconizer/files/Elegant_Themes_Icons/orig/Paper-arrow.png

https://iconizer.net//files/Elegant_Themes_Icons/orig/Paper-arrow.png

76

Вся коллекция

1377

https://icons8.com/iconizer/files/Elegant_Themes_Icons/orig/Paper-arrow.png

https://iconizer.net//files/Elegant_Themes_Icons/orig/Paper-arrow.png

76

Вся коллекция

1103

https://icons8.com/iconizer/files/Elegant_Themes_Icons/orig/Arrow-red.png

https://iconizer.net//files/Elegant_Themes_Icons/orig/Arrow-red.png

76

Вся коллекция

1017

https://icons8.com/iconizer/files/Elegant_Themes_Icons/orig/Arrow-back.png

https://iconizer.net//files/Elegant_Themes_Icons/orig/Arrow-back.png

76

Вся коллекция

3343

https://icons8.com/iconizer/files/RM_Kute_Toolbar_Icons/orig/Go-arrow.png

https://iconizer.net//files/RM_Kute_Toolbar_Icons/orig/Go-arrow.png

38

Вся коллекция

482

https://icons8.com/iconizer/files/iPhone_Toolbar_icons/orig/arrowup.png

https://iconizer.net//files/iPhone_Toolbar_icons/orig/arrowup.png

64

Вся коллекция

804

https://icons8.com/iconizer/files/Marker-Style_Icons/orig/arrow-up.png

https://iconizer.net//files/Marker-Style_Icons/orig/arrow-up.png

20

Вся коллекция

341

https://icons8.com/iconizer/files/IconSweets/orig/arrow_up.png

https://iconizer.net//files/IconSweets/orig/arrow_up.png

60

Вся коллекция

863

https://icons8.com/iconizer/files/DefaultIcon_ver_0.11/orig/arrow-up.png

https://iconizer.net/files/DefaultIcon_ver_0.11/thumb/64/arrow-up.png

57

Вся коллекция

5922

https://icons8.com/iconizer/files/Basic_Set_2/orig/arrow_up.png

https://iconizer.net//files/Basic_Set_2/orig/arrow_up.png

43

Вся коллекция

12156

https://icons8.com/iconizer/files/VistaICO_Toolbar_Icons/orig/Arrow-Up.png

https://iconizer.net/files/VistaICO_Toolbar_Icons/thumb/64/Arrow-Up.png

51

Вся коллекция

9721

https://icons8.com/iconizer/files/VistaICO_Toolbar_Icons/orig/Arrow-Left.png

https://iconizer.net/files/VistaICO_Toolbar_Icons/thumb/64/Arrow-Left.png

51

Вся коллекция

12156

https://icons8.com/iconizer/files/VistaICO_Toolbar_Icons/orig/Arrow-Up.png

https://iconizer.net/files/VistaICO_Toolbar_Icons/thumb/64/Arrow-Up.png

51

Вся коллекция

10629

https://icons8.com/iconizer/files/VistaICO_Toolbar_Icons/orig/Arrow-Down.png

https://iconizer.net/files/VistaICO_Toolbar_Icons/thumb/64/Arrow-Down.png

51

Вся коллекция

18712

https://icons8.com/iconizer/files/Aire_PNGs/orig/Arrow%20Up.png

https://iconizer.net/files/Aire_PNGs/thumb/64/Arrow Up.png

78

Вся коллекция

18459

https://icons8.com/iconizer/files/Aire_PNGs/orig/Arrow%20Down.png

https://iconizer.net/files/Aire_PNGs/thumb/64/Arrow Down.png

78

Вся коллекция

18422

https://icons8.com/iconizer/files/Aire_PNGs/orig/Arrow%20Left.png

https://iconizer.net/files/Aire_PNGs/thumb/64/Arrow Left.png

78

Вся коллекция

1179

https://icons8.com/iconizer/files/Corner_Stone/orig/arrow%20up.png

https://iconizer.net//files/Corner_Stone/orig/arrow up.png

47

Вся коллекция

17058

https://icons8.com/iconizer/files/Saint_Valentines_Day/orig/love_disc_arrow.png

https://iconizer.net/files/Saint_Valentines_Day/thumb/64/love_disc_arrow.png

10

Вся коллекция

16019

https://icons8.com/iconizer/files/Saint_Valentines_Day/orig/box_arrow.png

https://iconizer.net/files/Saint_Valentines_Day/thumb/64/box_arrow.png

10

Вся коллекция

2290

https://icons8.com/iconizer/files/Matte_set_Basic/orig/counterclockwise-arrow1.png

https://iconizer.net//files/Matte_set_Basic/orig/counterclockwise-arrow1.png

423

Вся коллекция

2296

https://icons8.com/iconizer/files/Matte_set_Basic/orig/clockwise-arrow1.png

https://iconizer.net//files/Matte_set_Basic/orig/clockwise-arrow1.png

423

Вся коллекция

998

https://icons8.com/iconizer/files/Matte_set_Basic/orig/counterclockwise-arrow.png

https://iconizer.net//files/Matte_set_Basic/orig/counterclockwise-arrow.png

423

Вся коллекция

986

https://icons8.com/iconizer/files/Matte_set_Basic/orig/clockwise-arrow.png

https://iconizer.net//files/Matte_set_Basic/orig/clockwise-arrow.png

423

Вся коллекция

1839

https://icons8.com/iconizer/files/Gloss_set_Basic/orig/arrow-up.png

https://iconizer.net//files/Gloss_set_Basic/orig/arrow-up.png

420

Вся коллекция

702

https://icons8.com/iconizer/files/Gloss_set_Basic/orig/arrow-up1.png

https://iconizer.net//files/Gloss_set_Basic/orig/arrow-up1.png

420

Вся коллекция

936

https://icons8.com/iconizer/files/Brightmix/orig/monotone_arrow_play_right_next.png

https://iconizer.net/files/Brightmix/thumb/64/monotone_arrow_play_right_next.png

99

Вся коллекция

925

https://icons8.com/iconizer/files/Brightmix/orig/monotone_arrow_next_right.png

https://iconizer.net/files/Brightmix/thumb/64/monotone_arrow_next_right.png

99

Вся коллекция

428

https://icons8.com/iconizer/files/Brightmix/orig/monotone_arrow_left_small.png

https://iconizer.net/files/Brightmix/thumb/64/monotone_arrow_left_small.png

99

Вся коллекция

332

https://icons8.com/iconizer/files/Brightmix/orig/monotone_arrow_right_play.png

https://iconizer.net//files/Brightmix/orig/monotone_arrow_right_play.png

99

Вся коллекция

6034

https://icons8.com/iconizer/files/Wireframe_mono_icons/orig/arrow_two_head_2.png

https://iconizer.net//files/Wireframe_mono_icons/orig/arrow_two_head_2.png

244

Вся коллекция

5822

https://icons8.com/iconizer/files/Wireframe_mono_icons/orig/arrow_two_head.png

https://iconizer.net//files/Wireframe_mono_icons/orig/arrow_two_head.png

244

Вся коллекция

6058

https://icons8.com/iconizer/files/Wireframe_mono_icons/orig/cursor_drag_arrow.png

https://iconizer.net//files/Wireframe_mono_icons/orig/cursor_drag_arrow.png

244

Вся коллекция

6321

https://icons8.com/iconizer/files/Wireframe_mono_icons/orig/round_arrow_left.png

https://iconizer.net//files/Wireframe_mono_icons/orig/round_arrow_left.png

244

Вся коллекция

6034

https://icons8.com/iconizer/files/Wireframe_mono_icons/orig/arrow_two_head_2.png

https://iconizer.net//files/Wireframe_mono_icons/orig/arrow_two_head_2.png

244

Вся коллекция

5720

https://icons8.com/iconizer/files/Wireframe_mono_icons/orig/arrow_top.png

https://iconizer.net//files/Wireframe_mono_icons/orig/arrow_top.png

244

Вся коллекция

5822

https://icons8.com/iconizer/files/Wireframe_mono_icons/orig/arrow_two_head.png

https://iconizer.net//files/Wireframe_mono_icons/orig/arrow_two_head.png

244

Вся коллекция

5815

https://icons8.com/iconizer/files/Wireframe_mono_icons/orig/folder_arrow.png

https://iconizer.net//files/Wireframe_mono_icons/orig/folder_arrow.png

244

Вся коллекция

331

https://icons8.com/iconizer/files/Iconic/orig/arrow_down_alt1.png

https://iconizer.net//files/Iconic/orig/arrow_down_alt1.png

88

icons8.com

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

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

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

Фавикон – на первый взгляд незначительный элемент сайта, но на самом деле помогающий решать важные задачи:

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

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

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

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

Традиционно в качестве иконки сайта используется изображение формата ICO размером 16 × 16 пикселей, размещенное в корневом каталоге как файл favicon.ico. Сейчас фавикон может иметь формат PNG, GIF, JPEG, SVG. Но так как поддержка может отсутствовать в каком-либо конкретном браузере или его версии, как правило, используют ICO. Размер, кроме стандартного, может быть 32 × 32, (не везде 60 × 60), 120 × 120.

Подобранное изображение должно:

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

Скачанное, сконвертированное или разработанное изображение размещается в корневой папке сайта. Затем в код head нужно добавить ссылку на фавикон вида <link rel="icon" href="http://путь до файла" type=" image/формат">.

Если используется файл формата ICO, то в type указывается image/x-icon или image/vnd.microsoft.icon.

Для браузера Internet Explorer используется особая ссылка, где вначале будет link rel="shortcut icon".

Для корректного отображения на мобильных устройствах также могут потребоваться отдельные записи, например rel="apple-touch-icon".

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

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

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

wiki.rookee.ru

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

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

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

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

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

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

Содержание статьи

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. //www.favicon.cc/ — англоязычный сервис создания Favicon
  2. //favicon.ru/ — русскоязычный аналог, есть один минус, при сохранении конечной картинки изначальный прозрачный фон получается черным, хотя может я не до конца разобрался с настройками.
  3. //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

HTML: Фавикон (favicon) - создание, добавление, польза

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

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

Создание

Для создания фавикона можно использовать практически любой графический редактор, однако формат изображения, которое вы выбрали должен быть 16x16, 32x32 или 64x64 пикселя, с использованием 8-битного или 24-битного цвета. Изображение должно иметь расширение PNG (стандарт W3C), GIF или ICO.

При создании изображения следует обращать внимание на следующие нюансы:

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

В качестве примера программы, позволяющей создавать иконки, можно привести Favicon Create (скачать) – это самая простая программка. Чтобы сделать иконку понадобится всего лишь обычная картинка в формате *.jpg, или *.bmp, которую можно сделать в любом графическом редакторе, даже в том же пейнте. Загружаем картинку в программу, затем выбираем размер, глубину цвета и нажимаем кнопку старт. Все готово.

Добавление фавикона

Для добавления фавикона на веб-страницу в начало HTML-документа потребуется вписать всего одну строку с тегом <link>, в котором нужно указать атрибут rel, указывающий браузеру что мы добавляем иконку, атрибут href, содержащий адрес нашего изображения, и атрибут type, показывающий какой формат изображения мы используем:


<html>
  <head>

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

  </head>
  <body>
  </body>
</html>

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

В таблице показаны различные варианты добавления фавикона и приведена поддержка браузеров:

Google ChromeInternet ExplorerFirefoxOperaSafari
<link rel="shortcut icon"
href="httр://mysite.ru/myicon.ico">
ДаДаДаДаДа
<link rel="icon" href="httр://mysite.ru/image.ico">ДаДа (с IE 11)ДаДаДа
<link rel="icon" type="image/vnd.microsoft.icon" href="httр://mysite.ru/image.ico">ДаДа (с IE 9)ДаДаДа
<link rel="icon" type="image/png" href="httр://mysite.ru/image.png">ДаДа (с IE 11)ДаДаДа
<link rel="icon" type="image/gif" href="httр://mysite.ru/image.gif">ДаДа (с IE 11)ДаДаДа
<link rel="icon" type="image/x-icon" href="httр://mysite.ru/image.ico">ДаДа (с IE 9)ДаДаДа

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

puzzleweb.ru

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

Всем привет! Сегодня я решил сделать для своего блога 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 — тут тоже много иконок.

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

До встречи!

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

seo-mayak.com

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

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

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

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

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


Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA

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

Примерами фавиконов для веб-ресурсов могут служить логотипы автомобильных брендов, размещаемые на капоте авто: у Шевроле – галстук-бабочка, у Шкоды – индеец со стрелой, у Ауди – четыре кольца, у Фольца – сплетение букв V и W и т.д.

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

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

Как сделать Favicon

Фавикон – обычный графический файл. Сделать его можно несколькими способами.

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

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

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

<link rel="icon" type="image/тип файла" href="путь от корня к фавикон" />

Для IE указываем shortcut icon (с конкретным примером для иконки PNG):

<link rel="shortcut icon" type="image/png" href="/assets/img/icon.png" />

При этом можно указать 2 разных изображения: одно для IE, другое - для остальных веб-браузеров.

Не забывайте про отображение фавикона для мобильных устройств. В<head>следует указать <link rel="apple-touch-icon" и т.д.> , при этом изображение должно иметь размер 60х60 или 120х120.

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

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

Правильный Favicon – какой он

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

  • Иконка должна легко восприниматься. Не стоит рисовать на ней полную картину: достаточно 1-2 схематичных изображения.
  • Она должна быть заметной, привлекающей внимание. Картинка не должна теряться на белом фоне поисковой выдачи и должна бросаться в глаза.
  • Фавиконка должна быть запоминающейся, поэтому используйте простые образы, но не похожие на другие. Иначе вас могут спутать. Многие запомнив вашу иконку, увидев ее снова в выдаче захотят перейти к вам, как к старому знакомому, который однажды уже помог.К примеру, социальная сеть Одноклассники имеет favicon с оранжевыми буквами ОК. Цвет указывает на стилевое решение веб-ресурса, а буквы расшифровываются как две аббревиатуры: сокращенное название веб-ресурса и принятое во всем мире «Окей».

semantica.in

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

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