Favicon. Создание иконки в WordPress

faviconFavicon.ico – это небольшая картинка (иконка) в специальном формате, которая отображается рядом с адресом вашего сайта в адресной строке браузера и рядом с названием вашего сайта в «Избранном» или в «Закладках» вместо стандартной, общей для всех иконки.  Эта маленькая картинка привлекает к себе внимание и кратко отражает суть вашего сайта.  Формат ICO подразумевает наличие в файле нескольких картинок разных размеров и разного качества. Основной формат картинки для favicon.ico – 16х16 пикселей, 256 цветов или TrueColor. Именно эта картинка будет показываться в адресной строке браузера, на таб-баре и в «Избранном» (Закладках).

Далее я приведу перевод с некоторой адаптацией небольшой инструкции из кодекса WordPress, которая пошагово разъясняет, как создать иконку, используя абсолютно любую картинку, и как модифицировать шаблон WordPress для ее дальнейшего использования.

Создаем иконку

1. Подберите изображение, которое должно представлять ваш сайт. Сейчас не важен размер и формат картинки (если конечно она не больше 2 Мб, в этом случае ее надо бы немного уменьшить).

2. Теперь можно воспользоваться генератором иконок, например,  www.favicon.co.uk или  http://favicon.ru/ 3. Загрузите изображение на сайт и выберите будущий размер иконки.

4. После того, как картинка сгенерирована, вы увидите пример того, как она будет выглядеть, а также ссылку на загрузку иконки. Сохраните файл на компьютер, и убедитесь, что он называется favicon.ico.

5. Теперь переходим к установке иконки на сайт.

Установка иконки в WordPress

1. Быть может в папке с вашим шаблоном уже есть старая иконка, ее необходимо удалить.

2. Загрузите новый файл favicon.ico в папку вашей темы.

3. Скопируйте favicon.ico также в корень сайта (например, http://example.com/favicon.ico). Это позволит отображать иконку в RSS.

4. Чтобы иконка отображалась в некоторых старых версиях браузеров, вам необходимо отредактировать файл шаблона header.php.

5. Откройте header.php и найдите код, который начинается с <link rel=»shortcut icon» и заканчивается /favicon.ico» />. Замените его кодом, приведенным ниже. Если вы не можете найти ничего похожего, просто вставьте следующий код где-то между тегами <head> </head>

<link rel=»shortcut icon» href=»<?php bloginfo(‘template_directory’); ?>/favicon.ico» />

6. Сохраните изменения.

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

Кстати, сервис  www.favicon.co.uk  довольно неплох, единственный его недостаток в том, что иконки генерируются только со второго раза (из личных наблюдений).

Можно также воспользоваться таким вариантом. Положите иконку в основную (корневую) — предпочтительнее — или в любую другую папку вашего сайта ; добавьте следующие строки в каждую страницу вашего сайта внутрь секции <head> (не обязательно):

<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=»http://ваш-сайт.ru/favicon.ico» type=»image/x-icon»> <link rel=»shortcut icon» href=»http://ваш-сайт.ru/favicon.ico» type=»image/x-icon»>

Или так:

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

Что ж, думаю, инструкция очень детально и доступно все разъясняет, и будет полезна для новичков.

Комментариев 6

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

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

  3. Если, пишите как установить favicon.ico – то хотя бы, без ошибок в КОДЕ…

  4. Наблюдатель:

    # Сергей, бывает… Правда, недавно сам с помощью этого КОДА фавикон ставил, нормально.
    Да, кстати, может пальцем покажете, ошибку, а то как-то голословно…

  5. Наблюдатель:

    Да Жень, тема уже заезжена и замусолена, но у меня по запросу favicon.ico и как установить favicon.ico каждый день до десятка переходов.

  6. Наблюдатель:

    @Владимир, Знаешь, я-то сначала не врубился вообще что, куда и зачем. Но, посидел чуток, разобрался и… оказывается, все просто :)

Оставить комментарий