|
|
|
|
 Far |
| WinNavigator |
| Frigate |
| Norton
Commander |
| WinNC |
| Dos
Navigator |
| Servant
Salamander |
| Turbo
Browser |
|
|
| Winamp,
Skins, Plugins |
| Необходимые
Утилиты |
| Текстовые
редакторы |
| Юмор |
|
|
|
File managers and best utilites |
Блог Евгения Крыжановского. Как называется иконка сайта в браузере
Размер фавикона для сайта
В веб-дизайне, как вы наверняка знаете, важна каждая деталь. Человек, перешедший на ваш ресурс, не видит каждый из элементов отдельно, а воспринимает весь образ пакетом, состоящим из других мелких деталей. Таким образом, если вы упускаете что-либо в процессе разработки своего ресурса, эта деталь в дальнейшем может испортить весь комплекс, всю композицию.
Такой мелочью может стать, например, фон кнопки, неправильно подобранный шрифт какого-то небольшого элемента и даже фавикон. И вправду, посмотрите сами- крупные, известные сайты имеют индивидуальную иконку, которая обозначает его в разделе “Закладки” в браузере пользователя. Без нее разработчикам ресурса не удалось бы создать ту композицию, к которой они стремились изначально.
Поэтому и вы, создавая дизайн для своего сайта, должны позаботиться о такой детали, как фавикон. В этой статье мы расскажем о том, как подбирать его под общий стиль ресурса, а также о том, какие размеры должны быть у этого изображения.
Иконка сайта
Сперва определимся, что же представляет собой этот элемент. Прямо сейчас взгляните на название вкладки вашего браузера. Как видите, слева от него есть маленькое изображение, обозначающее упрощенную версию логотипа ресурса. Такая же картинка есть и возле названия сайта, отображенного в результатах поисковой выдачи. Именно на нее ориентируется пользователь, когда видит титул.
Многие вебмастера понимают, что такая картинка нужна - но мало кто знает, какой размер фавикона для сайта будет наиболее подходящим. Поэтому в этой статье мы не только дадим информацию о том, как делать такую иконку и каким образом можно установить ее на ваш ресурс, но и расскажем о размерах изображения.
Предназначение фавикона
Итак, картинка возле заголовка сайта служит для идентификации. Это ее первоначальное предназначение: выразить сайт, назание которого мы видим, и выделить его в глазах остальных. Делается это максимально просто за счет использования графики: мы интуитивно воспринимаем информацию в картинках гораздо быстрее и легче, чем в текстовом формате. Фавиконы способствуют нам в этом. Но не стоит забывать, что размер фавикона минимален в глазах пользователя. Это не логотип в “шапке” сайта, который может содержать дополнительные сведения в виде надписей, каких-то уточнений или контактной информации. Все, что может быть изображено в иконке возле названия, должно максимально подходить под размер фавикона. А он, как уже было обозначено, просто миниатюрный (всего 16 на 16 пикселей).
Как подобрать фавикон?
Так каким же образом вебмастер может разработать иконку для своего сайта? Следует заметить, что просто сжать логотип сайта, чаще всего, не получится. На эмблемах, которые ставят в виде лого того или иного ресурса, зачастую видны разные элементы, которые не всегда будут корректно отображаться в миниатюрном виде. Лучше сразу же отказаться от такой затеи.
Разумеется, размер фавикона не позволяет говорить и о том, чтобы просто вставить туда надпись. Любой текст будет просто незаметен при таком разрешении. Нужно разработать новую иконку, которая бы передавала стиль сайта. Для поиска решений, опять же, давайте обратимся к крупнейшим площадкам.
Многие используют в виде фавикона стилизованную первую букву названия сервиса. Так поступают, например, Bing, Yahoo, Yandex, Wikipedia, Google. Есть и другой подход - если у вас короткое имя сайта, можете установить его в качестве фона своей иконки. Чтобы размер фавикона (в пикселях он достигает, повторю, 16 на 16 точек) позволял корректно показывать эту надпись, она должна быть не длиннее 3 букв. Так поступает, например, сервис Aol.
Как создать фавикон?
Сделать иконку для названия сайта можно несколькими способами. Конечно же, самый простой - это работа с разными готовыми решениями. Речь может идти о каких-нибудь сервисах или программах, которые позволяют из полноценного изображения сделать иконку путем уменьшения его. Однако, я бы рекомендовал заняться разработкой такого логотипа собственными силами. Это, во-первых, даст возможность чему-то научиться; а во-вторых, предоставит большее количество инструментов. Все, что вам нужно будет уметь для этого -что рисовать, а также знать, какого размера фавикон должен быть в конечном варианте. О размере иконки для сайта мы поговорим чуть позже, а пока отметим некоторые тонкости работы с такими изображениями. В частности, не упоминая размер фавикона для сайта, следует уточнить формат такого изображения. Как отмечают опытные дизайнеры, картинка должна быть сохранена в виде .PNG (24-битном), либо же как файл.ICO.
Произвести сохранение картинки можно, например, при помощи Photoshop, где и будет рисоваться эмблема.
Размеры фавикона
Итак, теперь поговорим о том, насколько большой должна быть картинка, которую мы видим рядом с названием сайта в поисковой выдаче. По умолчанию, как уже говорилось, ее размер составляет всего 16 пикселей (по каждой из сторон). Однако если вы попробуете редактировать это изображение в “Фотошопе”, сами убедитесь в том, насколько это неудобно. Поэтому рекомендуем работать с увеличенной картинкой, которую в дальнейшем можно будет просто сжать по краям и сохранить в требуемом формате.
Мультиплатформенность
Однако говоря о том, какого размера фавикон должен быть на вашем сайте, нужно помнить еще одну вещь. Не все платформы отображают картинку ресурса одинаково. Например, устройства с Retina-дисплеем “видят” ваш фавикон в размере 32 на 32 пикселя. А в Safari и на новой платформе Windows, и вовсе, эти иконки достигают размера 64 пикселей.
Поэтому рекомендуем сохранить разные версии иконки и в дальнейшем просто предусмотреть ее изменение в зависимости от платформы пользователя. Еще один интересный момент - можно попробовать загрузить иконку в наибольшем формате, рассчитывая на то, что она будет “сжиматься” в зависимости от браузера.
Посторонние редакторы
Конечно, хорошо, если вы разбираетесь в Photoshop и знаете, какой размер фавикона должен быть и как его достичь, сохраняя свое изображение. Однако есть масса новичков, которые просто не сталкивались с графическими редакторами настолько плотно раньше, поэтому не могут так просто нарисовать нужное изображение. Чтобы помочь таким вебмастерам, существуют различные сервисы, позволяющие в автоматическом режиме делать интересующую вас иконку. Многие из них даже бесплатны, что и вовсе не требует никаких вложений со стороны пользователя.
Для работы иногда нужно лишь зарегистрироваться, но, как вы понимаете, делается это единожды - ведь не так часто компании меняют фавикон. Взгляните хотя бы на Google, который каждый день изменяет логотип, но не трогает иконку.
Как установить фавикон?
Вообще, настроить свой сайт таким образом, чтобы на нем корректно отображалось нужное вам изображение, очень просто. Достаточно выполнить ряд несложных действий, которые позволят поисковым системам, а также простым браузерам считывать информацию.
Для этого полученное изображение необходимо сохранить с именем favicon.ico и поместить в корень своего ресурса. Все, теперь ваше изображение станет распознаваться автоматически, и по происшествии некоторого времени оно будет привязано к вашему сайту.
Кроме такой привязки можно добавить еще одну строчку, которая будет “подсказывать”, где находится ваша иконка. Выглядит он следующим образом:
<link rel="shortcut icon"href="адрес иконки” />
Установить код следует в шапку сайта.
Выводы
Итак, прочитав нашу статью, вы разобрались с тем, какого размера должен быть фавикон для сайта и что это вообще такое. Также, я думаю, вы поняли, что поиск подходящей иконки для вашего ресурса - это необходимость, ведь это играет вам на руку как с точки зрения повышения узнаваемости, так и в плане какого-то дополнительного выделения среди ваших конкурентов. По крайней мере, крупнейшие сайты поступают таким же образом, что можно брать в качестве яркого примера. Да и потом, усилий это особых не вызывает - сделав фавикон раз и установив его правильно на свой сайт, вы можете забыть о нем на следующие несколько месяцев.
Поэтому смело экспериментируйте, придумывайте что-то новое, старайтесь - и все получится!
fb.ru
Что нужно знать перед тем, как добавить фавикон на сайт
В настоящее время без фавикона не обходится ни один сайт. Стандартные иконки заложены при создании площадки. Только они не всегда устраивают пользователя. Проблема в том, что не каждый владелец ресурса знает, как добавить фавикон. Действие это не такое сложное. Зато результат позволит опознать сайт среди нескольких других в выдаче. Ведь ключевые слова могут быть похожими, а фавикон не подведет. Именно его добавление зачастую объясняет решение посетителя зайти на ресурс.
Фавикон для сайта
Перед тем как поместить фавикон на сайт, его нужно создать. Для этого можно выбрать один из предложенных вариантов:
- Заказать макет у дизайнера.
- Создать самостоятельно на онлайн-сервисах в Интернете.
- Создать самому в фотошопе.
Стандартное изображение сохраняется с расширением ICO. Размер его желательно выбрать 16х16 пикселей. Бывают размеры и больше. Они нужны при сохранении пользователем страницы на рабочем столе.
Далее размещаем картинку в корне сайта. Для этого вписываем строку http://site.ru/favicon.ico, где вместо:
- site.ru прописываем название собственного ресурса;
- favicon.ico вписываем название файла с фавиконом.
Для правильного отражения в поисковике необходимо вписать изображение в код. Для загрузки стоит воспользоваться тегом <head></head>. В него вставляется строка <link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon» />. Есть еще один вариант – <link rel=»icon» href=»/favicon.ico» type=»image/x-icon» />.
После этого разработанный логотип будет установлен. Увидеть его можно как на сайте, так и в запросной выдаче. Стоит иконка перед адресом ресурса.
Фавикон и браузеры
Перед тем как добавить фавикон, стоит определиться с его расширением. Оно может быть:
- ICO.
- SVG.
- PNG.
- APNG.
- GIF.
- JPEG.
Но разными браузерами поддерживаются различные расширения. Какой браузер лоялен к какому формату фавикона, покажет таблица ниже.
Тип браузера | ICO | SVG | PNG | APNG | GIF | GIF анимированный | JPEG |
Internet Explorer | 2 | 3 | 1 | 1 | 1 | 1 | 1 |
Google Chrome | 3 | 3 | 2 | 1 | 2 | 1 | 2 |
Firefox | 2 | 1 | 2 | 2 | 2 | 3 | 3 |
Opera | 2 | 2 | 2 | 2 | 2 | 2 | |
Safari | 3 | 1 | 2 | 1 | 2 | 1 | 2 |
1 – не поддерживает;
2 – поддерживает не все версии;
3 – поддерживает все версии.
Потому многие все же предпочитают стандартный формат. Добавив такой фавикон, можно будет не волноваться о типе браузера клиента. Если не учесть возрастные, профессиональные и другие предпочтения аудитории перед тем, как добавить фавикон, можно остаться без логотипа.
Если хочется добавить несколько фавиконов
Иногда есть желание или необходимость добавить небольшое изображение для каждой страницы или же сделать различные форматы для просмотра на разных браузерах. В таком случае к вопросу, как добавить фавикон стандартно, нужно добавить еще пару штрихов.
Вписание вставки фавикона в корень сайта очень простое. Но этого недостаточно для создания нескольких расширений. Для этого нужно в HTML-код вставить <link rel="icon" type="image/ico" href="http://ваш_сайт/favicon.ico" />, предварительно обрамив строку <head>.
Создавая такую конструкцию, следует помнить, что для Internet Explorer слова icon недостаточно. Необходимо перед ним вписать shortcut. В таком случае стандартный браузер будет реагировать на словосочетание, а остальные – только на последнее слово.
На форумах существует много вопросов, как добавить фавикон в "Яндекс". Если изображение добавлено в корень сайта, то регистрация не нужна. Роботы найдут его по умолчанию.
Добавил и потерял
Бывает, что все действия сделаны верно, а при проверке в поисковых системах картинки нет. Ведь главное не то, сколько добавить, а как добавить фавикон. В "Яндекс. Директ" при правильном добавлении модерация изображения займет от 2 до 4 недель. В это время сайт будет отображаться без фавикона. Стоит также упомянуть, что при низком положении сайта в выдаче иконка может не отражаться вовсе.
Если время прошло, а значка нет, возможно, расширение не соответствует браузеру. Проверить наличие фавикона можно:
- для "Яндекс" – http://favicon.yandex.net/favicon/адрес_сайта;
- для "Гугл" – http://www.google.com/s2/favicons?domain=адес_сайта.
После опознания системой фавикон станет неотъемлемой частью сайта и имиджа компании. Потому отнестись к его добавлению стоит ответственно. Правильно выбранная и грамотно добавленная иконка станет путеводной звездой для клиентов. А это означает увеличение конверсии и, соответственно, большую прибыль.
fb.ru
Как установить фавикон на сайт?
Слово «фавикон» представляет собой сокращение от словосочетания «избранный значок» в переводе с английского языка. Данное название происходит от списка закладок в браузере Internet Explorer под названием «Избранное».
Значки на вкладках браузера
При увеличении числа вкладок название сайтов оказывается скрытым. Фавикон позволяет пользователям идентифицировать ссылки и быстро переключаться на нужную вкладку. Также иконка будет использоваться в том случае, если пользователь захочет добавить свой любимый сайт на рабочий стол на мобильном устройстве. Поэтому прежде чем установить фавикон, необходимо определиться с выбором рисунка. Такая иконка сайта будет отображаться как значок приложения на рабочем столе смартфона или планшета.
Как создать фавикон?
Чтобы создать favicon.ico, нужно просто сохранить файл формата PNG с размером 16×16 и преобразовать его в значок с png2ico. На свое усмотрение вы можете добавлять в один и тот же значок различные изображения, чтобы обеспечить альтернативные решения. Большинство современных браузеров использует для такого изображения только формат 16×16. Однако в другом контексте, например, при перетаскивании URL на рабочий стол, может быть отображена большая иконка. Если в значке ресурса содержится только изображение 16×16, то оно будет автоматически масштабироваться до нужного размера. С технической точки зрения не нужно будет добавлять альтернативные решения. Это может существенно увеличить качество изображения. Прежде, чем установить на сайт фавикон, необходимо посмотреть, как картинка будет выглядеть в разных размерах. Необходимо учитывать, что для пользователя с медленным интернетом фавикон может увеличить время загрузки страниц на несколько секунд. Это будет возможно в том случае, если файл загрузки изображения будет слишком большим, поэтому лучше не усердствовать. Добавления альтернативного формата 32×32 должно быть вполне достаточно для того, чтобы картинка хорошо смотрелась даже в случае с крупными значками. Возможность использования большого количества вариантов является приятным бонусом, который выполняется только при желании разработчиков сайта. Количество цветов лучше стараться поддерживать до 16. 16-цветную иконку можно создать при помощи png2ico. Это позволит создать файл меньшего размера, который будет быстрее загружаться. При создании изображения для добавления в favicon.ico стоит также помнить о том, что иконки могут быть отображены в различном фоновом цвете. По этой причине лучше будет использовать прозрачность, а не сплошной фон. Также необходимо продумать, как более грамотно установить фавикон, чтобы он гармонировал с фоном. Стоит заметить, что можно устанавливать промежуточные значения, измеряемые в процентах. Специалисты говорят о том, что идеальной является настройка, которая включает в себя примерно 30-40% от прозрачности фона. Чтобы сделать индивидуальный значок для сайта можно использовать логотип вашего бренда, любимое изображение или символ тематики ресурса. Рекомендуемым размером для фавикона является 512 пикселей и в высоту, и в ширину. Изображение должно иметь форму квадрата, но также можно использовать и прямоугольные картинки. Некоторые движки позволяют обрезать картинку при добавлении. Поэтому не стоит волноваться о том, как поставить на SMFфавикон в виде большой картинки.
Как создать иконку при помощи Photoshop
Специалисты рекомендуют для создания иконок использовать специализированную программу для редактирования изображений, например, GIMP или AdobePhotoshop. Это дает возможность создать значок с размерами ровно 512×512 пикселей. Это позволяет сохранять точные пропорции изображения, залить фон или использовать прозрачные изображения. Данная картинка может быть в форматах JPEG, PNG, GIF. После этого необходимо определить, как можно установить на сайт фавикон. Зачем необходимо добавлять фавикон на сайт? Как уже отмечалось ранее, иконка favicon представляет собой небольшой значок, который появляется в браузере рядом с названием сайта. Он дает возможность пользователям идентифицировать ссылку. Те посетители вашего сайта, которые заходят на него часто, смогут моментально определять это небольшое изображение. Это повысит узнаваемость бренда и поможет завоевать доверие среди пользовательской аудитории. Можно сказать, что фавикон определяет личность вашего сайта. Также он улучшает пользовательский опыт и юзабилити.
Как можно установить фавикон в html
Чтобы добавить фавикон на веб-страницу, необходимо установить его на сервер в той же папке, где расположена веб-страница. Это та информация, которую любой браузер в первую очередь будет искать для загрузки. Если он не обнаружит иконку, то проверит каталог верхнего уровня сервера. Если вы установите его там, то по умолчанию для всех страниц вашего домена будет отображаться один значок. В зависимости от типа браузера и его конфигурации, фавикон не всегда будет отображаться, даже в том случае, если он находится в одном из указанных мест. Чтобы прописать наличие фавикона в коде страницы, необходимо добавить две следующих строки в разделе <Head>:
<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>
Как добавить фавикон в блог WordPress
Если вы задаетесь вопросом, как можно установить фавикон в «Директ», то здесь нет ничего особо сложного. Данный интерфейс имеет соответствующие пункты меню, которые дают возможность выбирать и загружать картинки. Начиная с WordPress 4.3 можно добавлять faviconна сайт из области администратора. Для этого необходимо просто перейти в «Вид»/»Настройки» и выбрать вкладку «Сайт». Используя раздел идентификатора сайта в настройщике, можно поменять название ресурса и его описание. Перед выходом из меню появится вопрос, хотите ли вы, чтобы новые данные отображались в заголовке. Также данное меню позволяет загрузить значок для сайта. Нужно просто нажать на кнопку «Выберите файл» и загрузить изображение, которое вы собираетесь использовать в качестве фавикона.
Как добавить фавикон на блог
Дальнейшая инструкция по установке фавикона будет выглядеть следующим образом. Если изображение, которое вы хотите загрузить, превышает рекомендуемый размер, то WordPress дает возможность обрезать его. Если файл не соответствует рекомендованным параметрам, вы можете сохранить внесенные изменения. Необходимо отметить, что инструкция по установке фавикона на сайт Joomlaбудет выглядеть примерно так же. После этого при просмотре содержимого сайта вы сможете увидеть faviconв действии. Также вы можете зайти на сайт при использовании мобильного устройства и выбрать в меню браузера пункт «Загрузить полную версию». Вы сможете заметить, что иконка в данном случае будет отображаться как на полноценном рабочем столе персонального компьютера.
Устанавливаем фавикон в старых версиях WordPress (ниже 4.2)
Прежде всего, необходимо загрузить свой фавикон в корневой каталог сайта по протоколу FTP. После этого вы можете самостоятельно вставить данный код в файл header.phpнужной темы.
<link rel=”icon” href=”http://www.example.com/favicon.png” type =”image/x-icon”>
<linkrel=”shortcuticon” href=” http://www.example. com/favicon.png ” type=”image/x-icon”>
Теперь осталось только заменить wpbeginner.comна URL вашего сайта, и можно считать дело сделанным. Если в блоге нет файл header.php и вы не можете его найти, то необходимо использовать специальный плагин. Установить и активировать его необходимо в настройках сайта. После того, как плагин будет активирован, нужно зайти в «Настройки», найти пункт «Вставка колонтитулов» и перейти ко вкладке «Вставка кода». Здесь необходимо внести приведенные выше изменения и сохранить настройки. Если вы не хотите разбираться с тонкостями настройки FTP, но все же интересуетесь установкой фавикона, то можете попробовать использовать специальный плагин, который осуществляет регулировку загрузки иконки на всех этапах. Такие дополнения к движку будут доступны не только для WordPress, но и для других систем, например, Joomla.
bezwindowsa.ru
|
|
..:::Счетчики:::.. |
|
|
|
|
|
|
|
|