Sevdresscode.ru

Финансы и бизнес
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Сделать иконку сайта

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

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

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

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

И так, приступим.

П еред тем, как установить иконку на сайт, её нужно создать. С этого и начнём.

§ 1. Как сделать иконку

Ч то такое иконка (favicon), описано здесь. Поэтому перейдём непосредственно к процессу её создания. Как делаю я:

  • 1). Нахожу подходящую картинку или рисую (редактирую) новую;
  • 2). Открываю её в XnView и изменяю размер изображения до 16х16 пикселей:

В сё — иконка для сайта готова.

Н юансы способа:

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

Способ проверялся только в XnView. Он при сохранении перекодирует картинку как надо.

§ 2. Создание иконки для сайта

С обственно, сохранив картинку как favicon.ico, мы и создали иконку для сайта.

§ 3. Как установить иконку на сайт

К опируем наш файл favicon.ico в корневую папку сайта (там, где лежит главная страница сайта) и всё. Браузеры, поисковые системы и прочие программы с сервисами автоматически нашу иконку найдут и отобразят. Главное, чтобы она называлась favicon.ico и лежала в корневой папке сайта.

§ 4. Как поменять иконку сайта

З аменить файл favicon.ico, лежащий на хостинге, на свой, созданный способом выше.

§ 5. Зачем оно вообще надо

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

В поисковой системе Яндекс (Google иконки сайтов не отображает):

В закладках браузера:

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

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

§ 6. Заключение

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

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки ! Так победим.

Поделиться ссылкой на эту страницу в:

Создание favicon.ico

С помощью этого сервиса Вы сможете легко преобразовать любое изображение формата jpg, gif, png в favicon.ico. Стандартный размер изображения для favicon 16×16 пикселей. В режиме Эксперт Вы можете сделать иконки размером: 16×16, 24×24, 32×32, 48×48, 96×96, 128×128 и объединить их в один файл. Данный генератор фавикон поможет Вам сгенерировать иконку Favicon для Вашего сайта из изображения любого размера.

На этой странице собраны примеры иконок сайтов:

А это иконки сайтов которые анализировались и строились за последнее время:

Что такое favicon?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML5 и favicon

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

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

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

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

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

Читать еще:  Продвижение одностраничного сайта
Ссылка на основную публикацию
Adblock
detector