Как сделать фавикон (favicon) — ico генератор.


Здравствуйте. В этой статье я расскажу: что же такое фавикон и для чего он нужен, а также как работать с favicon генератором.

План нашей статьи:

Собственно три небольших пункта, которые мы и разберем.

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

[important]Фавикон — (на английском Favicon) иконка  показывающаяся на закладках вашего сайта, раньше этим словом называли закладки в браузере internet explorer.[/important]

Вот так выглядят закладки с иконками в браузере Google Chrome:

фавикон генератор

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

Дело в том, что некоторые поисковые системы отображают иконку в результатах поиска. Например:

favicon генератор

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

Где создать фавикон онлайн.

Создать фавикон онлайн можно на следующих сайтах:

  • favicon.ru
  • favicon.cc
  • cy-pr.com
  • genfavicon.com
  • tools.dynamicdrive.com
  • favicon-generator.org
  • faviconfactory.com

Я буду работать на примере favicon.ru. Основные моменты, которые нам необходимы знать:

  1. Размер изображения 16*16 пикселей для браузеров и поисковой системы Яндекс.
  2. Размер изображения 57*57 пикселей для мобильных устройств – iPhone.

[note]Данные выше я привел для того, чтобы вы могли нарисовать вашу иконку с помощью визуального редактора, например Photoshop, если вы захотите.[/note]

Работаем с favicon генератором.

Захожу на favicon.ru и вижу 2 возможности:

  1. Нарисовать с помощью кисточки (я не художник мне не подойдет).
  2. Создать фавикон онлайн с помощью изображения.

Порядок действий:

1. Нажимаю на кнопочку “выберите файл”, выбираем файл и переходим к созданию нашей иконки.

[important]Размер файла не имеет значения, потом мы его будем уменьшать до стандарта.[/important]

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

Выбрав границы щелкаем кнопку “Далее” и картинка сама уменьшиться до 16*16.

3. Вам остается просто нажать кнопку скачать favicon и следовать инструкциям (вам должна прийти ссылка на ваш email с готовой фавикон иконкой). Не пугайтесь как увидите свою картинку большими точкам, это так и должно быть ведь картинка 16*16 точек.

В итоге мой favicon выглядит так: создать фавикон онлайн

Правильный вывод иконки на сайте (блоге).

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

1. С помощью FTP клиента положить вашу иконку в главный каталог сайта (блога). Например для меня это — webbomj.ru/favicon.ico

2. Просто зайти в административную панель на сайт и пройти в меню Темы => Редактор. И под тегом <head> в файле header.php (заголовок или шапка у всех по разному) и прописать следующие строчки:

<link rel="shortcut icon" href="http://путь_до_вашей_иконки/favicon.ico" type="image/x-icon" ><link rel="icon" href="http://путь_до_вашей_иконки/favicon.ico" type="image/x-icon">

Для Айфонов на понадобиться прописать еще ниже строку:

<link rel="apple-touch-icon" href="http:// путь до иконки/apple-touch-favicon.png">

[warning]Внимание для Айфонов нужно иметь иконку размером 57*57. Также не забудьте поменять в коде путь_до_вашей_иконки, на вашу ссылку где лежит сама иконка.[/warning]

Готовая иконка.

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

  • audit4web.ru/info/favicon/
  • favicon.co.uk/gallery.php
  • iconj.com/gallery.php

[help]Если вам понравилась статья я буду благодарен, если вы с помощью кнопочек социальных сетей поделитесь с вашими друзьями! При много благодарен!!![/help]

Посмотрите похожие посты:

5 thoughts on “Как сделать фавикон (favicon) — ico генератор.

  1. Я заметил интересную тенденцию, некоторые сайты умышленно не делают себе Favicon. Это связано с тем, что именно таким образом можно выделяться в поисковой выдаче. Немного противоречиво, но возможно это работает =) Нужно проверять. Favicon generator Это.

    1. Если забит весь топ иконками то выделиться можно, но….
      По одному запросу топ забит иконками, а по другим не везде. Да и иконки не сильно увеличивают CTR

  2. Вопрос, а если у меня html что прописать в head нужно или для index.html не будет работать?

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

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